blob: 6fc4c90ddf4da19cc54e7a19afdf57d49b88e0a6 (
plain) (
tree)
|
|
<script lang="ts">
import Expander from '$lib/components/Expander.svelte';
import { getFilterContext } from '$lib/Filter';
const filter = getFilterContext();
export let type: 'grid' | 'row' = 'row';
let exclude = false;
$: if ($filter.exclude.size > 0) {
exclude = true;
}
</script>
<form on:submit|preventDefault class="gap-0">
{#if type === 'grid'}
<div class="flex flex-col gap-4 px-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
<slot name="include" />
</div>
<div class="my-2 flex justify-start">
<Expander title="Exclude" bind:expanded={exclude} />
</div>
{#if exclude}
<div
class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
>
<slot name="exclude" />
</div>
{/if}
{:else}
<div
class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5"
>
<div class="p-2">
<slot name="include" />
</div>
<div class="bg-rose-950/50 p-2">
<slot name="exclude" />
</div>
</div>
{/if}
<div class=" mt-4 flex items-center">
<hr class="flex-1 border-slate-700/70" />
<button type="submit" class="btn-blue mx-2">Apply</button>
<hr class="flex-1 border-slate-700/70" />
</div>
</form>
|