63 lines
2.0 KiB
Svelte
63 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import TripTile from './TripTile.svelte';
|
|
import TripTable from './TripTable.svelte';
|
|
import type { Trip } from '$lib/server/trips.js';
|
|
|
|
interface Props {
|
|
trips: Trip[];
|
|
title: string;
|
|
emptyMessage: string;
|
|
}
|
|
let { trips, title, emptyMessage }: Props = $props();
|
|
|
|
let view = $state<'tile' | 'table'>('tile');
|
|
</script>
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">{title}</h1>
|
|
|
|
{#if trips.length > 0}
|
|
<div class="flex items-center gap-1 rounded-md border border-gray-200 bg-gray-50 p-1">
|
|
<button
|
|
onclick={() => view = 'tile'}
|
|
title="Tile view"
|
|
class="rounded p-1.5 transition-colors"
|
|
style={view === 'tile' ? 'background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.08);' : ''}
|
|
>
|
|
<!-- Grid icon -->
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={view === 'tile' ? '#111827' : '#9ca3af'} stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7" rx="1" />
|
|
<rect x="14" y="3" width="7" height="7" rx="1" />
|
|
<rect x="3" y="14" width="7" height="7" rx="1" />
|
|
<rect x="14" y="14" width="7" height="7" rx="1" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onclick={() => view = 'table'}
|
|
title="Table view"
|
|
class="rounded p-1.5 transition-colors"
|
|
style={view === 'table' ? 'background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.08);' : ''}
|
|
>
|
|
<!-- List icon -->
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={view === 'table' ? '#111827' : '#9ca3af'} stroke-width="2">
|
|
<line x1="3" y1="6" x2="21" y2="6" />
|
|
<line x1="3" y1="12" x2="21" y2="12" />
|
|
<line x1="3" y1="18" x2="21" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if trips.length === 0}
|
|
<p class="text-gray-500">{emptyMessage}</p>
|
|
{:else if view === 'tile'}
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{#each trips as trip}
|
|
<TripTile {trip} />
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<TripTable {trips} />
|
|
{/if}
|