mirror of
https://github.com/Xevion/banner.git
synced 2026-02-01 04:23:40 -06:00
30 lines
742 B
Svelte
30 lines
742 B
Svelte
<script lang="ts">
|
|
let {
|
|
segments,
|
|
onRemoveSegment,
|
|
}: {
|
|
segments: string[];
|
|
onRemoveSegment: (segment: string) => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
{#if segments.length > 0}
|
|
<span
|
|
class="inline-flex items-center rounded-full border border-border bg-muted/40 text-xs text-foreground"
|
|
>
|
|
{#each segments as segment, i}
|
|
{#if i > 0}
|
|
<span class="w-px self-stretch bg-border"></span>
|
|
{/if}
|
|
<button
|
|
type="button"
|
|
class="px-2 py-0.5 hover:bg-muted/60 transition-colors cursor-pointer first:rounded-l-full last:rounded-r-full"
|
|
onclick={() => onRemoveSegment(segment)}
|
|
aria-label="Remove {segment} filter"
|
|
>
|
|
{segment}
|
|
</button>
|
|
{/each}
|
|
</span>
|
|
{/if}
|