HandDrive

Universal RHD (right-hand drive) and LHD (left-hand drive) component with API-first design.

https://en.wikipedia.org/wiki/Left-_and_right-hand_traffic

Import:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> HandDrive </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'spoko-design-system/src/components/HandDrive.astro'</span></span></code></pre>

Props

Prop	Type	Default	Description
`handDrive`*	`'lhd' \| 'rhd'`	`—`	Hand drive type
`text`	`string`	`—`	Display text from API
`class`	`string`	`—`	CSS classes for styling
`biggerText`	`boolean`	`false`	Use larger text size
`title`	`string`	`—`	Override tooltip text

Examples

LHD (Left-Hand Drive)

Left-Hand Drive

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">HandDrive</span><span style="color:#B392F0"> handDrive</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"lhd"</span><span style="color:#B392F0"> text</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Left-Hand Drive"</span><span style="color:#E1E4E8"> /></span></span></code></pre>

RHD (Right-Hand Drive)

Right-Hand Drive

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">HandDrive</span><span style="color:#B392F0"> handDrive</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"rhd"</span><span style="color:#B392F0"> text</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Right-Hand Drive"</span><span style="color:#E1E4E8"> /></span></span></code></pre>

Without Text

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">HandDrive</span><span style="color:#B392F0"> handDrive</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"lhd"</span><span style="color:#E1E4E8"> /></span></span></code></pre>

With Custom Styling

Left-Hand Drive

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">HandDrive</span></span> <span class="line"><span style="color:#B392F0"> handDrive</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"lhd"</span></span> <span class="line"><span style="color:#B392F0"> text</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Left-Hand Drive"</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"mb-4 border rounded p-2"</span></span> <span class="line"><span style="color:#B392F0"> biggerText</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">}</span></span> <span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>

Design Principles

Universal: No i18n dependencies, works across multiple projects
API-first: All data comes from consistent API endpoints
Self-documenting: ‘lhd’/‘rhd’ values are clear in any language
Type-safe: Strong TypeScript support with string literals
Clean: No magic numbers or mixed value types