majin update 2.0

app/src/App.tsx

-import { useState } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import React from "react";
+import { ContactFooter } from "./components/ContactFooter"
+import { Footer } from "./components/Footer"
+import { Menu } from "./components/Menu"
 
-function App() {
-  const [count, setCount] = useState(0)
+import { Registration } from "./components/Registration";
+import { Navbar } from './components/Navbar';
 
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-        <p>
-          <button type="button" onClick={() => setCount((count) => count + 1)}>
-            count is: {count}
-          </button>
-        </p>
-        <p>
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
-      </header>
-    </div>
-  )
-}
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 
-export default App
+import { useState } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+
+const Page = () => {
+    return (
+        <div>
+            Page
+        </div>
+    );
+};
+
+export const App = () => {return (
+      <Router>
+          <Menu />
+          <ContactFooter />
+          <Footer />
+      </Router>
+  );
+};

app/src/data/accomodations.ts

+export const accommodations = [
+    {
+        name: 'Å Auge - River Eye - Treehouse',
+        description:
+            'Experience being in the trees, falling asleep under the stars and waking up to the sound of birdsong in this spectacular treehouse. If you are looking for an intimate, simple and restful retreat, look no further.',
+        location: 'Tinn, Telemark, Nórsko',
+        mainPhoto: 'https://images.unsplash.com/photo-1550355191-aa8a80b41353?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8´',
+        // dateAdded: new Date('2021-03-12').toISOString()
+    },
+    {
+        name: 'Aska Modern Cabin',
+        description:
+            'Aska is a part of Hlíð Ferðaþjónusta is a complex of accomodations on the northern shore of lake Mývatn, right beneath the airport. We are situated about one kilometer away from the lakeside, in the middle of a 300 years old lava field and with a fantastic view over the lake.',
+        location: 'Reykjahlíð, Island',
+        mainPhoto: 'https://images.unsplash.com/photo-1579033462043-0f11a7862f7d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8',
+        // dateAdded: new Date('2021-01-12').toISOString()
+    },
+    {
+        name: 'Glass cottage with Hot tub "Blár"',
+        description:
+            'We are located on a lava desert in the south of Iceland. 5 minutes from the small town of Hella, close to all the popular attractions that southern Iceland has to offer, but also in a secret and secluded location.',
+        location: 'Hella, Island',
+        mainPhoto: 'https://images.unsplash.com/photo-1590725140246-20acdee442be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8',
+        // dateAdded: new Date('2021-01-05').toISOString()
+    },
+    {
+        name: 'The Mud House',
+        description:
+            'Beautiful mud brick, earth roof open plan small house. Set in an abundant organic paradise of birds and orchards surrounded by regenerating bush within walking distance to the water in peaceful Pigeon Bay. ',
+        location: 'Pigeon Bay, Canterbury, Nový Zéland',
+        mainPhoto: 'https://images.unsplash.com/photo-1619292585355-ab0e3fd509fe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1',
+        // dateAdded: new Date('2020-01-05').toISOString()
+    },
+    {
+        name: 'Casa Tata 4',
+        description:
+            'These gorgeous 9 cabins right in front of the sea are the perfect spot if you want to enjoy Chacahua’s captivating nature and still have a clean, quiet, luxurious and tasteful accommodation.',
+        location: 'Laguna de Chacahua, Oaxaca, Mexiko',
+        mainPhoto: 'https://images.unsplash.com/photo-1590725121839-892b458a74fe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8',
+        // dateAdded: new Date('2020-02-05').toISOString()
+    },
+]

app/src/data/restaurace.ts

