Skip to content

Commit 9f36210

Browse files
Abdul-SayedAbdul-Sayed
committed
update footer links
1 parent 07027c8 commit 9f36210

File tree

8 files changed

+257
-36
lines changed

8 files changed

+257
-36
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ yarn-error.log*
3333
.env*
3434
.env
3535

36-
next.config.js
36+
.next.config.js
3737

3838
# vercel
3939
.vercel

‎README.md

+102-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,104 @@
11
# Aire Bnb
22

3-
Airbnb listings search page, using NextJS, Tailwind CSS, Date Picker, Mapbox, Rapid Api
3+
## Airbnb listings search page, using NextJS, Tailwind CSS, Date Picker, Mapbox, Rapid Api
4+
5+
`Live link: aire-bnb.vercel.app`
6+
`API: https://airbnb13.p.rapidapi.com/`
7+
8+
### Pages and Routes
9+
10+
```
11+
Index
12+
│
13+
│───Header.js
14+
│ └───DateRangePicker
15+
│
16+
└───Feed.js
17+
│ │
18+
│ │───SideBar.js
19+
│ └───Videos.js
20+
│ └───ChannelCard.js <==> links to ChannelDetail component
21+
│ └───VideoCard.js <==> links to VideoDetail component
22+
│
23+
└───SearchFeed.js
24+
│ └───Videos.js
25+
│ └───ChannelCard.js <==> links to ChannelDetail component
26+
│ └───VideoCard.js <==> links to VideoDetail component
27+
│
28+
└───VideoDetail.js
29+
│ └───Videos.js
30+
│ └───ChannelCard.js <==> links to ChannelDetail component
31+
│ └───VideoCard.js <==> links to VideoDetail component
32+
│
33+
└───ChannelDetail.js
34+
│ └───ChannelCard.js <==> links to ChannelDetail component
35+
│ └───Videos.js
36+
│ └───ChannelCard.js <==> links to ChannelDetail component
37+
│ └───VideoCard.js <==> links to VideoDetail component
38+
│
39+
└───Footer.js
40+
41+
Search
42+
│
43+
│───Navbar.js
44+
│ └───SearchBar.js <==> navigates to SearchFeed component
45+
│
46+
└───Feed.js
47+
│ │
48+
│ │───SideBar.js
49+
│ └───Videos.js
50+
│ └───ChannelCard.js <==> links to ChannelDetail component
51+
│ └───VideoCard.js <==> links to VideoDetail component
52+
│
53+
└───SearchFeed.js
54+
│ └───Videos.js
55+
│ └───ChannelCard.js <==> links to ChannelDetail component
56+
│ └───VideoCard.js <==> links to VideoDetail component
57+
│
58+
└───VideoDetail.js
59+
│ └───Videos.js
60+
│ └───ChannelCard.js <==> links to ChannelDetail component
61+
│ └───VideoCard.js <==> links to VideoDetail component
62+
│
63+
└───ChannelDetail.js
64+
│ └───ChannelCard.js <==> links to ChannelDetail component
65+
│ └───Videos.js
66+
│ └───ChannelCard.js <==> links to ChannelDetail component
67+
│ └───VideoCard.js <==> links to VideoDetail component
68+
│
69+
└───Footer.js
70+
```
71+
72+
#### Index Page
73+
74+
> The root of the application is the index page and it renders the header component.
75+
76+
### Feed
77+
78+
Route="/"
79+
80+
> Renders the Videos component, as well as the SideBar component on the left. Clicking a keyword in the sidebar will fetch the relevant videos and update the video feed.
81+
>
82+
> SideBar component: Renders a list of popular keywords. Clicking a keyword will update the Feed component.
83+
>
84+
> Videos component: Renders the video feed list. Checks the data for each item if its a channel or a video, and will render a ChannelCard or a VideoCard respectively.
85+
>
86+
> > ChannelCard / VideoCard components render the details of that item and clicking it routes to the ChannelDetail / VideoDetail pages, passing the id of the channel / video in the route.
87+
88+
### SearchFeed
89+
90+
Route="/search/:_searchTerm_"
91+
92+
> The SearchFeed component will recieve the search term from route params, and fetch videos related to the search term. It will then render the Videos component, passing in a video feed list.
93+
94+
### VideoDetail
95+
96+
Route="/video/:_id_"
97+
98+
> The VideoDetail component obtains the video id from route params and fetches the video's data as well as related videos. It plays the video and renders the Videos component, passing in a video feed list of related videos.
99+
100+
### ChannelDetail
101+
102+
Route="/channel/:_id_"
103+
104+
> The ChannelDetail component obtains the channel Id from the route params and fetches details of the channel as well as the channel's videos. It renders the ChannelCard component, passing it the channel details, as well as the Videos component, passing it the list of videos.

