64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
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';
|
|
import { ChevronRight, Users } from 'lucide-react';
|
|
|
|
interface TeamMembershipCardProps {
|
|
teamName: string;
|
|
role: string;
|
|
joinedAt: string;
|
|
href: string;
|
|
}
|
|
|
|
export function TeamMembershipCard({
|
|
teamName,
|
|
role,
|
|
joinedAt,
|
|
href,
|
|
}: TeamMembershipCardProps) {
|
|
return (
|
|
<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>
|
|
<Stack 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>
|
|
</Stack>
|
|
<Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" className="group-hover:text-purple-400 transition-colors" />
|
|
</Surface>
|
|
</Link>
|
|
);
|
|
}
|