Patrick Plate
fe6e96dd3f
Shadboard starter-kit (Next.js 15 + React 19 + shadcn/ui + Tailwind 4) Sprint 4.a — Admin Dashboard: - Auth: NextAuth.js v5, login page, middleware, token rotation - Dashboard: KPI cards, Recharts stock chart, quick actions - Members: TanStack Table (search/sort/paginate), add/edit forms - Distributions: multi-step form, real-time quota check, history - Stock: batch management, recall dialog, bar chart - Reports: monthly/member-list/recall, PDF/CSV download, preview Sprint 4.b — Member Portal: - Separate route group with top-nav layout (mobile-first) - Quota dashboard with radial SVG progress indicators - Distribution history with month filter - Profile/settings with password change Cross-cutting: - i18n: German (default) + English via next-intl - Dark + light mode (next-themes, user-togglable) - Playwright E2E tests (6/6 green) - Docker multi-stage build (node:22-alpine) - API proxy via Next.js rewrites Tech: Next.js 15.2.8, React 19, Tailwind 4, NextAuth v5, TanStack Table, Recharts, Zod, React Hook Form, Playwright
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { Slot } from "@radix-ui/react-slot"
|
|
import { cva } from "class-variance-authority"
|
|
|
|
import type { VariantProps } from "class-variance-authority"
|
|
import type { ComponentProps } from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export const badgeVariants = cva(
|
|
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "border-transparent bg-primary text-primary-foreground",
|
|
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
|
destructive:
|
|
"border-transparent bg-destructive text-destructive-foreground",
|
|
outline: "text-foreground",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
}
|
|
)
|
|
|
|
type BadgeProps = ComponentProps<"span"> &
|
|
VariantProps<typeof badgeVariants> & {
|
|
asChild?: boolean
|
|
}
|
|
|
|
export function Badge({
|
|
className,
|
|
variant,
|
|
asChild = false,
|
|
...props
|
|
}: BadgeProps) {
|
|
const Comp = asChild ? Slot : "span"
|
|
|
|
return (
|
|
<Comp
|
|
data-slot="badge"
|
|
className={cn(badgeVariants({ variant }), className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|