function VacationDatePicker({ checkInDate, checkOutDate, onCheckInChange, onCheckOutChange }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 p-[8px] bg-[#ffffffcc] shadow-lg rounded-full font-lato", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "checkIn", className: "sr-only", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Check in"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "checkIn", name: "checkIn", value: checkInDate, onChange: onCheckInChange, placeholder: "Check in", className: "w-full h-10 pl-4 bg-transparent text-[#424242] outline-none", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[1px] h-8 bg-gray-300", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "checkOut", className: "sr-only", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Check out"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "checkOut", name: "checkOut", value: checkOutDate, onChange: onCheckOutChange, placeholder: "Check out", className: "w-full h-10 pl-4 bg-transparent text-[#424242] outline-none", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-[10px] rounded-[999px] bg-[#333333] flex items-center justify-center ml-2", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }))); } function VacationDatePickerStory() { const [checkInDate, setCheckInDate] = React.useState(''); const [checkOutDate, setCheckOutDate] = React.useState(''); const handleCheckInChange = (event)=>{ setCheckInDate(event.target.value); }; const handleCheckOutChange = (event)=>{ setCheckOutDate(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center p-6", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VacationDatePicker, { checkInDate: checkInDate, checkOutDate: checkOutDate, onCheckInChange: handleCheckInChange, onCheckOutChange: handleCheckOutChange, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function MainComponent() { const [checkInDate, setCheckInDate] = React.useState(""); const [checkOutDate, setCheckOutDate] = React.useState(""); const handleCheckInChange = (event)=>{ setCheckInDate(event.target.value); }; const handleCheckOutChange = (event)=>{ setCheckOutDate(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen overflow-hidden", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "absolute top-0 left-0 w-full h-full object-cover", autoPlay: true, loop: true, muted: true, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "https://videos.pexels.com/video-files/3015493/3015493-hd_1920_1080_24fps.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex flex-col items-center justify-center h-full text-center", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[120px] lg:text-8xl text-white font-bold mb-4 font-barrio", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "SF Grand Hotel"), /*#__PURE__*/ React.createElement("p", { className: "text-[23px] lg:text-[23px] text-white max-w-2xl font-lato mb-8 tracking-[10px]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "A new kind of vacation experience"), /*#__PURE__*/ React.createElement(VacationDatePicker, { checkInDate: checkInDate, checkOutDate: checkOutDate, onCheckInChange: handleCheckInChange, onCheckOutChange: handleCheckOutChange, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }))); }