‎components/Footer.js

+144-20
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,159 @@ const Footer = () => {
55
<footer className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 content-between gap-y-10 px-8 md:px-16 lg:px-32 py-14 bg-gray-100 text-gray-600">
66
<div className="text-center space-y-4 text-sm text-gray-800">
77
<h5 className="font-bold">ABOUT</h5>
8-
<p>How Airbnb Works</p>
9-
<p>Newsroom</p>
10-
<p>Investors</p>
11-
<p>Airbnb Plus</p>
12-
<p>Airbnb Luxe</p>
8+
<p>
9+
<a target="_blank" href="https://www.airbnb.com/2022-winter" rel="noopener noreferrer">
10+
How Airbnb Works
11+
</a>
12+
</p>
13+
<p>
14+
<a target="_blank" href="https://news.airbnb.com/" rel="noopener noreferrer">
15+
Newsroom
16+
</a>
17+
</p>
18+
<p>
19+
<a
20+
target="_blank"
21+
href="https://investors.airbnb.com/home/default.aspx"
22+
rel="noopener noreferrer"
23+
>
24+
Investors
25+
</a>
26+
</p>
27+
<p>
28+
<a target="_blank" href="https://www.airbnb.com/plus" rel="noopener noreferrer">
29+
Airbnb Plus
30+
</a>
31+
</p>
32+
<p>
33+
<a target="_blank" href="https://www.airbnb.com/luxury" rel="noopener noreferrer">
34+
Airbnb Luxe
35+
</a>
36+
</p>
1337
</div>
1438
<div className="text-center space-y-4 text-sm text-gray-800">
1539
<h5 className="font-bold">SUPPORT</h5>
16-
<p>Help Centre</p>
17-
<p>AirCover</p>
18-
<p>Safety Information</p>
19-
<p>Report a strange noise</p>
20-
<p>Supporting people with disabilities</p>
40+
<p>
41+
<a
42+
target="_blank"
43+
href="https://www.airbnb.com/help/?audience=guest"
44+
rel="noopener noreferrer"
45+
>
46+
Help Centre
47+
</a>
48+
</p>
49+
<p>
50+
<a target="_blank" href="https://www.airbnb.com/aircover" rel="noopener noreferrer">
51+
AirCover
52+
</a>
53+
</p>
54+
<p>
55+
<a
56+
target="_blank"
57+
href="https://www.airbnb.com/help/article/3290"
58+
rel="noopener noreferrer"
59+
>
60+
Safety Information
61+
</a>
62+
</p>
63+
<p>
64+
<a
65+
target="_blank"
66+
href="https://portal.311.nyc.gov/article/?kanumber=KA-01017"
67+
rel="noopener noreferrer"
68+
>
69+
Report a strange noise
70+
</a>
71+
</p>
72+
<p>
73+
<a target="_blank" href="https://www.airbnb.com/accessibility" rel="noopener noreferrer">
74+
Supporting people with disabilities
75+
</a>
76+
</p>
2177
</div>
2278
<div className="text-center space-y-4 text-sm text-gray-800">
2379
<h5 className="font-bold">COMMUNITY</h5>
24-
<p>Accessibility</p>
25-
<p>Airbnb.org: disaster relief hoising</p>
26-
<p>Support Afghan Refugees</p>
27-
<p>Live Aid Concert</p>
28-
<p>Free Nelson Mandela</p>
80+
<p>
81+
<a target="_blank" href="https://www.airbnb.com/accessibility" rel="noopener noreferrer">
82+
Accessibility
83+
</a>
84+
</p>
85+
<p>
86+
<a target="_blank" href="https://www.airbnb.org/?locale=en" rel="noopener noreferrer">
87+
Airbnb.org: disaster relief hoising
88+
</a>
89+
</p>
90+
<p>
91+
<a
92+
target="_blank"
93+
href="https://www.airbnb.com/resources/hosting-homes/a/sharing-community-airbnborgs-afghan-refugee-program-476"
94+
rel="noopener noreferrer"
95+
>
96+
Support Afghan Refugees
97+
</a>
98+
</p>
99+
<p>
100+
<a
101+
target="_blank"
102+
href="https://www.history.com/this-day-in-history/live-aid-concert"
103+
rel="noopener noreferrer"
104+
>
105+
Live Aid Concert
106+
</a>
107+
</p>
108+
<p>
109+
<a
110+
target="_blank"
111+
href="https://www.airbnb.com/against-discrimination"
112+
rel="noopener noreferrer"
113+
>
114+
Free Nelson Mandela
115+
</a>
116+
</p>
29117
</div>
30118
<div className="text-center space-y-4 text-sm text-gray-800">
31119
<h5 className="font-bold">Hosting</h5>
32-
<p>Try hosting</p>
33-
<p>Explore hosting resources</p>
34-
<p>Spy camera policy</p>
35-
<p>Aircover for hosts</p>
36-
<p>Broken Furniture</p>
120+
<p>
121+
<a
122+
target="_blank"
123+
href="https://www.airbnb.com/host/homes?from_footer=1"
124+
rel="noopener noreferrer"
125+
>
126+
Try hosting
127+
</a>
128+
</p>
129+
<p>
130+
<a
131+
target="_blank"
132+
href="https://www.airbnb.com/resources/hosting-homes"
133+
rel="noopener noreferrer"
134+
>
135+
Explore hosting resources
136+
</a>
137+
</p>
138+
<p>
139+
<a
140+
target="_blank"
141+
href="https://www.airbnb.com/aircover-for-hosts"
142+
rel="noopener noreferrer"
143+
>
144+
Aircover for hosts
145+
</a>
146+
</p>
147+
<p>
148+
<a
149+
target="_blank"
150+
href="https://news.airbnb.com/what-makes-airbnb-airbnb/"
151+
rel="noopener noreferrer"
152+
>
153+
Spy camera policy
154+
</a>
155+
</p>
156+
<p>
157+
<a target="_blank" href="https://www.airbnb.com/d/covidsafety" rel="noopener noreferrer">
158+
Broken Furniture
159+
</a>
160+
</p>
37161
</div>
38162
</footer>
39163
);

