66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { Card } from '@/ui/Card';
|
|
import { FeedList } from '@/components/feed/FeedList';
|
|
import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
|
|
import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
|
|
|
|
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="max-w-7xl mx-auto mt-16 mb-20">
|
|
<div className="flex flex-col gap-8 lg:grid lg:grid-cols-3">
|
|
<div className="lg:col-span-2 space-y-4">
|
|
<div className="flex items-baseline justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold text-white">Activity</h2>
|
|
<p className="text-sm text-gray-400">
|
|
See what your friends and leagues are doing right now.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Card className="bg-iron-gray/80">
|
|
<FeedList items={feedItems} />
|
|
</Card>
|
|
</div>
|
|
<aside className="space-y-6">
|
|
<UpcomingRacesSidebar races={upcomingRaces} />
|
|
<LatestResultsSidebar results={latestResults} />
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |