website refactor

apps/website/components/teams/TeamMembershipGrid.tsx

@@ -0,0 +1,62 @@
+
+
+import { Box } from '@/ui/Box';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+import { ChevronRight, Shield, Users } from 'lucide-react';
+
+interface TeamMembership {
+  team: {
+    id: string;
+    name: string;
+  };
+  role: string;
+  joinedAt: Date;
+}
+
+interface TeamMembershipGridProps {
+  memberships: TeamMembership[];
+}
+
+export function TeamMembershipGrid({ memberships }: TeamMembershipGridProps) {
+  return (
+    <Card>
+      <Box mb={4}>
+        <Heading level={2} icon={<Shield style={{ width: '1.25rem', height: '1.25rem', color: '#a855f7' }} />}>
+          Team Memberships
+          <Text size="sm" color="text-gray-500" weight="normal" style={{ marginLeft: '0.5rem' }}>({memberships.length})</Text>
+        </Heading>
+      </Box>
+      <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', gap: '1rem' }}>
+        {memberships.map((membership) => (
+          <Box key={membership.team.id}>
+            <Link
+              href={`/teams/${membership.team.id}`}
+              variant="ghost"
+            >
+              <Surface variant="muted" rounded="xl" border padding={4} style={{ display: 'flex', alignItems: 'center', gap: '1rem', backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}>
+                <Surface variant="muted" rounded="lg" padding={3} style={{ backgroundColor: 'rgba(147, 51, 234, 0.2)', border: '1px solid rgba(147, 51, 234, 0.3)' }}>
+                  <Users style={{ width: '1.5rem', height: '1.5rem', color: '#a855f7' }} />
+                </Surface>
+                <Box style={{ flex: 1, minWidth: 0 }}>
+                  <Text weight="semibold" color="text-white" block truncate>{membership.team.name}</Text>
+                  <Stack direction="row" align="center" gap={2} mt={1}>
+                    <Surface variant="muted" rounded="full" padding={1} style={{ paddingLeft: '0.5rem', paddingRight: '0.5rem', backgroundColor: 'rgba(147, 51, 234, 0.2)', color: '#a855f7' }}>
+                      <Text size="xs" weight="medium" style={{ textTransform: 'capitalize' }}>{membership.role}</Text>
+                    </Surface>
+                    <Text size="xs" color="text-gray-500">Since {membership.joinedAt.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}</Text>
+                  </Stack>
+                </Box>
+                <ChevronRight style={{ width: '1rem', height: '1rem', color: '#737373' }} />
+              </Surface>
+            </Link>
+          </Box>
+        ))}
+      </Box>
+    </Card>
+  );
+}