‎components/LargeCard.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Image from "next/image";
33

44
const LargeCard = ({ img, title, description, buttonText }) => {
55
return (
6-
<figure className="relative py-16 cursor-pointer">
6+
<figure className="relative py-16">
77
<div className="relative h-96 min-w-[300px]">
88
<Image
99
src={img}
@@ -17,9 +17,11 @@ const LargeCard = ({ img, title, description, buttonText }) => {
1717
<figcaption className="absolute top-32 left-12">
1818
<h3 className="text-4xl mb-3 w-64">{title}</h3>
1919
<p>{description}</p>
20-
<button className="text-sm text-white bg-gray-900 px-4 py-2 rounded-lg mt-5">
21-
{buttonText}
22-
</button>
20+
<a target="_blank" href="https://www.airbnb.com/" rel="noopener noreferrer">
21+
<button className="text-sm text-white bg-gray-900 px-4 py-2 rounded-lg mt-5 cursor-pointer">
22+
{buttonText}
23+
</button>
24+
</a>
2325
</figcaption>
2426
</figure>
2527
);

‎components/Maps.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ const Maps = ({ searchResults }) => {
5353
closeOnClick={false}
5454
onClose={() => setSelectedLocation({})}
5555
anchor="bottom"
56-
className="rounded-2xl"
56+
style={{ width: "fit-content", height: "fit-content" }}
5757
>
58-
<div className="relative flex flex-col">
58+
<div className="relative flex flex-col w-fit h-fit">
5959
<Image
6060
src={result.img}
6161
alt={result.description}

‎next.config.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ const nextConfig = {
66
domains: ["links.papareact.com", "a0.muscache.com", "upload.wikimedia.org"],
77
},
88
env: {
9-
mapboxStyleURL: "mapbox://styles/highway-man/clabjtu2p000g14mp3dbqxxzu",
10-
mapboxAccessToken:
11-
"pk.eyJ1IjoiaGlnaHdheS1tYW4iLCJhIjoiY2xhYmptZHcwMDExajNucnF6MjRleml1aSJ9.cAii63SvpA1X_J8d6SCQZQ",
9+
mapboxStyleURL: process.env.MAPBOX_STYLE_URL,
10+
mapboxAccessToken: process.env.MAPBOX_ACCESS_TOKEN,
1211
},
1312
};
1413

‎pages/api/hello.js

-5
This file was deleted.

‎public/favicon.ico

-16.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)