Initial Commit

components/ui/card.tsx

@@ -0,0 +1,76 @@
+import { cn } from "@/lib/utils";
+import { type HTMLAttributes } from "react";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  accent?: "unit-1" | "unit-2" | "unit-3" | "unit-4";
+  hover?: boolean;
+}
+
+const accentStyles = {
+  "unit-1": "border-l-4 border-l-unit-1",
+  "unit-2": "border-l-4 border-l-unit-2",
+  "unit-3": "border-l-4 border-l-unit-3",
+  "unit-4": "border-l-4 border-l-unit-4",
+};
+
+export function Card({
+  accent,
+  hover = false,
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-3xl border-2 border-border/60 bg-surface p-6",
+        "shadow-[var(--shadow-sm)]",
+        accent && accentStyles[accent],
+        hover && "transition-all duration-200 hover:-translate-y-1 hover:shadow-[var(--shadow-lg)]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("mb-4", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-xl font-bold tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+}
+
+export function CardDescription({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn("text-sm text-muted", className)} {...props}>
+      {children}
+    </p>
+  );
+}