75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { FeedList } from '@/components/feed/FeedList';
|
|
import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
|
|
import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
|
|
import { Card } from '@/ui/Card';
|
|
import { Container } from '@/ui/Container';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Section } from '@/ui/Section';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface FeedItemData {
|
|
id: string;
|
|
type: string;
|
|
headline: string;
|
|
body?: string;
|
|
timestamp: string;
|
|
formattedTime: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}
|
|
|
|
type FeedUpcomingRace = {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
scheduledAt: string | Date;
|
|
};
|
|
|
|
type FeedLatestResult = {
|
|
raceId: string;
|
|
track: string;
|
|
car: string;
|
|
winnerName: string;
|
|
scheduledAt: string | Date;
|
|
};
|
|
|
|
interface FeedLayoutProps {
|
|
feedItems: FeedItemData[];
|
|
upcomingRaces: FeedUpcomingRace[];
|
|
latestResults: FeedLatestResult[];
|
|
}
|
|
|
|
export function FeedLayout({
|
|
feedItems,
|
|
upcomingRaces,
|
|
latestResults
|
|
}: FeedLayoutProps) {
|
|
return (
|
|
<Section className="mt-16 mb-20">
|
|
<Container>
|
|
<Grid cols={1} lgCols={3} gap={8}>
|
|
<Stack gap={4} className="lg:col-span-2">
|
|
<Stack direction="row" align="baseline" justify="between" gap={4}>
|
|
<Stack>
|
|
<Heading level={2} weight="semibold" color="text-white">Activity</Heading>
|
|
<Text size="sm" color="text-gray-400">
|
|
See what your friends and leagues are doing right now.
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<Card className="bg-iron-gray/80">
|
|
<FeedList items={feedItems} />
|
|
</Card>
|
|
</Stack>
|
|
<Stack as="aside" gap={6}>
|
|
<UpcomingRacesSidebar races={upcomingRaces} />
|
|
<LatestResultsSidebar results={latestResults} />
|
|
</Stack>
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|