HandDrive

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

Import:

import HandDrive from 'spoko-design-system/src/components/HandDrive.astro'

Props

PropTypeRequiredDefaultDescription
handDrive'lhd' | 'rhd'Yes-Hand drive type
textstringNo-Display text from API
classstringNo-CSS classes for styling
biggerTextbooleanNofalseUse larger text size
titlestringNo-Override tooltip text

Examples

LHD (Left-Hand Drive)

LHD hand drive
Left-Hand Drive
<HandDrive handDrive="lhd" text="Left-Hand Drive" />

RHD (Right-Hand Drive)

RHD hand drive
Right-Hand Drive
<HandDrive handDrive="rhd" text="Right-Hand Drive" />

Without Text

LHD hand drive 
<HandDrive handDrive="lhd" />

With Custom Styling

LHD hand drive
Left-Hand Drive
<HandDrive
  handDrive="lhd"
  text="Left-Hand Drive"
  class="mb-4 border rounded p-2"
  biggerText={true}
/>

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