mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
apps/website/components/profile/ConnectedAccountsPanel.tsx
View File

@@ -1,11 +1,11 @@
'use client';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
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;
@@ -14,56 +14,35 @@ interface ConnectedAccountsPanelProps {
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}>
<Stack backgroundColor="#1e293b" p={2} rounded="md">
<Globe size={20} color="#4ED4E0" />
</Stack>
<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 && (
<Stack backgroundColor="rgba(16, 185, 129, 0.1)" px={2} py={1} rounded="full">
<Text size="xs" color="#10b981" weight="bold">Verified</Text>
</Stack>
)}
</Stack>
<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>
)
}
/>
<Stack direction="row" justify="between" align="center" pt={4}>
<Stack direction="row" align="center" gap={3}>
<Stack backgroundColor="#1e293b" p={2} rounded="md">
<LinkIcon size={20} color="#198CFF" />
</Stack>
<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>
<AccountItem
icon={LinkIcon}
title="Discord"
description="Connect for notifications"
intent="primary"
action={
<Button size="sm" variant="secondary">
Connect
</Button>
}
/>
</Panel>
);
}