45 lines
1.3 KiB
Svelte
45 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
date: string;
|
|
label: string;
|
|
onPrev: () => void;
|
|
onNext: () => void;
|
|
isToday: boolean;
|
|
onDateClick?: () => void;
|
|
}
|
|
|
|
let { date, label, onPrev, onNext, isToday, onDateClick }: Props = $props();
|
|
</script>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button
|
|
onclick={onPrev}
|
|
class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors"
|
|
aria-label="Previous day"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
onclick={onDateClick}
|
|
class="text-center {onDateClick ? 'hover:opacity-70 transition-opacity' : 'cursor-default'}"
|
|
>
|
|
<span class="font-semibold text-lg">{label}</span>
|
|
{#if !isToday}
|
|
<p class="text-xs text-zinc-500">{date}</p>
|
|
{/if}
|
|
</button>
|
|
|
|
<button
|
|
onclick={onNext}
|
|
disabled={isToday}
|
|
class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 disabled:opacity-30 transition-colors"
|
|
aria-label="Next day"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|