website refactor

apps/website/ui/AccountItem.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+export interface AccountItemProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  action?: ReactNode;
+  intent?: 'primary' | 'telemetry' | 'success' | 'low';
+}
+
+export const AccountItem = ({ 
+  icon, 
+  title, 
+  description, 
+  action,
+  intent = 'low'
+}: AccountItemProps) => {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="between" paddingY={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
+      <Box display="flex" alignItems="center" gap={3}>
+        <Box padding={2} rounded="md" bg="var(--ui-color-bg-surface-muted)">
+          <Icon icon={icon} size={5} intent={intent} />
+        </Box>
+        <Box>
+          <Text weight="bold" size="sm" variant="high">{title}</Text>
+          <Text size="xs" variant="low">{description}</Text>
+        </Box>
+      </Box>
+      {action && (
+        <Box>
+          {action}
+        </Box>
+      )}
+    </Box>
+  );
+};