diff --git a/app/src/App.tsx b/app/src/App.tsx
index 3d9bd71e51303e40cf75c4ddaa62f8481cd3a90b..22b6f2435a541eb7a3b8e5c00fdc518878bb49ef 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,45 +1,29 @@
-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>
+ );
+};
diff --git a/app/src/data/accomodations.ts b/app/src/data/accomodations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..935a2b99290db5fd8d01c821176f062428ecba06
--- /dev/null
+++ b/app/src/data/accomodations.ts
@@ -0,0 +1,42 @@
+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()
+ },
+]
diff --git a/app/src/data/restaurace.ts b/app/src/data/restaurace.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ed3372f805c8d8a3f221f19a3564db1ff9d3d9c
--- /dev/null
+++ b/app/src/data/restaurace.ts
@@ -0,0 +1,14 @@
+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
diff --git a/app/src/favicon.svg b/app/src/favicon.svg
deleted file mode 100644
index de4aeddc12bdfe6c668dd57c6b457a659c058914..0000000000000000000000000000000000000000
--- a/app/src/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<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>
diff --git a/app/src/index.css b/app/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..77e0c919cfad93b877361c8c6d5c8bd0ea08215b 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -1,13 +1,71 @@
+@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);
}
diff --git a/app/src/logo.svg b/app/src/logo.svg
deleted file mode 100644
index 6b60c1042f58d9fabb75485aa3624dddcf633b5c..0000000000000000000000000000000000000000
--- a/app/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<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>
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 81da29e07a227b03fa87044f07fa521287139a3e..79fdad5a3c77c80c1723c6e90768626938b49476 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,10 +1,10 @@
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
diff --git a/app/src/stories/AboutUs.stories.tsx b/app/src/stories/AboutUs.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e02d125f423679105e6166101f1af1ab151a62f9
--- /dev/null
+++ b/app/src/stories/AboutUs.stories.tsx
@@ -0,0 +1,13 @@
+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
diff --git a/app/src/stories/AboutUs.tsx b/app/src/stories/AboutUs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1bfefba54bd9a165d038c6d3f2c59b3c6788d269
--- /dev/null
+++ b/app/src/stories/AboutUs.tsx
@@ -0,0 +1,18 @@
+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
diff --git a/app/src/stories/AccommodationCard.stories.tsx b/app/src/stories/AccommodationCard.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..34ab16dacf48f7fbe32bebff7e1da639a004d9bc
--- /dev/null
+++ b/app/src/stories/AccommodationCard.stories.tsx
@@ -0,0 +1,20 @@
+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",
+};
diff --git a/app/src/stories/AccommodationCard.tsx b/app/src/stories/AccommodationCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cd2e88a01795cfd366998e7ad974bf58ec90df2e
--- /dev/null
+++ b/app/src/stories/AccommodationCard.tsx
@@ -0,0 +1,32 @@
+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>
+ );
+};
diff --git a/app/src/stories/AccommodationItem.stories.tsx b/app/src/stories/AccommodationItem.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..75abe94d868d502c5180b9bde1c55086029a3029
--- /dev/null
+++ b/app/src/stories/AccommodationItem.stories.tsx
@@ -0,0 +1,18 @@
+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",
+};
diff --git a/app/src/stories/AccommodationItem.tsx b/app/src/stories/AccommodationItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe3afbf70060479c86469044a62ef30b2862a740
--- /dev/null
+++ b/app/src/stories/AccommodationItem.tsx
@@ -0,0 +1,27 @@
+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>
+ )
+}
diff --git a/app/src/stories/AccommodationPage.stories.tsx b/app/src/stories/AccommodationPage.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbf39778b9dad478c8cd6da4220e52b2677b85e1
--- /dev/null
+++ b/app/src/stories/AccommodationPage.stories.tsx
@@ -0,0 +1,29 @@
+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,
+}
diff --git a/app/src/stories/AccommodationPage.tsx b/app/src/stories/AccommodationPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3349f55167dc5de894f14961a74e6289fe81457d
--- /dev/null
+++ b/app/src/stories/AccommodationPage.tsx
@@ -0,0 +1,29 @@
+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>
+ );
+};
diff --git a/app/src/stories/HomePage.stories.tsx b/app/src/stories/HomePage.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2215436d5e121c27a52736b79d0fe0287dff552e
--- /dev/null
+++ b/app/src/stories/HomePage.stories.tsx
@@ -0,0 +1,13 @@
+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({});
diff --git a/app/src/stories/HomePage.tsx b/app/src/stories/HomePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a46b3a7400cf82841b06592897a90cb776c0febb
--- /dev/null
+++ b/app/src/stories/HomePage.tsx
@@ -0,0 +1,26 @@
+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>
+ );
+};
diff --git a/app/src/stories/Reservation.stories.tsx b/app/src/stories/Reservation.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac6a3ecd8092ee2889868513ca7fb278fae9c107
--- /dev/null
+++ b/app/src/stories/Reservation.stories.tsx
@@ -0,0 +1,20 @@
+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,
+}
diff --git a/app/src/stories/Reservation.tsx b/app/src/stories/Reservation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..580ad79a9ca955818eed7547ecdb88ffb3191beb
--- /dev/null
+++ b/app/src/stories/Reservation.tsx
@@ -0,0 +1,31 @@
+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>
+ );
+};