43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
|
# UI Component
|
|||
|
|
|
|||
|
|
Erstelle eine neue React-Komponente im Mitai Jinkendo Design-System.
|
|||
|
|
|
|||
|
|
## Design-Regeln:
|
|||
|
|
- Hintergrund: `var(--bg)` oder `var(--surface)`
|
|||
|
|
- Akzentfarbe: `var(--accent)` = #1D9E75
|
|||
|
|
- Text: `var(--text1)` (primary), `var(--text2)` (secondary), `var(--text3)` (muted)
|
|||
|
|
- Border: `var(--border)`
|
|||
|
|
- Border-Radius: 12px für Cards, 8px für Buttons/Inputs
|
|||
|
|
- Kein TypeScript – reines JavaScript/JSX
|
|||
|
|
- Inline-Styles bevorzugt, keine externen CSS-Dateien
|
|||
|
|
- Keine neuen npm-Pakete ohne Absprache
|
|||
|
|
|
|||
|
|
## Komponenten-Struktur:
|
|||
|
|
```jsx
|
|||
|
|
function MeineKomponente({ prop1, prop2 }) {
|
|||
|
|
const [state, setState] = useState(null)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="card" style={{padding:16}}>
|
|||
|
|
...
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Vorhandene CSS-Klassen:
|
|||
|
|
- `.card` – weißer Container mit Schatten
|
|||
|
|
- `.btn .btn-primary` – grüner Button
|
|||
|
|
- `.btn .btn-secondary` – grauer Button
|
|||
|
|
- `.btn-full` – volle Breite
|
|||
|
|
- `.form-input` – Eingabefeld
|
|||
|
|
- `.form-label` – Label
|
|||
|
|
- `.form-row` – Label + Input + Unit nebeneinander
|
|||
|
|
- `.section-gap` – vertikaler Abstand
|
|||
|
|
- `.spinner` – Ladeindikator
|
|||
|
|
|
|||
|
|
## API-Calls:
|
|||
|
|
- Immer über `import { api } from '../utils/api'`
|
|||
|
|
- Nie direktes `fetch()` verwenden
|
|||
|
|
- Token wird automatisch injiziert
|