website refactor

apps/website/ui/SidebarItem.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon, ChevronRight } from 'lucide-react';
+
+export interface SidebarItemProps {
+  children: ReactNode;
+  onClick?: () => void;
+  icon?: ReactNode;
+}
+
+export const SidebarItem = ({ children, onClick, icon }: SidebarItemProps) => {
+  return (
+    <Box 
+      onClick={onClick} 
+      display="flex" 
+      alignItems="center" 
+      gap={3} 
+      padding={2} 
+      rounded="lg" 
+      style={{ cursor: onClick ? 'pointer' : 'default', transition: 'background-color 0.2s' }}
+      className="hover:bg-[var(--ui-color-bg-surface-muted)]"
+    >
+      {icon && (
+        <Box flexShrink={0} width={10} height={10} bg="var(--ui-color-bg-surface-muted)" rounded="lg" display="flex" alignItems="center" justifyContent="center">
+          {icon}
+        </Box>
+      )}
+      <Box flex={1} minWidth="0">
+        {children}
+      </Box>
+      <Icon icon={ChevronRight} size={4} intent="low" />
+    </Box>
+  );
+};