42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
} |