website refactor

apps/website/ui/SummaryItem.tsx

@@ -0,0 +1,51 @@
+
+
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Text } from './Text';
+
+interface SummaryItemProps {
+  title: string;
+  subtitle?: string;
+  rightContent?: ReactNode;
+  onClick?: () => void;
+}
+
+export function SummaryItem({
+  title,
+  subtitle,
+  rightContent,
+  onClick,
+}: SummaryItemProps) {
+  return (
+    <Surface
+      variant="muted"
+      padding={3}
+      rounded="lg"
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: onClick ? 'pointer' : 'default',
+      }}
+    >
+      <Box>
+        <Text color="text-white" weight="medium" block>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text size="xs" color="text-gray-500">
+            {subtitle}
+          </Text>
+        )}
+      </Box>
+      {rightContent && (
+        <Box>
+          {rightContent}
+        </Box>
+      )}
+    </Surface>
+  );
+}