69 lines
1.8 KiB
TypeScript
69 lines
1.8 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;
|
|
joinedAtLabel: string;
|
|
href: string;
|
|
}
|
|
|
|
export function TeamMembershipCard({
|
|
teamName,
|
|
role,
|
|
joinedAtLabel,
|
|
href,
|
|
}: TeamMembershipCardProps) {
|
|
return (
|
|
<Link href={href}>
|
|
<Surface
|
|
variant="muted"
|
|
padding={4}
|
|
rounded="xl"
|
|
border
|
|
borderColor="rgba(38, 38, 38, 0.8)"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
hoverBorderColor="rgba(168, 85, 247, 0.3)"
|
|
hoverBg="iron-gray/50"
|
|
transition
|
|
group
|
|
>
|
|
<Surface
|
|
variant="muted"
|
|
w="12"
|
|
h="12"
|
|
display="flex"
|
|
center
|
|
rounded="xl"
|
|
bg="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 flex="1" minWidth="0">
|
|
<Text weight="semibold" color="text-white" truncate groupHoverTextColor="purple-400" block>
|
|
{teamName}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Badge variant="primary" bg="rgba(147, 51, 234, 0.1)" color="var(--neon-purple)" transform="capitalize">
|
|
{role}
|
|
</Badge>
|
|
<Text size="xs" color="text-gray-400">
|
|
Since {joinedAtLabel}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" />
|
|
</Surface>
|
|
</Link>
|
|
);
|
|
}
|