website refactor

apps/website/components/teams/TeamMembershipCard.tsx

@@ -1,26 +1,64 @@
-import React from 'react';
-import { TeamMembershipCard as UiTeamMembershipCard } from '@/ui/TeamMembershipCard';
-import { routes } from '@/lib/routing/RouteConfig';
 
-interface TeamMembership {
-  teamId: string;
-  teamName: string;
-  teamTag?: string;
-  role: string;
-  joinedAt: string;
-}
+
+import { ChevronRight, Users } from 'lucide-react';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
 
 interface TeamMembershipCardProps {
-  membership: TeamMembership;
+  teamName: string;
+  role: string;
+  joinedAt: string;
+  href: string;
 }
 
-export function TeamMembershipCard({ membership }: TeamMembershipCardProps) {
+export function TeamMembershipCard({
+  teamName,
+  role,
+  joinedAt,
+  href,
+}: TeamMembershipCardProps) {
   return (
-    <UiTeamMembershipCard
-      teamName={membership.teamName}
-      role={membership.role}
-      joinedAt={membership.joinedAt}
-      href={routes.team.detail(membership.teamId)}
-    />
+    <Link href={href}>
+      <Surface
+        variant="muted"
+        padding={4}
+        rounded="xl"
+        border
+        style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }}
+        className="flex items-center gap-4 hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
+      >
+        <Surface
+          variant="muted"
+          w="12"
+          h="12"
+          display="flex"
+          center
+          rounded="xl"
+          style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.2)' }}
+          border
+        >
+          <Icon icon={Users} size={6} color="var(--neon-purple)" />
+        </Surface>
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Text weight="semibold" color="text-white" className="truncate group-hover:text-purple-400 transition-colors" block>
+            {teamName}
+          </Text>
+          <Stack direction="row" align="center" gap={2} mt={1}>
+            <Badge variant="primary" style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', color: 'var(--neon-purple)', textTransform: 'capitalize' }}>
+              {role}
+            </Badge>
+            <Text size="xs" color="text-gray-400">
+              Since {new Date(joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+            </Text>
+          </Stack>
+        </Box>
+        <Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" className="group-hover:text-purple-400 transition-colors" />
+      </Surface>
+    </Link>
   );
 }