Mannu
c2cabc01d3
G1 — Design System: 14 UI primitives (Button, Card, Modal, Sheet, Input, Textarea, Select, EmptyState, LoadingShimmer, ConfirmDialog, WashiTape, Badge, Avatar, Tabs), PageTransition with Framer Motion, sun/moon CSS vars, Caveat font, /dev/components visual showcase. G2 — Memories Pipeline: R2 presigned uploads, Sharp thumbnail generation, LiteLLM vision captions + pgvector embeddings, CSS masonry gallery with infinite scroll, private toggle, semantic search fallback to ILIKE. G3 — Medical: dose log + correction audit trail, IAP vaccine bulk import, emergency escalation page, pediatrician phone in settings. G4 — AI Brain: keyword guardrail → LLM classifier → structured DB tool-use (7 tools) → memory search → general parenting handler; ai_usage table; 22-case medical bypass safety test suite. DB migrations: 0011_memories, 0012_medical_doses, 0013_ai_usage. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { ReactNode, ButtonHTMLAttributes } from "react";
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children: ReactNode;
|
|
variant?: "primary" | "secondary" | "ghost" | "danger";
|
|
size?: "sm" | "md" | "lg";
|
|
fullWidth?: boolean;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const variants = {
|
|
primary: "bg-rose-400 hover:bg-rose-500 text-white disabled:bg-gray-200 dark:disabled:bg-gray-600 disabled:text-gray-400",
|
|
secondary: "bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200",
|
|
ghost: "bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400",
|
|
danger: "bg-red-500 hover:bg-red-600 text-white",
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "px-3 py-1.5 text-xs rounded-lg",
|
|
md: "px-4 py-2 text-sm rounded-xl",
|
|
lg: "px-6 py-3 text-base rounded-xl",
|
|
};
|
|
|
|
export function Button({
|
|
children,
|
|
variant = "primary",
|
|
size = "md",
|
|
fullWidth = false,
|
|
loading = false,
|
|
className = "",
|
|
disabled,
|
|
...rest
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
{...rest}
|
|
disabled={disabled || loading}
|
|
className={`
|
|
font-medium transition-colors inline-flex items-center justify-center gap-1.5
|
|
disabled:cursor-not-allowed
|
|
${variants[variant]}
|
|
${sizes[size]}
|
|
${fullWidth ? "w-full" : ""}
|
|
${className}
|
|
`}
|
|
>
|
|
{loading ? (
|
|
<span className="flex gap-0.5">
|
|
<span className="w-1.5 h-1.5 bg-current rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
|
|
<span className="w-1.5 h-1.5 bg-current rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
|
|
<span className="w-1.5 h-1.5 bg-current rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
|
|
</span>
|
|
) : children}
|
|
</button>
|
|
);
|
|
}
|