first commit

Made-with: Cursor

frontend/components/ui/Card.tsx

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  hover?: boolean;
+  variant?: "low" | "default";
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ hover, variant = "low", className, children, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl p-6",
+        variant === "low" ? "bg-surface-container-low" : "bg-surface-container",
+        hover && "hover:bg-surface-container-high transition-colors",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+);
+
+Card.displayName = "Card";
+export { Card, type CardProps };