Spaces:
Running
Running
File size: 2,848 Bytes
e71d24a a382c22 e71d24a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<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> |