+export const photos = [
+    {
+        photoUrl: 'https://images.pexels.com/photos/3184192/pexels-photo-3184192.jpeg?auto=compress&cs=tinysrgb&w=1600',
+    },
+    {
+        photoUrl: 'https://images.pexels.com/photos/3186654/pexels-photo-3186654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+    }
+]
+
+export const weeklyMenu = [
+    {
+
+    },
+]
\ No newline at end of file

app/src/favicon.svg

-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>

app/src/index.css

+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
+
+* {
+  box-sizing: border-box;
+  color: black;
+}
+
+html {
+  font-size: 16px;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: "Montserrat", sans-serif;
+}
+
+input,
+textarea,
+button,
+select {
+  font-family: inherit;
+}
+
+.frosted-glass {
+  -webkit-backdrop-filter: blur(8px); /* Safari 9+ */
+  backdrop-filter: blur(8px); /* Chrome and Opera */
+  box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
+  background-color: rgba(228, 228, 228, 0.062);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.text-field,
+.button {
+  border-radius: 0.4rem;
+  line-height: 1rem;
+  padding: 0.5rem;
+  border: none;
+}
+
+.text-field {
+  margin: 0.7rem 0;
+  background-color: rgb(239, 239, 239);
+}
+
+.text-field--error {
+  border: solid 0.1rem rgb(144, 69, 69);
+}
+
+.button {
+  width: fit-content;
+  padding: 0.8rem 2rem;
+  margin: auto;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.button--gray {
+  background-color: rgb(97, 97, 97);
+  color: rgb(255, 255, 255);
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.button--yellow {
+  background-color: rgb(255, 232, 179);
+  color: rgb(0, 0, 0);
 }

app/src/logo.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>

app/src/main.tsx

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import Pages from './components/Pages';
+import { App } from './App'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <Pages />
+        <App />
     </React.StrictMode>,
 );
\ No newline at end of file

app/src/stories/AboutUs.stories.tsx

+import React from 'react';
+import { AboutUs } from './AboutUs';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+export default {
+    title: 'AirBnB/About us',
+    component: AboutUs,
+} as ComponentMeta<typeof AboutUs>;
+
+
+const Template: ComponentStory<typeof AboutUs> = () => <AboutUs />;
+
+export const Page = Template.bind({});
\ No newline at end of file

app/src/stories/AboutUs.tsx

+import React from 'react';
+import { AccommodationItem, AccommodationItemProps } from './AccommodationItem';
+import { accommodations } from '../data/accommodations';
+import { photos } from '../data/restaurace'
+
+export const AboutUs = () => {
+    return (
+        <div className="ui main container text app">
+            <h1>O nás</h1>
+            <p>Vaříme poctivou českou kuchyni a denně pro vás připravujeme polévku a výběr ze čtyř jídel + moučník. Jedno z jídel je vždy bezlepkové. Dále máme ve stálé nabídce šest druhů salátů a dvě XXL menu.
+
+                Zajišťujeme rauty, občerstvení na seminářích, na podnikových večírcích a dalších akcích.
+
+                Naši jídelnu můžete osobně navštívit v době od 11:00 do 14:00 hodin.
+            </p>
+        </div>
+    );
+};
\ No newline at end of file

app/src/stories/AccommodationCard.stories.tsx

+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { AccommodationCard } from './AccommodationCard';
+
+export default {
+    title: 'AirBnB/AccommodationCard',
+    component: AccommodationCard,
+} as ComponentMeta<typeof AccommodationCard>;
+
+const Template: ComponentStory<typeof AccommodationCard> = (args) => <AccommodationCard {...args} />;
+
+export const CasaTata = Template.bind({});
+CasaTata.args = {
+    dateAdded: (new Date()),
+    name: "Casa Tata 4",
+    description: "These gorgeous 9 cabins right in front of the sea are the perfect spot if you want to enjoy Chacahua’s captivating nature and still have a clean, quiet, luxurious and tasteful accommodation.",
+    location: "Laguna de Chacahua, Oaxaca, Mexiko",
+    mainPhoto: "https://images.unsplash.com/photo-1590725121839-892b458a74fe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8",
+};

app/src/stories/AccommodationCard.tsx

+import React, { useEffect } from 'react';
+import { formatDistance } from 'date-fns';
+
+export type AccommodationCardProps = {
+    mainPhoto: string,
+    location: string,
+    dateAdded: Date,
+    name: string,
+    description: string,
+}
+
+export const AccommodationCard = ({ mainPhoto, location, dateAdded, name, description }: AccommodationCardProps) => {
+    const dateAgo = formatDistance(new Date(dateAdded), new Date(), { addSuffix: true });
+
+    return (
+        <div className="ui fluid card" style={{maxWidth: "500px"}}>
+            <div className="image">
+                <img src={mainPhoto + '&fit=crop&w=500&h=500'} alt="Accommodation"/>
+            </div>
+            <div className="content">
+                <div className="header">{name}</div>
+                <div className="meta">
+                    <span className="right floated time">{dateAgo}</span>
+                    <span className="category">{location}</span>
+                </div>
+                <div className="description">
+                    {description}
+                </div>
+            </div>
+        </div>
+    );
+};

app/src/stories/AccommodationItem.stories.tsx

+import React from 'react';
+import { AccommodationItem } from './AccommodationItem';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+    title: 'AirBnB/AccommodationItem',
+    component: AccommodationItem,
+} as ComponentMeta<typeof AccommodationItem>;
+
+const Template: ComponentStory<typeof AccommodationItem> = (args) => <AccommodationItem {...args} />;
+
+export const CasaTata = Template.bind({});
+CasaTata.args = {
+    name: "Casa Tata 4",
+    description: "These gorgeous 9 cabins right in front of the sea are the perfect spot if you want to enjoy Chacahua’s captivating nature and still have a clean, quiet, luxurious and tasteful accommodation.",
+    location: "Laguna de Chacahua, Oaxaca, Mexiko",
+    mainPhoto: "https://images.unsplash.com/photo-1590725121839-892b458a74fe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8",
+};

app/src/stories/AccommodationItem.tsx

+import React from 'react'
+
+export type AccommodationItemProps = {
+    name: string,
+    description: string,
+    location: string,
+    mainPhoto: string,
+}
+
+export const AccommodationItem = ({ name, description, location, mainPhoto }: AccommodationItemProps) => {
+    return (
+        <div className="item">
+            <div className="image">
+                <img src={mainPhoto + '&fit=crop&w=200&h=200'} />
+            </div>
+            <div className="content">
+                <div className="header">{name}</div>
+                <div className="description">
+                    <span>{description}</span>
+                </div>
+                <div className="extra">
+                    {location}
+                </div>
+            </div>
+        </div>
+    )
+}

app/src/stories/AccommodationPage.stories.tsx

+import React from 'react';
+import { Button } from 'react-native'
+import { AccommodationPage } from './AccommodationPage';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+export default {
+    title: 'AirBnB/Accommodation Page',
+    component: AccommodationPage,
+} as ComponentMeta<typeof AccommodationPage>;
+
+const Template: ComponentStory<typeof AccommodationPage> = (args) => <AccommodationPage {...args} />;
+
+const cardProps = {
+    dateAdded: (new Date()),
+    name: "Casa Tata 4",
+    description: "These gorgeous 9 cabins right in front of the sea are the perfect spot if you want to enjoy Chacahua’s captivating nature and still have a clean, quiet, luxurious and tasteful accommodation.",
+    location: "Laguna de Chacahua, Oaxaca, Mexiko",
+    mainPhoto: "https://images.unsplash.com/photo-1590725121839-892b458a74fe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8",
+};
+
+const reservationProps = {
+    isDisabled: false,
+}
+
+export const Accommodation = Template.bind({});
+Accommodation.args = {
+    cardProps,
+    reservationProps,
+}

app/src/stories/AccommodationPage.tsx

+import React, { useEffect } from 'react';
+import { AccommodationCard, AccommodationCardProps } from './AccommodationCard';
+import { Reservation, ReservationProps } from './Reservation';
+
+export interface AccommodationPageProps {
+    cardProps: AccommodationCardProps,
+    reservationProps: ReservationProps,
+}
+
+export const AccommodationPage = ({ cardProps, reservationProps }: AccommodationPageProps) => {
+
+    useEffect(() => {
+        document.title = cardProps.name;
+        console.log(document.title)
+    });
+
+    return (
+        <div className="ui main container text app">
+            <div className="accomodation-page ui two column grid">
+                <div className="column nine wide">
+                    <AccommodationCard {...cardProps} />
+                </div>
+                <div className="column seven wide">
+                    <Reservation {...reservationProps} />
+                </div>
+            </div>
+        </div>
+    );
+};

app/src/stories/HomePage.stories.tsx

+import React from 'react';
+import { HomePage } from './HomePage';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+export default {
+    title: 'AirBnB/Home Page',
+    component: HomePage,
+} as ComponentMeta<typeof HomePage>;
+
+
+const Template: ComponentStory<typeof HomePage> = () => <HomePage />;
+
+export const Page = Template.bind({});

app/src/stories/HomePage.tsx

+import React from 'react';
+import { AccommodationItem, AccommodationItemProps } from './AccommodationItem';
+import { photos } from '../data/restaurace'
+
+export const HomePage = () => {
+    return (
+        <div className="ui main container text app">
+            <div className="main image">
+                <img src={photos[0].photoUrl + '&fit&w=358'} alt="Restaurace Korona"/>
+            </div>
+            <h1 className="ui header">Restaurace Korona</h1>
+            <p> Vážení hosté, připravili jsme pro Vás nabídku jídel do zázemí Vašich domovů. Nabízíme možnost si objednat u nás jídla s rozvozem či k vyzvednutí ke konzumaci v pohodlí vašich domovů či kanceláří.</p>
+            <button className="ui submit button objednat obed" type="button">
+                Objednat oběd
+            </button>
+            <h2>Týdenní menu</h2>
+            <p>Každý týden máme pro Vás připravený výběr hlavních jídel.</p>
+            <button className="ui submit button tydenni menu" type="button">
+                Více
+            </button>
+            <div className="image">
+                <img src={photos[1].photoUrl + '&fit&w=358'} alt="Jídlo"/>
+            </div>
+        </div>
+    );
+};

app/src/stories/Reservation.stories.tsx

+import React from 'react';
+import { Reservation } from './Reservation';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+export default {
+    title: 'AirBnB/Reservation',
+    component: Reservation,
+} as ComponentMeta<typeof Reservation>;
+
+const Template: ComponentStory<typeof Reservation> = (args) => <Reservation {...args} />;
+
+export const Enabled = Template.bind({});
+Enabled.args = {
+    isDisabled: false,
+}
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    isDisabled: true,
+}

app/src/stories/Reservation.tsx

+import React, { useState } from 'react';
+import { DateRange, Range } from 'react-date-range';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+
+export interface ReservationProps {
+    isDisabled: boolean;
+}
+
+export const Reservation = ({ isDisabled }: ReservationProps) => {
+    const [ selection, setSelection ] = useState<Range>({
+        startDate: new Date(),
+        endDate: new Date(),
+        key: 'selection'
+    });
+
+    return (
+        <form className={'ui form left floated'} onSubmit={(e) => {e.preventDefault()}}>
+            <div className="field">
+                <DateRange
+                    ranges={[ selection ]}
+                    onChange={({ selection }) => setSelection(selection)}
+                />
+            </div>
+            <button className="ui submit button red fluid" type="submit" disabled={isDisabled}>
+                <i className="paper plane icon"/>
+                Make reservation
+            </button>
+        </form>
+    );
+};