Florian WildeandClaude Opus 5
4ff67c15c2
Deutsche Oberfläche, Hell und Dunkel über next-themes, Navigation mit Rollenfilter und die shadcn-Primitiven, die M1 braucht. Der Farbschema-Knopf kommt ohne Effekt und ohne Zustand aus: welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes setzt sie schon vor der Hydratation, deshalb blitzt nichts auf — und die React-Compiler-Regel gegen setState im Effekt bleibt eingehalten. Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit halten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { Slot } from '@radix-ui/react-slot'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const knopfStile = cva(
|
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
|
|
{
|
|
variants: {
|
|
art: {
|
|
betont: 'bg-betont text-betont-vordergrund hover:bg-betont/90',
|
|
umriss: 'border border-rand bg-karte hover:bg-gedaempft',
|
|
leise: 'hover:bg-gedaempft',
|
|
gefahr: 'bg-gefahr text-gefahr-vordergrund hover:bg-gefahr/90',
|
|
verweis: 'text-betont underline-offset-4 hover:underline',
|
|
},
|
|
groesse: {
|
|
normal: 'h-9 px-4 py-2',
|
|
klein: 'h-8 rounded-md px-3 text-xs',
|
|
gross: 'h-11 rounded-md px-6',
|
|
quadrat: 'size-9',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
art: 'betont',
|
|
groesse: 'normal',
|
|
},
|
|
},
|
|
)
|
|
|
|
export type KnopfEigenschaften = React.ComponentProps<'button'> &
|
|
VariantProps<typeof knopfStile> & {
|
|
/** Rendert stattdessen das Kindelement, z. B. einen Link. */
|
|
alsKind?: boolean
|
|
}
|
|
|
|
function Button({
|
|
className,
|
|
art,
|
|
groesse,
|
|
alsKind = false,
|
|
...rest
|
|
}: KnopfEigenschaften) {
|
|
const Element = alsKind ? Slot : 'button'
|
|
return <Element className={cn(knopfStile({ art, groesse }), className)} {...rest} />
|
|
}
|
|
|
|
export { Button, knopfStile }
|