72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { Globe, Link as LinkIcon } from 'lucide-react';
|
|
|
|
interface ConnectedAccountsPanelProps {
|
|
iracingId?: string | number;
|
|
onConnectIRacing?: () => void;
|
|
}
|
|
|
|
export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: ConnectedAccountsPanelProps) {
|
|
return (
|
|
<section aria-labelledby="connected-accounts-heading">
|
|
<Card>
|
|
<Stack gap={6}>
|
|
<Heading level={3} id="connected-accounts-heading" fontSize="1.125rem">Connected Accounts</Heading>
|
|
|
|
<Stack gap={4} className="divide-y divide-border-gray/30">
|
|
<Stack direction="row" justify="between" align="center" pt={0}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box backgroundColor="#1e293b" p={2} rounded="md">
|
|
<Globe size={20} color="#4ED4E0" />
|
|
</Box>
|
|
<Stack gap={0.5}>
|
|
<Text weight="bold" size="sm">iRacing</Text>
|
|
<Text size="xs" color="#9ca3af">
|
|
{iracingId ? `Connected ID: ${iracingId}` : 'Not connected'}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{!iracingId && (
|
|
<Button size="sm" variant="secondary" onClick={onConnectIRacing}>
|
|
Connect
|
|
</Button>
|
|
)}
|
|
{iracingId && (
|
|
<Box backgroundColor="rgba(16, 185, 129, 0.1)" px={2} py={1} rounded="full">
|
|
<Text size="xs" color="#10b981" weight="bold">Verified</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack direction="row" justify="between" align="center" pt={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box backgroundColor="#1e293b" p={2} rounded="md">
|
|
<LinkIcon size={20} color="#198CFF" />
|
|
</Box>
|
|
<Stack gap={0.5}>
|
|
<Text weight="bold" size="sm">Discord</Text>
|
|
<Text size="xs" color="#9ca3af">Connect for notifications</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Button size="sm" variant="secondary">
|
|
Connect
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
import { Box } from '@/ui/Box';
|