root
99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Award,
|
|
Baby,
|
|
Briefcase,
|
|
Cake,
|
|
Gem,
|
|
Gift,
|
|
GraduationCap,
|
|
Heart,
|
|
MoreHorizontal,
|
|
PartyPopper,
|
|
Plane,
|
|
Sparkles,
|
|
TreePine,
|
|
Users,
|
|
type LucideIcon,
|
|
} from 'lucide-react';
|
|
import {
|
|
BOOKING_EVENT_TYPES,
|
|
type BookingEventType,
|
|
type EventTypeId,
|
|
} from '@/domain/booking/event-types';
|
|
import { getEventTypeLabel } from '@/presentation/i18n/booking-events';
|
|
import type { Language } from '@/domain/language/entities';
|
|
|
|
const ICON_MAP: Record<BookingEventType['icon'], LucideIcon> = {
|
|
cake: Cake,
|
|
heart: Heart,
|
|
gem: Gem,
|
|
sparkles: Sparkles,
|
|
baby: Baby,
|
|
'graduation-cap': GraduationCap,
|
|
briefcase: Briefcase,
|
|
users: Users,
|
|
'party-popper': PartyPopper,
|
|
plane: Plane,
|
|
award: Award,
|
|
gift: Gift,
|
|
'tree-pine': TreePine,
|
|
'more-horizontal': MoreHorizontal,
|
|
};
|
|
|
|
interface EventTypePickerProps {
|
|
language: Language;
|
|
selected: EventTypeId | '';
|
|
onSelect: (id: EventTypeId) => void;
|
|
title: string;
|
|
subtitle: string;
|
|
}
|
|
|
|
export default function EventTypePicker({
|
|
language,
|
|
selected,
|
|
onSelect,
|
|
title,
|
|
subtitle,
|
|
}: EventTypePickerProps) {
|
|
return (
|
|
<div className="mb-8">
|
|
<h3 className="font-serif text-xl tracking-tight text-[#101724] sm:text-2xl">{title}</h3>
|
|
<p className="mt-1 mb-5 text-sm text-[#6B665F]">{subtitle}</p>
|
|
|
|
<div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 sm:gap-3 lg:grid-cols-5">
|
|
{BOOKING_EVENT_TYPES.map((event) => {
|
|
const Icon = ICON_MAP[event.icon];
|
|
const isActive = selected === event.id;
|
|
|
|
return (
|
|
<button
|
|
key={event.id}
|
|
type="button"
|
|
onClick={() => onSelect(event.id)}
|
|
className={`group relative min-h-[5.25rem] touch-manipulation overflow-hidden rounded-2xl border p-3 text-left transition-all active:scale-[0.98] sm:min-h-[5.5rem] sm:p-4 ${
|
|
isActive
|
|
? 'border-[#c99a2e] bg-gradient-to-br from-[#fff6dc] to-[#fffcf7] shadow-lg shadow-[#c99a2e]/15 ring-2 ring-[#c99a2e]/30'
|
|
: 'border-[#EDE6D9] bg-[#FFFCF7] hover:border-[#c99a2e]/50 hover:bg-white'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`mb-3 flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
|
|
isActive
|
|
? 'bg-gradient-to-br from-[#c99a2e] to-[#d4a73d] text-[#241806]'
|
|
: 'bg-[#F8F5F0] text-[#B38B4D] group-hover:bg-[#fff6dc]'
|
|
}`}
|
|
>
|
|
<Icon className="h-5 w-5" aria-hidden />
|
|
</div>
|
|
<span className="block text-xs sm:text-sm font-semibold leading-snug text-[#101724] line-clamp-2">
|
|
{getEventTypeLabel(language, event.id)}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |