wip API get

src/lib/components/community/Card.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
-	import { REACTION_EMOJIS } from "$lib/utils";
 	import Reaction from "$lib/components/community/reactions/Reaction.svelte";
 	import Add from "$lib/components/community/reactions/Add.svelte";
+	import type { CommunityCard } from "$lib/type";
+
+  export let card: CommunityCard;
 
-  $: reactions = REACTION_EMOJIS.sort(() => Math.random() - Math.random()).slice(0, 3);
 </script>
 
 <div
   class="cursor-pointer group bg-neutral-700 rounded-xl h-[310px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">
-    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('https://images.unsplash.com/photo-1682687220015-186f63b8850a?q=80&w=4075&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
+    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('{card.image}');"></div>
   </div>
   <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 opacity-0 group-hover:opacity-100">
-    <p class="text-white font-semibold text-base">A mini hamster in a wheat field</p>
-    <p class="text-white/75 font-regular text-sm">LoRA model name</p>
+    <p class="text-white font-semibold text-base">{card.prompt}</p>
+    <p class="text-white/75 font-regular text-sm">{card.model_name}</p>
   </div>
   <div class="flex items-center justify-start gap-2">
-    {#each reactions as emoji}
-      <Reaction emoji={emoji} count={Math.floor(Math.random() * 100)} />
+    {#each card.reactions as reaction}
+      <Reaction emoji={reaction.emoji} count={reaction?.users?.length} />
     {/each}
     <Add />
   </div>

src/lib/type.ts

@@ -3,4 +3,17 @@ export interface OptionRadio {
   value: string;
   icon?: string
   iconColor?: string
+}
+
+export interface CommunityCard {
+  reactions: ReactionType[],
+  id: string,
+  model_name: string,
+  prompt: string,
+  image: string,
+}
+
+export interface ReactionType {
+  emoji: string
+  users: string[]
 }

src/routes/+page.svelte

@@ -3,7 +3,8 @@
 	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 Icon from "@iconify/svelte";
+
+	export let data;
 
 	let form = {
 		filter: "likes"
@@ -41,11 +42,11 @@
 		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
 	</div>
 </div>
-<div class="mt-5">
-	<Input />
+<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">
-	{#each Array(40) as _, i}
-		<Card />
+	{#each data.cards as card}
+		<Card card={card} />
 	{/each}
 </div>

src/routes/+page.ts

@@ -0,0 +1,5 @@
+export async function load({ fetch }) {
+  const data = await fetch("/api/community")
+  const cards = await data.json()
+  return { cards }
+}

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

@@ -0,0 +1,30 @@
+import { error, json } from '@sveltejs/kit';
+// import { env } from '$env/dynamic/private'
+
+import type { CommunityCard } from '$lib/type';
+import { REACTION_EMOJIS } from "$lib/utils";
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET() {
+  const hasError = false
+
+  const cards: CommunityCard[] = Array.from({ length: 50 }, (_, i) => ({
+    reactions: REACTION_EMOJIS.sort(() => Math.random() - Math.random()).slice(0,
+      Math.floor(Math.random() * REACTION_EMOJIS.length)
+      ).map((emoji) => ({
+      emoji,
+      users: Array.from({ length: Math.floor(Math.random() * 10) }, (_, i) => i.toString()),
+    })),
+    id: i.toString(),
+    model_name: "CommunityCard",
+    prompt: "What is your favorite color?",
+    image: "https://picsum.photos/seed/" + i + "/500/500",
+  }))
+
+  if (hasError) {
+    return error(500, 'Internal Server Error')
+  }
+  
+  return json(cards)
+}