mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
110 lines
No EOL
3.4 KiB
Svelte
110 lines
No EOL
3.4 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from "$app/forms";
|
|
import { MinusCircle, PlusCircle } from "lucide-svelte";
|
|
import { Button } from '$components/ui/button';
|
|
import type { CollectionItems, Wishlists } from "$db/schema";
|
|
|
|
export let game_id: string;
|
|
export let collection: CollectionItems;
|
|
export let wishlist: Wishlists;
|
|
export let in_wishlist = false;
|
|
export let in_collection = false;
|
|
export let lists = [];
|
|
|
|
// const handleChange = ({ curr, next }) => {
|
|
// console.log({ curr, next });
|
|
// return next;
|
|
// }
|
|
|
|
// const {
|
|
// elements: { trigger, menu, option, label, group, groupLabel },
|
|
// states: { valueLabel, open },
|
|
// helpers: { isSelected },
|
|
// } = createSelect({
|
|
// forceVisible: true,
|
|
// onValueChange: handleChange
|
|
// });
|
|
|
|
// console.log({ in_collection, in_wishlist });
|
|
|
|
// let options: Record<string, string> = {};
|
|
// let list_of_lists = [];
|
|
// if (!in_collection) {
|
|
// options[collection.id] = 'Add to collection';
|
|
// }
|
|
// if (!in_wishlist) {
|
|
// options[wishlist.id] = 'Add to wishlist';
|
|
// }
|
|
// lists.forEach((list) => {
|
|
// if (!list?.in_list) {
|
|
// options[list.id] = list.name;
|
|
// }
|
|
// });
|
|
</script>
|
|
|
|
<div class="flex gap-1">
|
|
{#if in_wishlist}
|
|
<form method="POST" action={`/wishlist?/remove`} use:enhance>
|
|
<input type="hidden" name="id" value={game_id} />
|
|
<Button class="flex gap-1" variant="destructive" type="submit">
|
|
<MinusCircle class="square-5" /> Remove from wishlist
|
|
</Button>
|
|
</form>
|
|
{:else}
|
|
<form method="POST" action='/wishlist?/add' use:enhance>
|
|
<input type="hidden" name="id" value={game_id} />
|
|
<Button class="flex gap-1" type="submit">
|
|
<PlusCircle class="square-5" /> Add to wishlist
|
|
</Button>
|
|
</form>
|
|
{/if}
|
|
|
|
{#if in_collection}
|
|
<form method="POST" action='/collection?/remove' use:enhance>
|
|
<input type="hidden" name="id" value={game_id} />
|
|
<Button class="flex gap-1" type="submit" variant="destructive">
|
|
<MinusCircle class="square-5" /> Remove from collection
|
|
</Button>
|
|
</form>
|
|
{:else}
|
|
<form method="POST" action='/collection?/add' use:enhance>
|
|
<input type="hidden" name="id" value={game_id} />
|
|
<Button class="flex gap-1" type="submit">
|
|
<PlusCircle class="square-5" /> Add to collection
|
|
</Button>
|
|
</form>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- <div class="flex flex-col gap-1"> -->
|
|
<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
|
|
<!-- <button
|
|
class="flex h-10 min-w-[220px] items-center justify-between rounded-md bg-white px-3 py-2 text-black-500 transition-opacity hover:opacity-90"
|
|
use:melt={$trigger}
|
|
aria-label="Wishlist"
|
|
>
|
|
{$valueLabel || 'Add to...'}
|
|
<ChevronDown class="square-5" />
|
|
</button>
|
|
{#if $open}
|
|
<div
|
|
class="z-10 flex max-h-[360px] flex-col overflow-y-auto rounded-md bg-white p-1 focus:!ring-0"
|
|
use:melt={$menu}
|
|
transition:fly={{ duration: 150, y: -5 }}
|
|
>
|
|
{#each Object.entries(options) as [key, value]}
|
|
<div
|
|
class="flex relative cursor-pointer rounded-md py-1 pl-8 pr-4 text-neutral-800 focus:z-10 focus:text-purple-700 data-[highlighted]:bg-purple-50 data-[selected]:bg-purple-100 data-[highlighted]:text-purple-900 data-[selected]:text-purple-900"
|
|
use:melt={$option({ value: key, label: value })}
|
|
>
|
|
{value}
|
|
{#if $isSelected(key)}
|
|
<div class="check">
|
|
<Check class="square-4" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div> --> |