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:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code>import { ProductEngine } from 'spoko-design-system'</code></pre>

2. Initialize tooltips (one-time setup):

Create a tooltip script in your project:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code>// src/scripts/tooltips.ts import 'spoko-design-system/scripts/tooltips';</code></pre>

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

See Tooltips documentation for details.

Basic Usage (New API Structure):

CAYACAYB

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code>--- import { ProductEngine } from 'spoko-design-system'; ---  <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' } }} />  <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' }} /></code></pre>

Special Engine Variants (Colored):

Engine codes for special editions are automatically color-coded:

GTI Engine (Red)CAVE

WRC Engine (Blue)CDLJ

Special BlueCPTA

Engine List

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

Import:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code>import { ProductEngines } from 'spoko-design-system'</code></pre>

Usage:

CAYA,CAYB,CAYC

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code>--- 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 ' } } ]} /></code></pre>

With API Data:

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

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:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="json"><code>{ "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 " } } ] }</code></pre>

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

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code>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 }</code></pre>

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