florian.wildeandClaude Opus 5.5
871bb3a77c
Next.js 16, Prisma 7, Tailwind 4 und Vitest/Playwright, Konfiguration aus Laufzettel übernommen, weil dort derselbe Stack erprobt ist. Die Farben der Branding-Vorgabe stehen als Tokens in globals.css, das helle Theme setzt dieselben Namen neu. Amber und Rot sind dort abgedunkelt, sonst reicht der Kontrast nicht – ein Test prüft beide Themes gegen 4,5:1. Anmeldung mit lokalem Benutzer, Rolle je Anfrage aus der Datenbank, Audit-Log per Trigger nur anhängbar. Geprüft im gebauten Stand auf 1440 px und 390 px. Closes #001 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
30 lines
887 B
TypeScript
30 lines
887 B
TypeScript
import { clsx } from "clsx";
|
|
|
|
type Variante = "primaer" | "sekundaer" | "gefahr";
|
|
|
|
const VARIANTEN: Record<Variante, string> = {
|
|
primaer: "bg-akzent text-akzent-text hover:opacity-90",
|
|
sekundaer: "border border-linie bg-panel-hoch text-text hover:border-muted",
|
|
gefahr: "border border-fehler text-fehler hover:bg-fehler/10",
|
|
};
|
|
|
|
/** Ein echter `<button>`; 40 px hoch, am Handy 44 px (Tippfläche). */
|
|
export function Knopf({
|
|
variante = "primaer",
|
|
className,
|
|
...rest
|
|
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { variante?: Variante }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
{...rest}
|
|
className={clsx(
|
|
"inline-flex h-11 items-center justify-center gap-2 rounded-lg px-4 text-sm font-semibold transition sm:h-10",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
VARIANTEN[variante],
|
|
className,
|
|
)}
|
|
/>
|
|
);
|
|
}
|