fix build

src/lib/components/Button.svelte

@@ -50,6 +50,9 @@ import { goto } from '$app/navigation';
     &.pink {
       @apply bg-pink-500 text-white border-pink-500;
     }
+    &.blue {
+      @apply bg-blue-500 text-white border-blue-500;
+    }
     &.dark {
       @apply bg-neutral-900 border-neutral-800 text-neutral-300;
     }

src/lib/utils/index.ts

@@ -13,4 +13,19 @@ export const COMMUNITY_FILTER_OPTIONS = [
     icon: "lucide:zap",
     iconColor: "text-yellow-500"
   },
+];
+
+export const MODELS_FILTER_OPTIONS = [
+  {
+    label: "Most Liked",
+    value: "likes",
+    icon: "lucide:heart",
+    iconColor: "text-red-500"
+  },
+  {
+    label: "Hotest",
+    value: "hot",
+    icon: "ph:fire-bold",
+    iconColor: "text-orange-500"
+  },
 ];

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
-import "$lib/styles/tailwind.css"
+	import "$lib/styles/tailwind.css"
 </script>
 
 <div class="flex items-start">

src/routes/+page.svelte

@@ -20,9 +20,9 @@
 
 	const fetchMore = async () => {
 		form = {...form, page: (Number(form.page) + 1).toString()};
-		const response = await fetch(`/api/community?${new URLSearchParams(form)}`);
-		const new_cards = await response.json();
-		data = {...data, cards: [...data.cards, ...new_cards]};
+		const request = await fetch(`/api/community?${new URLSearchParams(form)}`);
+		const response = await request.json();
+		data = {...data, cards: [...data.cards, ...response.cards ]};
 	}
 </script>
 
@@ -36,21 +36,26 @@
 </h1>
 <div class="flex items-center justify-between mt-5">
 	<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
-	<div class="flex items-center justify-end gap-5">
+	<div class="items-center justify-end gap-5 hidden lg:flex">
 		<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
 		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
 	</div>
+	<div class="items-center justify-end gap-3 flex lg:hidden">
+		<Button icon="ic:round-plus" theme="dark" size="md">Upload own Image</Button>
+		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="md">Generate</Button>
+	</div>
 </div>
 <div class="mt-5 max-w-sm">
 	<Input placeholder="Filter by prompt, model..." />
 </div>
-<div class="mx-auto grid grid-cols-5 gap-5 mt-8 lg:mt-10">
+<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
 	{#each data.cards as card}
 		<Card card={card} />
 	{/each}
 	<InfiniteScroll
 		elementScroll="{elementScroll ?? undefined}"
 		threshold={100}
+		hasMore={data.total_items > data.cards.length}
 		on:loadMore={fetchMore}
 	/>
 	<GoTop />

src/routes/+page.ts

@@ -1,10 +1,10 @@
 export async function load({ fetch }) {
-  const data = await fetch("/api/community?page=1", {
+  const response = await fetch("/api/community?page=1", {
     method: "GET",
     headers: {
       "Content-Type": "application/json"
     }
   })
-  const cards = await data.json()
-  return { cards }
+  const data = await response.json()
+  return data
 }

src/routes/api/community/+server.ts

@@ -15,5 +15,8 @@ export async function GET(request : RequestEvent) {
 
   const cards = jsonData.slice(page * 25, page * 25 + 25)
 
-  return json(cards)
+  return json({
+    cards,
+    total_items: jsonData.length,
+  })
 }

src/routes/models/+page.svelte

@@ -1,8 +1,62 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import InfiniteScroll from "svelte-infinite-scroll";
+
+	import Button from "$lib/components/Button.svelte";
+	import Card from "$lib/components/community/Card.svelte";
+	import Input from "$lib/components/fields/Input.svelte";
+	import Radio from "$lib/components/fields/Radio.svelte";
+	import { MODELS_FILTER_OPTIONS } from "$lib/utils/index.js";
+	import GoTop from "$lib/components/GoTop.svelte";
+
+	export let data;
+
+	let form = {
+		filter: "hot",
+		page: "0",
+	}
+
+	$: elementScroll = browser ? document?.getElementById('app') : undefined;
+
+	const fetchMore = async () => {
+		form = {...form, page: (Number(form.page) + 1).toString()};
+		const request = await fetch(`/api/community?${new URLSearchParams(form)}`);
+		const response = await request.json();
+		data = {...data, cards: [...data.cards, ...response.cards ]};
+	}
+</script>
+
 <svelte:head>
-	<title>Explore models</title>
+	<title>Explore Models</title>
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
 <h1 class="text-white font-semibold text-2xl">
-  Explore models
-</h1>
+  Explore Models
+</h1>
+<div class="flex items-center justify-between mt-5">
+	<Radio options={MODELS_FILTER_OPTIONS} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
+	<div class="items-center justify-end gap-5 hidden lg:flex">
+		<Button icon="ic:round-plus" theme="dark" size="lg">Create</Button>
+		<Button icon="octicon:upload-16" theme="blue" size="lg">Upload model</Button>
+	</div>
+	<div class="items-center justify-end gap-3 flex lg:hidden">
+		<Button icon="ic:round-plus" theme="dark" size="md">Create</Button>
+		<Button icon="octicon:upload-16" theme="blue" size="md">Upload model</Button>
+	</div>
+</div>
+<div class="mt-5 max-w-sm">
+	<Input placeholder="Search a model" />
+</div>
+<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
+	{#each data.cards as card}
+		<Card card={card} />
+	{/each}
+	<InfiniteScroll
+		elementScroll="{elementScroll ?? undefined}"
+		threshold={100}
+		hasMore={data.total_items > data.cards.length}
+		on:loadMore={fetchMore}
+	/>
+	<GoTop />
+</div>

src/routes/models/+page.ts

@@ -0,0 +1,10 @@
+export async function load({ fetch }) {
+  const response = await fetch("/api/community?page=1", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+  const data = await response.json()
+  return data
+}