website refactor

apps/website/ui/UserDropdown.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+import { Link } from './Link';
+
+export interface UserDropdownProps {
+  children: ReactNode;
+  isOpen: boolean;
+}
+
+export const UserDropdown = ({ children, isOpen }: UserDropdownProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <Box 
+      position="absolute" 
+      style={{ right: 0, top: '100%', marginTop: '0.5rem', width: '14rem', zIndex: 50 }}
+    >
+      <Surface variant="muted" rounded="xl" shadow="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+        {children}
+      </Surface>
+    </Box>
+  );
+};
+
+export interface UserDropdownHeaderProps {
+  children: ReactNode;
+  variant?: 'default' | 'demo';
+}
+
+export const UserDropdownHeader = ({ children, variant = 'default' }: UserDropdownHeaderProps) => (
+  <Box 
+    padding={4} 
+    style={{ 
+      borderBottom: '1px solid var(--ui-color-border-default)',
+      background: variant === 'demo' ? 'rgba(25, 140, 255, 0.05)' : 'transparent'
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export interface UserDropdownItemProps {
+  icon?: LucideIcon;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  intent?: 'primary' | 'low' | 'critical' | 'success' | 'telemetry' | 'warning';
+}
+
+export const UserDropdownItem = ({ icon, label, href, onClick, intent = 'low' }: UserDropdownItemProps) => {
+  const content = (
+    <Box display="flex" alignItems="center" gap={3} paddingX={4} paddingY={2.5} style={{ cursor: 'pointer' }}>
+      {icon && <Icon icon={icon} size={4} intent={intent as any} />}
+      <Text size="sm" variant={intent === 'critical' ? 'critical' : (intent === 'low' ? 'med' : intent as any)}>{label}</Text>
+    </Box>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} block underline="none" onClick={onClick}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <Box as="button" onClick={onClick} fullWidth style={{ textAlign: 'left', background: 'transparent', border: 'none' }}>
+      {content}
+    </Box>
+  );
+};
+
+export interface UserDropdownFooterProps {
+  children: ReactNode;
+}
+
+export const UserDropdownFooter = ({ children }: UserDropdownFooterProps) => (
+  <Box style={{ borderTop: '1px solid var(--ui-color-border-default)' }}>
+    {children}
+  </Box>
+);