update
This commit is contained in:
51
app/page.tsx
51
app/page.tsx
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user