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
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
interface ProgressBarProps {
|
|
value: number;
|
|
max?: number;
|
|
showLabel?: boolean;
|
|
size?: "sm" | "md" | "lg";
|
|
className?: string;
|
|
}
|
|
|
|
const sizeStyles = {
|
|
sm: "h-1.5",
|
|
md: "h-2",
|
|
lg: "h-8",
|
|
};
|
|
|
|
export function ProgressBar({
|
|
value,
|
|
max = 100,
|
|
showLabel = false,
|
|
size = "md",
|
|
className = ""
|
|
}: ProgressBarProps) {
|
|
const percent = Math.min(100, Math.max(0, (value / max) * 100));
|
|
|
|
return (
|
|
<div className={`relative ${sizeStyles[size]} bg-line rounded-full overflow-hidden ${className}`}>
|
|
<div
|
|
className="absolute inset-y-0 left-0 bg-success rounded-full transition-all duration-300"
|
|
style={{ width: `${percent}%` }}
|
|
/>
|
|
{showLabel && (
|
|
<span className="absolute inset-0 flex items-center justify-center text-sm font-semibold text-foreground">
|
|
{Math.round(percent)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface MiniProgressBarProps {
|
|
value: number;
|
|
max?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function MiniProgressBar({ value, max = 100, className = "" }: MiniProgressBarProps) {
|
|
const percent = Math.min(100, Math.max(0, (value / max) * 100));
|
|
|
|
return (
|
|
<div className={`flex-1 h-1.5 bg-line rounded-full overflow-hidden ${className}`}>
|
|
<div
|
|
className="h-full bg-success rounded-full transition-all duration-300"
|
|
style={{ width: `${percent}%` }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|