Froidefond Julien
d001e29bbc
- Created reusable UI components (Card, Button, Badge, Form, Icon) - Added PageIcon and NavIcon components with consistent styling - Refactored all pages to use new UI components - Added non-blocking image loading with skeleton for book covers - Created LibraryActions dropdown for library settings - Added emojis to buttons for better UX - Fixed Client Component issues with getBookCoverUrl
34 lines
970 B
TypeScript
34 lines
970 B
TypeScript
import { ReactNode } from "react";
|
|
|
|
interface StatBoxProps {
|
|
value: ReactNode;
|
|
label: string;
|
|
variant?: "default" | "primary" | "success" | "warning" | "error";
|
|
className?: string;
|
|
}
|
|
|
|
const variantStyles: Record<string, string> = {
|
|
default: "bg-muted/5",
|
|
primary: "bg-primary-soft",
|
|
success: "bg-success-soft",
|
|
warning: "bg-warning-soft",
|
|
error: "bg-error-soft",
|
|
};
|
|
|
|
const valueVariantStyles: Record<string, string> = {
|
|
default: "text-foreground",
|
|
primary: "text-primary",
|
|
success: "text-success",
|
|
warning: "text-warning",
|
|
error: "text-error",
|
|
};
|
|
|
|
export function StatBox({ value, label, variant = "default", className = "" }: StatBoxProps) {
|
|
return (
|
|
<div className={`text-center p-4 rounded-lg ${variantStyles[variant]} ${className}`}>
|
|
<span className={`block text-3xl font-bold ${valueVariantStyles[variant]}`}>{value}</span>
|
|
<span className={`text-xs ${valueVariantStyles[variant]}/80`}>{label}</span>
|
|
</div>
|
|
);
|
|
}
|