ProductEngine

Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.

⚡ Performance-optimized: Uses Tippy.js delegation pattern - one global script handles all tooltips efficiently.

🔍 SEO-friendly: Engine codes rendered as static HTML (no client-side hydration required).

Single Engine Code

Display a single engine code with tooltip showing detailed engine information.

Setup:

1. Import the component:

import { ProductEngine } from 'spoko-design-system'

2. Initialize tooltips (one-time setup):

Create a tooltip script in your project:

// src/scripts/tooltips.ts
import 'spoko-design-system/scripts/tooltips';

Then import it in your layout’s <head>:

---
// In your layout file (e.g., HeadCommon.astro)
---
<head>
  <script src="/src/scripts/tooltips.ts"></script>
</head>

See Tooltips documentation for details.

Basic Usage (New API Structure):

CAYACAYB

---
import { ProductEngine } from 'spoko-design-system';
---

<!-- New API structure (with built-in translations) -->
<ProductEngine engine={{
  code: 'CAYA',
  name: '1.6 TDI',
  serie: { value: 'EA189', label: 'Seria silnika' },
  power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
  displacement: { value: 1598, label: 'Pojemność' },
  euro: { value: 5, label: 'Norma Euro' }
}} />

<!-- Old API structure (backward compatible) -->
<ProductEngine
  engine={{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }}
  translations={{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }}
/>

Special Engine Variants (Colored):

Engine codes for special editions are automatically color-coded:

GTI Engine (Red)CAVE

WRC Engine (Blue)CDLJ

Special BlueCPTA

<!-- GTI Engine - Red -->
<ProductEngine engine={{
  code: 'CAVE',
  name: '1.4 TSI',
  power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
  displacement: { value: 1390, label: 'Pojemność' },
  euro: { value: 5, label: 'Norma ' }
}} />

<!-- WRC Engine - Blue -->
<ProductEngine engine={{
  code: 'CDLJ',
  name: '1.6 TDI',
  power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
  displacement: { value: 1598, label: 'Pojemność' },
  euro: { value: 6, label: 'Norma ' }
}} />

Engine List

Display multiple engine codes from an array (from API response).

Import:

import { ProductEngines } from 'spoko-design-system'

Usage:

CAYA,CAYB,CAYC

---
import { ProductEngines } from 'spoko-design-system';
---

<ProductEngines engines={[
  {
    id: 13,
    code: 'CAYA',
    name: '1.6 TDI',
    serie: { value: 'EA189', label: 'Seria silnika' },
    power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
    displacement: { value: 1598, label: 'Pojemność' },
    euro: { value: 5, label: 'Norma ' }
  },
  {
    id: 14,
    code: 'CAYB',
    name: '1.6 TDI',
    serie: { value: 'EA189', label: 'Seria silnika' },
    power: { kw: 66, ps: 90, ps_label: 'KM', label: 'Moc' },
    displacement: { value: 1598, label: 'Pojemność' },
    euro: { value: 5, label: 'Norma ' }
  }
]} />

With API Data:

When using data from the API, pass the part_engines array directly. The component automatically extracts translations from the nested structure:

<ProductEngines
  engines={product.part_engines}
  isPdp={true}
/>

Note: The new API structure includes labels and translations, so you no longer need to pass the translations prop. The component will use labels from the API (e.g., “Moc”, “Pojemność”, “KM”).

API Response Structure:

