initial

frontend/src/components/ui/Card.tsx

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+interface CardProps {
+  children: ReactNode
+  className?: string
+}
+
+export function Card({ children, className }: CardProps) {
+  return (
+    <div className={clsx('bg-gray-800 rounded-xl p-6 shadow-lg', className)}>
+      {children}
+    </div>
+  )
+}
+
+interface CardHeaderProps {
+  children: ReactNode
+  className?: string
+}
+
+export function CardHeader({ children, className }: CardHeaderProps) {
+  return (
+    <div className={clsx('mb-4', className)}>
+      {children}
+    </div>
+  )
+}
+
+interface CardTitleProps {
+  children: ReactNode
+  className?: string
+}
+
+export function CardTitle({ children, className }: CardTitleProps) {
+  return (
+    <h3 className={clsx('text-xl font-bold text-white', className)}>
+      {children}
+    </h3>
+  )
+}
+
+interface CardContentProps {
+  children: ReactNode
+  className?: string
+}
+
+export function CardContent({ children, className }: CardContentProps) {
+  return (
+    <div className={clsx('text-gray-300', className)}>
+      {children}
+    </div>
+  )
+}