website refactor

apps/website/ui/ListItem.tsx

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Card } from './Card';
+import { Text } from './Text';
+
+export interface ListItemProps {
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+export const ListItem = ({ children, onClick }: ListItemProps) => {
+  return (
+    <Card 
+      variant="dark" 
+      onClick={onClick} 
+      style={{ cursor: onClick ? 'pointer' : 'default' }}
+    >
+      <Box display="flex" alignItems="center" justifyContent="between" gap={4}>
+        {children}
+      </Box>
+    </Card>
+  );
+};
+
+export interface ListItemInfoProps {
+  title: string;
+  description?: string;
+  meta?: ReactNode;
+}
+
+export const ListItemInfo = ({ title, description, meta }: ListItemInfoProps) => (
+  <Box flex={1} minWidth="0">
+    <Text weight="bold" variant="high" block truncate>{title}</Text>
+    {description && (
+      <Text size="xs" variant="low" block marginTop={1} lineClamp={2}>
+        {description}
+      </Text>
+    )}
+    {meta && <Box marginTop={2}>{meta}</Box>}
+  </Box>
+);
+
+export interface ListItemActionsProps {
+  children: ReactNode;
+}
+
+export const ListItemActions = ({ children }: ListItemActionsProps) => (
+  <Box display="flex" alignItems="center" gap={2} flexShrink={0}>
+    {children}
+  </Box>
+);