Komponenten

Datei-Struktur

/src/components/
├── button/
│   ├── Button.astro
│   └── index.ts
├── card/
│   ├── Card.astro
│   ├── CardHeader.astro
│   └── index.ts

Astro-Komponente

Button.astro

---
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const { variant = 'primary', size = 'md', disabled = false } = Astro.props;
---

<button class:list={['button', `button-${variant}`, `button-${size}`]} disabled={disabled}>
  <slot />
</button>

Props

Naming:

• camelCase
• Boolean mit Verb: isLoading, hasError
• Events mit on: onClick, onChange

Struktur:

interface Props {
  // Content
  children: React.ReactNode;

  // Appearance
  variant?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";

  // State
  isDisabled?: boolean;
  isLoading?: boolean;

  // Events
  onClick?: (event: MouseEvent) => void;
}

CSS

.button {
  /* Base styles */
  display: inline-flex;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--border-radius-md);

  /* Variant */
  &-primary {
    background: var(--color-primary);
    color: white;
  }

  /* Size */
  &-lg {
    padding: var(--spacing-4) var(--spacing-6);
  }
}

Best Practices

1. TypeScript – Strikte Typisierung
2. Design Tokens – Keine Hardcoded-Werte
3. Accessibility – ARIA-Attribute wo nötig
4. Composition – Komponenten kombinierbar

---

Komponenten sind implementiert – nutzt sie konsistent.