src/routes/+page.svelte

<script lang="ts">
	import Button from "$lib/components/Button.svelte";
	import Radio from "$lib/components/fields/Radio.svelte";
	import Icon from "@iconify/svelte";

	let form = {
		filter: "likes"
	}

	const filter_options = [
		{
			label: "Most Liked",
			value: "likes",
			icon: "lucide:heart",
			iconColor: "text-red-500"
		},
		{
			label: "New",
			value: "new",
			icon: "lucide:zap",
			iconColor: "text-yellow-500"
		},
	];

</script>

<svelte:head>
	<title>Community Gallery</title>
	<meta name="description" content="Svelte demo app" />
</svelte:head>

<h1 class="text-white font-semibold text-2xl">
  Community Gallery
</h1>
<div class="flex items-center justify-between mt-5">
	<Radio options={filter_options} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
	<div class="flex items-center justify-end gap-5">
		<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>
<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>
	{/each}
</div>