49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { AccountItem } from '@/ui/AccountItem';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Globe, Link as LinkIcon } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface ConnectedAccountsPanelProps {
|
|
iracingId?: string | number;
|
|
onConnectIRacing?: () => void;
|
|
}
|
|
|
|
export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: ConnectedAccountsPanelProps) {
|
|
return (
|
|
<Panel title="Connected Accounts">
|
|
<AccountItem
|
|
icon={Globe}
|
|
title="iRacing"
|
|
description={iracingId ? `Connected ID: ${iracingId}` : 'Not connected'}
|
|
intent="telemetry"
|
|
action={
|
|
iracingId ? (
|
|
<Badge variant="success">Verified</Badge>
|
|
) : (
|
|
<Button size="sm" variant="secondary" onClick={onConnectIRacing}>
|
|
Connect
|
|
</Button>
|
|
)
|
|
}
|
|
/>
|
|
|
|
<AccountItem
|
|
icon={LinkIcon}
|
|
title="Discord"
|
|
description="Connect for notifications"
|
|
intent="primary"
|
|
action={
|
|
<Button size="sm" variant="secondary">
|
|
Connect
|
|
</Button>
|
|
}
|
|
/>
|
|
</Panel>
|
|
);
|
|
}
|
|
|