split in component

src/lib/components/community/Card.svelte

@@ -0,0 +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";
+
+  $: 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>
+  <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>
+  </div>
+  <div class="flex items-center justify-start gap-2">
+    {#each reactions as emoji}
+      <Reaction emoji={emoji} count={Math.floor(Math.random() * 100)} />
+    {/each}
+    <Add />
+  </div>
+</div>

src/lib/components/community/reactions/Add.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+	import Icon from "@iconify/svelte";
+  import { REACTION_EMOJIS } from "$lib/utils";
+
+  let isOpen: boolean = false;
+  $: uuid = Math.random().toString(36).substring(7);
+
+  const handleClick = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    const addReaction = document.getElementById(uuid);
+    if (!addReaction) return;
+
+    if (!addReaction.contains(target)) {
+      isOpen = false;
+    }
+  }
+  if (browser) {
+    window.addEventListener("click", handleClick);
+  }
+</script>
+
+<div
+  id="{uuid}"  
+  class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-1.5 py-1 border border-dashed border-white/80 hover:border-white relative z-[2]"
+  class:!border-white={isOpen}
+  class:!text-white={isOpen}
+>
+  <button on:click={() => isOpen = !isOpen}>
+    <Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
+  </button>
+  <div
+    class="opacity-0 pointer-events-none absolute left-0 top-0 max-w-max flex items-center justify-center bg-white px-4 py-1 rounded-full gap-0 text-2xl -translate-y-[calc(100%+8px)] -translate-x-1/2"
+    class:opacity-100={isOpen}
+    class:pointer-events-auto={isOpen}
+  >
+    {#each REACTION_EMOJIS as emoji}
+      <div class="w-9 h-9 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center">{emoji}</div>
+    {/each}
+  </div>
+</div>

src/lib/components/community/reactions/Reaction.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let emoji: string;
+  export let count: number;
+</script>
+
+<div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
+  <span>{emoji}</span>
+  {count}
+</div>

src/lib/components/fields/Input.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let placeholder: string = "Search";
+</script>
+
+<div class="bg-neutral-900 border border-neutral-800 rounded-lg px-4 py-3 text-neutral-200 text-base">
+  <input type="text" {placeholder} class="bg-transparent outline-none border-none placeholder:text-neutral-500 w-full">
+</div>

src/lib/components/sidebar/Sidebar.svelte

@@ -28,8 +28,8 @@
   }]
 </script>
 
-<button class="bg-transparent absolute top-10 right-8 cursor-pointer" on:click="{handleClick}">
-  <Icon icon="mdi:hamburger-minus" class="w-7 h-7 text-white" />
+<button class="bg-transparent absolute top-10 right-8 cursor-pointer lg:hidden" on:click="{handleClick}">
+  <Icon icon="{isOpen ? "mdi:hamburger-remove" : "mdi:hamburger-minus"}" class="w-7 h-7 text-white" />
 </button>
 <aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px] absolute -translate-x-full lg:translate-x-0 transition-all duration-200 lg:relative z-20" class:translate-x-0={isOpen}>
   <header class="text-white px-8 pb-8 pt-10 text-xl tracking-wider font-semibold">

src/lib/utils/index.ts

@@ -0,0 +1 @@
+export const REACTION_EMOJIS = ["❤️", "🤩", "🎉", "🔥"]

src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	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 Icon from "@iconify/svelte";
 
@@ -39,35 +41,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>
 <div class="mx-auto grid grid-cols-5 gap-5 mt-8 lg:mt-10">
 	{#each Array(40) as _, i}
-		<div
-			class="cursor-pointer group overflow-hidden bg-neutral-700 rounded-xl h-[310px] relative flex items-start justify-between flex-col p-5 bg-cover bg-center transition-all duration-200 brightness-75 hover:brightness-100"
-			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 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>
-			</div>
-			<div class="flex items-center justify-start gap-2">
-				<div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
-					<span>❤️</span>
-					12
-				</div>
-				<div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
-					<span>🤩</span>
-					56
-				</div>
-				<div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
-					<span>⭐</span>
-					32
-				</div>
-				<div class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-1.5 py-1 border border-dashed border-white/80 hover:border-white">
-					<Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
-				</div>
-			</div>
-		</div>
+		<Card />
 	{/each}
 </div>