BOC v1.0: RS256 auth, Ledger integration, Prometheus metrics, CI/CD, backup

web-v2/src/components/ui/Card.tsx

@@ -0,0 +1,54 @@
+import { cn } from '@/lib/utils'
+import { motion } from 'framer-motion'
+
+interface CardProps {
+  children: React.ReactNode
+  className?: string
+  hover?: boolean
+  padding?: 'sm' | 'md' | 'lg'
+}
+
+export function Card({ children, className, hover = false, padding = 'lg' }: CardProps) {
+  const paddingClasses = {
+    sm: 'p-4',
+    md: 'p-5',
+    lg: 'p-6 md:p-8',
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.18, ease: 'easeOut' }}
+      className={cn(
+        'bg-surface rounded-[20px] card-shadow',
+        paddingClasses[padding],
+        hover && 'transition-shadow duration-200 hover:shadow-hover cursor-pointer',
+        className
+      )}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+interface CardHeaderProps {
+  title: string
+  subtitle?: string
+  action?: React.ReactNode
+  className?: string
+}
+
+export function CardHeader({ title, subtitle, action, className }: CardHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between mb-6', className)}>
+      <div>
+        <h3 className="text-base font-semibold text-text-primary">{title}</h3>
+        {subtitle && (
+          <p className="text-sm text-text-secondary mt-0.5">{subtitle}</p>
+        )}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  )
+}