104 lines
2.9 KiB
Svelte
104 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { Separator } from '$lib/components/ui/separator';
|
|
import type { LunchProtectionResult } from '$lib/lunchProtection';
|
|
|
|
interface Props {
|
|
selectedDate: string;
|
|
selectedTime: string;
|
|
endTime: string;
|
|
duration: number;
|
|
protection: LunchProtectionResult | undefined;
|
|
outOfHours?: boolean;
|
|
}
|
|
|
|
let {
|
|
selectedDate,
|
|
selectedTime,
|
|
endTime,
|
|
duration,
|
|
protection,
|
|
outOfHours = false
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<Separator class="my-4" />
|
|
{#if protection?.showWarning || protection?.isBlocked}
|
|
<div
|
|
class="rounded-lg border {protection?.isBlocked
|
|
? 'border-red-200 bg-red-50'
|
|
: 'border-amber-200 bg-amber-50'} p-4"
|
|
>
|
|
<div class="flex items-start gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="mt-0.5 h-4 w-4 shrink-0 {protection?.isBlocked ? 'text-red-600' : 'text-amber-600'}"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<div
|
|
class="text-sm font-medium {protection?.isBlocked ? 'text-red-800' : 'text-amber-800'}"
|
|
>
|
|
{protection?.isBlocked ? 'Lunch break conflict' : 'Lunch break warning'}
|
|
</div>
|
|
<div class="mt-1 text-sm {protection?.isBlocked ? 'text-red-700' : 'text-amber-700'}">
|
|
{protection?.warningMessage}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{#if outOfHours}
|
|
<div
|
|
class="rounded-lg border border-red-200 bg-red-50 p-4 {protection?.showWarning ||
|
|
protection?.isBlocked
|
|
? 'mt-3'
|
|
: ''}"
|
|
>
|
|
<div class="flex items-start gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="mt-0.5 h-4 w-4 shrink-0 text-red-600"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<div class="text-sm font-medium text-red-800">Out-of-hours booking</div>
|
|
<div class="mt-1 text-sm text-red-700">
|
|
This time slot is outside regular business hours (06:00-22:00).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<div
|
|
class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 {protection?.showWarning ||
|
|
protection?.isBlocked ||
|
|
outOfHours
|
|
? 'mt-3'
|
|
: ''}"
|
|
>
|
|
<div class="text-sm font-medium text-emerald-800">
|
|
{#if protection?.isBlocked}Booking conflict{:else if protection?.showWarning}Lunch warning{:else}Time
|
|
selected{/if}
|
|
</div>
|
|
<div class="mt-1 text-sm text-emerald-700">
|
|
{selectedDate} at {selectedTime}
|
|
{' — '}
|
|
{endTime}
|
|
{' ('}{duration} min)
|
|
</div>
|
|
</div>
|