- 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
28 lines
572 B
TypeScript
28 lines
572 B
TypeScript
import { ReactNode } from "react";
|
|
|
|
interface CardProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function Card({ children, className = "" }: CardProps) {
|
|
return (
|
|
<div className={`bg-card rounded-xl shadow-soft border border-line p-6 ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface CardHeaderProps {
|
|
title: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function CardHeader({ title, className = "" }: CardHeaderProps) {
|
|
return (
|
|
<h2 className={`text-lg font-semibold text-foreground mb-4 ${className}`}>
|
|
{title}
|
|
</h2>
|
|
);
|
|
}
|