{
  "part_engines": [
    {
      "id": 13,
      "code": "CAYA",
      "name": "1.6 TDI",
      "info": null,
      "serie": {
        "value": "EA189",
        "label": "Seria silnika"
      },
      "type": {
        "value": "diesel",
        "translated": "Diesel",
        "label": "Typ paliwa"
      },
      "power": {
        "kw": 55,
        "ps": 75,
        "ps_label": "KM",
        "label": "Moc"
      },
      "date": {
        "value": "03/2009–05/2010",
        "label": "Data produkcji"
      },
      "displacement": {
        "value": 1598,
        "label": "Pojemność"
      },
      "compression_ratio": {
        "value": "16,5:1",
        "label": "Stopień sprężania"
      },
      "valves": {
        "value": 16,
        "label": "Zawory"
      },
      "euro": {
        "value": 5,
        "formatted": "Norma Euro 5",
        "label": "Norma "
      }
    },
    {
      "id": 14,
      "code": "CAYB",
      "name": "1.6 TDI",
      "info": null,
      "serie": {
        "value": "EA189",
        "label": "Seria silnika"
      },
      "type": {
        "value": "diesel",
        "translated": "Diesel",
        "label": "Typ paliwa"
      },
      "power": {
        "kw": 66,
        "ps": 90,
        "ps_label": "KM",
        "label": "Moc"
      },
      "date": {
        "value": "03/2009–03/2014",
        "label": "Data produkcji"
      },
      "displacement": {
        "value": 1598,
        "label": "Pojemność"
      },
      "compression_ratio": {
        "value": "16,5:1",
        "label": "Stopień sprężania"
      },
      "valves": {
        "value": 16,
        "label": "Zawory"
      },
      "euro": {
        "value": 5,
        "formatted": "Norma Euro 5",
        "label": "Norma "
      }
    }
  ]
}

Props

ProductEngine

Prop	Type	Default	Description
`engine`*	`EngineObject`	`—`	Engine object with nested API structure — see shape below.
`showComma`	`boolean`	`false`	Show comma after code (for inline lists).
`translations`	`object`	`—`	Fallback translations (used only with old flat API).

ProductEngines

Prop	Type	Default	Description
`engines`*	`EngineObject[]`	`[]`	Array of engine objects (auto-sorted by code).
`isPdp`	`boolean`	`false`	Product detail page styling.
`translations`	`object`	`—`	Fallback translations (used only with old flat API).

EngineObject shape

interface EngineObject {
  code: string;                                       // Engine code (e.g. "CAYA") — required
  name?: string;                                      // Engine name (e.g. "1.6 TDI")
  info?: string;                                      // Additional info shown in header
  serie?: { value: string; label: string };           // e.g. "EA189"
  power?: { kw: number; ps: number; ps_label: string; label: string };
  displacement?: { value: number; label: string };    // cm³
  euro?: { value: number; label: string; formatted: string };
  date?: { value: string; label: string };
  // ... other API-provided spec fields
}

Note: The component supports both the new nested API structure (with built-in labels) and the old flat structure for backward compatibility.

Features

✅ Rich Tooltips: Shows detailed engine specifications on hover (Tippy.js delegation)
✅ Performance Optimized: One global script handles all tooltips efficiently
✅ SEO-Friendly: Engine codes rendered as static HTML (no hydration)
✅ API-Driven Translations: Labels and units come directly from API
✅ Multi-language: Supports Polish (KM), German (PS), English (HP)
✅ Two-Tone Design: Dark blue header with light body for better hierarchy
✅ Semantic Colors: Automatic color coding for special engines (GTI, WRC, etc.)
✅ Clean Layout: Flexbox-based design with semantic CSS classes
✅ Smart Data: Only shows relevant fields (power, displacement, euro)
✅ Auto-sorting: Engines automatically sorted alphabetically by code
✅ Backward Compatible: Works with both new and old API structures
✅ Touch Friendly: Works on mobile devices

Engine Color Coding

Special engine codes are automatically color-coded:

Engine Codes	Color	Description
CAVE, CTHE, DAJA, DAYB	Red	GTI Performance engines
CDLJ	Blue	WRC/R Street engines
CPTA, CZEA	Light Blue	Special blue engines

Notes

Setup required: Import 'spoko-design-system/scripts/tooltips' once in your layout (see Tooltips docs)
Hover over any engine code to see full specifications in a detailed tooltip
Tooltips use Tippy.js delegation pattern (one global handler for all tooltips)
Performance: No client-side hydration needed - pure Astro components
New API structure: Labels come from API (e.g., “Moc”, “Pojemność”, “KM”)
No manual translations needed: The API provides all labels and units
The component automatically extracts series value from nested structure
Date field is not shown in tooltips (only power, displacement, and euro)
Missing data fields are gracefully hidden
Commas between engine codes are automatically handled in lists
Backward compatible: Still works with old flat API structure
Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)

Migration from Vue to Astro

If upgrading from the old Vue version:

Remove client:load directive from all ProductEngine/ProductEngines usage
Set up tooltips in your layout (see Tooltips documentation)
Update imports to use Astro components (automatically handled by package exports)
No other changes needed - props and API structure remain the same