This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.
- Part 1: Let’s start by installing Next.js
- Part 2: Build the list of houses
- Part 3: Build the house detail view
- Part 4: CSS and navigation bar
- Part 5: Start with the date picker
The first thing I want to do here is to add a sidebar to the single house page, that’s where we’ll add our date picker.
Here’s Airbnb:
and here’s our page now:
I want to add a little sidebar in our page, to host the calendar.
The first thing we’ll do is the markup.
Right now this is our pages/houses/[id].js content:
pages/houses/[id].js
export default function House(props) {
return (
<Layout
content={
<div>
<Head>
<title>{props.house.title}</title>
</Head>
<img src={props.house.picture} width="100%" alt="House picture" />
<p>
{props.house.type} - {props.house.town}
</p>
<p>{props.house.title}</p>
</div>
}
/>
)
}I want to wrap all this content in a article tag, and add an aside tag, at the end of the <div> container (I’m also going to assign a container class to it):
pages/houses/[id].js
export default function House(props) {
return (
<Layout
content={
<div className="container">
<Head>
<title>{props.house.title}</title>
</Head>
<article>
<img src={props.house.picture} width="100%" alt="House picture" />
<p>
{props.house.type} - {props.house.town}
</p>
<p>{props.house.title}</p>
</article>
<aside></aside>
</div>
}
/>
)
}The aside tag is generally used to add a piece of content that is related to the main content. In our case, it’s perfect.
Let’s add some CSS to make the main part of the page and the aside align like in the Airbnb page:
<style jsx>{`
.container {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 30px;
}
aside {
border: 1px solid #ccc;
padding: 20px;
}
`}</style>Here’s the full code of pages/houses/[id].js right now:
pages/houses/[id].js
import Head from 'next/head'
import houses from '../../houses.js'
import Layout from '../../components/Layout'
export default function House(props) {
return (
<Layout
content={
<div className="container">
<Head>
<title>{props.house.title}</title>
</Head>
<article>
<img src={props.house.picture} width="100%" alt="House picture" />
<p>
{props.house.type} - {props.house.town}
</p>
<p>{props.house.title}</p>
</article>
<aside></aside>
<style jsx>{`
.container {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 30px;
}
aside {
border: 1px solid #ccc;
padding: 20px;
}
`}</style>
</div>
}
/>
)
}
export async function getServerSideProps({ query }) {
const { id } = query
return {
props: {
house: houses.filter((house) => house.id === parseInt(id))[0]
}
}
}Here’s our result:
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-12-06T05:00:00+00:00) Airbnb clone, add the sidebar. Retrieved from https://www.scien.cx/2021/12/06/airbnb-clone-add-the-sidebar/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.