extract components from website

apps/website/components/teams/TeamMembershipCard.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Link from 'next/link';
+import { Users, ChevronRight } from 'lucide-react';
+
+interface TeamMembership {
+  teamId: string;
+  teamName: string;
+  teamTag?: string;
+  role: string;
+  joinedAt: string;
+}
+
+interface TeamMembershipCardProps {
+  membership: TeamMembership;
+}
+
+export default 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>
+  );
+}