50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { resortData } from "@/src/data/resort";
|
|
import Link from "next/link";
|
|
|
|
export default function FloatingBookingBar() {
|
|
// Normally would have state for dates, but following PRD's "minimal bar"
|
|
const lang = "tr"; // Mocked locale
|
|
|
|
return (
|
|
<div className="fixed bottom-6 left-0 right-0 z-40 px-6 animate-fade-in-up">
|
|
<div className="max-w-4xl mx-auto glass-dark text-white rounded-full p-2 flex items-center shadow-2xl">
|
|
<div className="flex-1 flex items-center divide-x divide-white/10 px-4 overflow-x-auto no-scrollbar">
|
|
{/* Check In */}
|
|
<div className="px-4 py-2 flex flex-col min-w-[120px]">
|
|
<span className="text-[10px] uppercase tracking-widest text-white/50">
|
|
{resortData.floatingBar.checkIn[lang]}
|
|
</span>
|
|
<span className="text-sm font-semibold italic">Select Date</span>
|
|
</div>
|
|
|
|
{/* Check Out */}
|
|
<div className="px-4 py-2 flex flex-col min-w-[120px]">
|
|
<span className="text-[10px] uppercase tracking-widest text-white/50">
|
|
{resortData.floatingBar.checkOut[lang]}
|
|
</span>
|
|
<span className="text-sm font-semibold italic">Select Date</span>
|
|
</div>
|
|
|
|
{/* Guests */}
|
|
<div className="px-4 py-2 flex flex-col min-w-[100px]">
|
|
<span className="text-[10px] uppercase tracking-widest text-white/50">
|
|
{resortData.floatingBar.guests[lang]}
|
|
</span>
|
|
<span className="text-sm font-semibold">2 Adults</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Link
|
|
href={resortData.bookingUrl}
|
|
target="_blank"
|
|
className="bg-gold text-white px-8 py-3 rounded-full font-bold text-sm hover:bg-gold-dark transition-all whitespace-nowrap"
|
|
>
|
|
{resortData.floatingBar.search[lang]}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|