website refactor

apps/website/components/teams/TeamMembershipCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Link from 'next/link';
-import { Users, ChevronRight } from 'lucide-react';
+import { TeamMembershipCard as UiTeamMembershipCard } from '@/ui/TeamMembershipCard';
+import { routes } from '@/lib/routing/RouteConfig';
 
 interface TeamMembership {
   teamId: string;
@@ -14,29 +14,13 @@ interface TeamMembershipCardProps {
   membership: TeamMembership;
 }
 
-export default function TeamMembershipCard({ membership }: TeamMembershipCardProps) {
+export function TeamMembershipCard({ membership }: TeamMembershipCardProps) {
   return (
-    <Link
-      href={`/teams/${membership.teamId}`}
-      className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
-    >
-      <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600/20 border border-purple-600/30">
-        <Users className="w-6 h-6 text-purple-400" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
-          {membership.teamName}
-        </p>
-        <div className="flex items-center gap-2 text-xs text-gray-400">
-          <span className="px-2 py-0.5 rounded-full bg-purple-600/20 text-purple-400 capitalize">
-            {membership.role}
-          </span>
-          <span>
-            Since {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
-          </span>
-        </div>
-      </div>
-      <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-purple-400 transition-colors" />
-    </Link>
+    <UiTeamMembershipCard
+      teamName={membership.teamName}
+      role={membership.role}
+      joinedAt={membership.joinedAt}
+      href={routes.team.detail(membership.teamId)}
+    />
   );
-}
+}