Public Access
admin
6a0c9d0c4e
- Install lucide-react, framer-motion, react-hot-toast, clsx, tailwind-merge - Custom Tailwind config: semantic color tokens, Inter font, shadow scale, border radius scale, custom animations (fadeIn, slideUp, shimmer) - Shared component library: Button, Badge, Card, Input, Select, Textarea, EmptyState, Skeleton, LoadingSpinner - Global CSS with @layer components (.btn, .card, .input, .badge, .skeleton) - Toast notification system via react-hot-toast + showToast utility - ErrorBoundary wrapper for graceful error recovery - Redesigned navigation: sticky, active state indicators, Lucide icons - Dashboard: hero header, today highlighting, scrollable week grid, redesigned meal cards, empty states, skeleton loading - Meal Detail: hero image with gradient overlay, metadata row with icons, Lucide star rating, edit-existing-feedback flow - Pantry: inline add form, search/filter, visual quantity badges, expiry warnings, confirmation dialogs - Shopping List: gradient summary cards, aisle grouping with badges, sale strikethrough pricing, empty state - Login: centered card with icon, Input component, Button component - All old gray/blue utility classes migrated to new surface/primary tokens - TypeScript clean, production build passes
25 lines
839 B
TypeScript
25 lines
839 B
TypeScript
import { cn } from '../../lib/utils';
|
|
|
|
interface BadgeProps {
|
|
variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function Badge({ variant = 'neutral', children, className }: BadgeProps) {
|
|
const variants = {
|
|
primary: 'bg-primary-50 text-primary-700 border border-primary-200',
|
|
success: 'bg-success-50 text-success-700 border border-success-200',
|
|
warning: 'bg-warning-50 text-warning-700 border border-warning-200',
|
|
danger: 'bg-danger-50 text-danger-700 border border-danger-200',
|
|
info: 'bg-blue-50 text-blue-700 border border-blue-200',
|
|
neutral: 'bg-surface-100 text-surface-600 border border-surface-200',
|
|
};
|
|
|
|
return (
|
|
<span className={cn('badge', variants[variant], className)}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|