This commit is contained in:
2025-12-27 16:57:19 +02:00
parent 5bfdd7dd2b
commit 331ff6daf3
31 changed files with 1049 additions and 429 deletions

View File

@@ -6,15 +6,10 @@ import {
} from "@/components/roblox/FriendsOnline";
import { GameCard } from "@/components/roblox/GameCard";
import { HomeLoggedInHeader } from "@/components/site/HomeUserHeader";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Card, CardContent } from "@/components/ui/card";
import {
getOmniRecommendationsHome,
OmniRecommendation
} from "@/lib/omniRecommendation";
import { getOmniRecommendationsHome } from "@/lib/omniRecommendation";
import { getThumbnails, ThumbnailRequest } from "@/lib/thumbnailLoader";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { AlertTriangleIcon } from "lucide-react";
export default function Home() {
const SORTS_ALLOWED_IDS = [100000003, 100000001];
@@ -53,8 +48,10 @@ export default function Home() {
<>
<HomeLoggedInHeader />
<div className="h-4" />
<BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" />
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" />
</div>
{/* <div className="justify-center w-screen px-8 pt-6">
<Alert variant="default" className="bg-base/50 space-x-2">
<AlertTriangleIcon />
@@ -66,23 +63,39 @@ export default function Home() {
</Alert>
</div> */}
<div className="p-4 space-y-8 no-scrollbar">
{isLoading || !rec ? (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
{isLoading ? (
<div className="space-y-6">
<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, index) => (
<Card key={`home-skeleton-${index}`}>
<CardContent className="p-4 space-y-3">
<div className="aspect-video rounded-xl bg-surface0/60 animate-pulse" />
<div className="h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
<div className="h-3 w-1/3 rounded bg-surface0/60 animate-pulse" />
</CardContent>
</Card>
))}
</div>
</div>
) : !rec ? (
<Card>
<CardContent className="p-4">
<div className="h-[200px] flex items-center justify-center">
<div className="animate-pulse text-muted-foreground">
Loading...
</div>
</div>
<CardContent className="p-6 text-sm text-subtext1">
We could not load recommendations right now. Try
again in a moment.
</CardContent>
</Card>
) : (
rec.sorts
.filter((a) => SORTS_ALLOWED_IDS.includes(a.topicId))
.map((sort, idx) => (
<div key={idx}>
<h1 className="text-2xl pb-2">{sort.topic}</h1>
<section key={idx} className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl sm:text-2xl font-semibold text-text">
{sort.topic}
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{(sort.recommendationList || []).map(
(recommendation, idxb) => {
@@ -99,7 +112,7 @@ export default function Home() {
}
)}
</div>
</div>
</section>
))
)}
</div>