58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useMemo } from "react";
|
|
import Navbar from "@/components/Navbar";
|
|
import HeroSection from "@/components/HeroSection";
|
|
import ModGrid from "@/components/ModGrid";
|
|
import Footer from "@/components/Footer";
|
|
import { getUserProjects, searchMods, getRandomKeyword } from "@/lib/api";
|
|
|
|
const Index = () => {
|
|
const randomKeyword = useMemo(() => getRandomKeyword(), []);
|
|
|
|
const { data: userMods, isLoading: loadingUser } = useQuery({
|
|
queryKey: ["user-projects"],
|
|
queryFn: () => getUserProjects(),
|
|
});
|
|
|
|
const { data: discoverData, isLoading: loadingDiscover } = useQuery({
|
|
queryKey: ["discover", randomKeyword],
|
|
queryFn: () => searchMods(randomKeyword, 0, 12),
|
|
});
|
|
|
|
const discoverMods = discoverData?.hits?.map((hit: any) => ({
|
|
id: hit.project_id,
|
|
slug: hit.slug,
|
|
title: hit.title,
|
|
description: hit.description,
|
|
icon_url: hit.icon_url,
|
|
downloads: hit.downloads,
|
|
followers: hit.follows,
|
|
categories: hit.categories || [],
|
|
project_type: hit.project_type,
|
|
})) || [];
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<Navbar />
|
|
<main className="flex-1">
|
|
<HeroSection />
|
|
<div className="container mx-auto px-4">
|
|
<ModGrid
|
|
title="إضافاتنا"
|
|
mods={userMods || []}
|
|
isLoading={loadingUser}
|
|
/>
|
|
<ModGrid
|
|
title="اكتشف إضافات جديدة 🔥"
|
|
mods={discoverMods}
|
|
isLoading={loadingDiscover}
|
|
/>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Index;
|