Generated by Spark: Load more of UI from JSON declarations and break up large components into atomic and create hooks as needed

src/components/atoms/json-ui/DataCard.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { IconRenderer } from './IconRenderer'
+
+interface DataCardProps {
+  title: string
+  description?: string
+  icon?: string
+  gradient?: string
+  children: ReactNode
+  className?: string
+}
+
+export function DataCard({ title, description, icon, gradient, children, className }: DataCardProps) {
+  return (
+    <Card className={`${gradient ? `bg-gradient-to-br ${gradient} border-primary/20` : ''} ${className || ''}`}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {icon && (
+            <span className="text-primary">
+              <IconRenderer name={icon} />
+            </span>
+          )}
+          {title}
+        </CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        {children}
+      </CardContent>
+    </Card>
+  )
+}

src/components/atoms/json-ui/IconRenderer.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+import { ComponentSchema } from '@/types/json-ui'
+import * as Icons from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+
+interface IconRendererProps {
+  name: string
+  size?: number
+  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+  className?: string
+}
+
+export function IconRenderer({ name, size = 24, weight = 'duotone', className }: IconRendererProps) {
+  const IconComponent = (Icons as any)[name]
+  
+  if (!IconComponent) {
+    return null
+  }
+  
+  return <IconComponent size={size} weight={weight} className={className} />
+}

src/components/atoms/json-ui/index.ts

@@ -0,0 +1,2 @@
+export { IconRenderer } from './IconRenderer'
+export { DataCard } from './DataCard'