Skip to content

Commit 936a809

Browse files
ahmadbilaldevahmadbilaldev
committed
📦 NEW: Pages
1 parent 52c6b3b commit 936a809

File tree

2 files changed

+143
-0
lines changed

2 files changed

+143
-0
lines changed

‎books-app/pages/_app.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Head from "next/head";
2+
import "tailwindcss/tailwind.css";
3+
4+
function MyApp({ Component, pageProps }) {
5+
return (
6+
<>
7+
<Head>
8+
<title>RapidAPI - Books Search App</title>
9+
<link rel="icon" href="/favicon.ico" />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
12+
rel="stylesheet"
13+
/>
14+
</Head>
15+
<Component {...pageProps} />
16+
</>
17+
);
18+
}
19+
20+
export default MyApp;

‎books-app/pages/index.js

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import axios from "axios";
2+
import { useState } from "react";
3+
4+
export default function Home() {
5+
const [keyword, setKeyword] = useState("The alchemist");
6+
const [searchResults, setSearchResults] = useState(null);
7+
const [loading, setLoading] = useState(false);
8+
9+
const getResults = async () => {
10+
try {
11+
// Replace space with '+'
12+
let title = keyword.replace(/ /g, "+");
13+
setLoading(true);
14+
const { data } = await axios.get("api/search/", {
15+
params: { title },
16+
});
17+
// Add the data to the results state
18+
setSearchResults(data);
19+
setLoading(false);
20+
} catch (error) {
21+
setLoading(false);
22+
}
23+
};
24+
25+
return (
26+
<div className="flex flex-col md:px-12 px-4 bg-background font-poppins items-center min-h-screen">
27+
<h1 className="md:text-6xl text-4xl font-bold text-primary mt-10">
28+
<span className="text-active">Books</span> Search
29+
</h1>
30+
<h2 className="text-primary text-2xl font-light mt-6 font-ebas">
31+
Search for any book using the Books API
32+
</h2>
33+
<form
34+
className="sm:mx-auto mt-10 justify-center sm:w-full sm:flex"
35+
onSubmit={(e) => {
36+
getResults();
37+
e.preventDefault();
38+
e.stopPropagation();
39+
}}
40+
>
41+
<input
42+
type="text"
43+
className="flex w-full sm:w-1/3 rounded-lg px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
44+
placeholder="Enter the book's title"
45+
defaultValue={keyword}
46+
onChange={(e) => {
47+
setKeyword(e.target.value);
48+
setSearchResults(null);
49+
}}
50+
/>
51+
52+
<div className="mt-4 sm:mt-0 sm:ml-3">
53+
<button
54+
className="block w-full rounded-lg px-5 py-3 bg-active text-base text-primary font-bold hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
55+
type="submit"
56+
>
57+
{loading ? (
58+
<span className="animate-pulse">Loading..</span>
59+
) : (
60+
<>Search</>
61+
)}
62+
</button>
63+
</div>
64+
</form>
65+
66+
{searchResults && (
67+
<div className="mt-10">
68+
<div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-3">
69+
{searchResults.map((book) => {
70+
return (
71+
<div key={book.book_id} className="pt-6">
72+
<div className="flow-root bg-light rounded-lg px-4 pb-8">
73+
<div className="-mt-6">
74+
<div className="flex items-center justify-center">
75+
<img
76+
src={
77+
// Removes compression to get higher quality
78+
book.cover.replace(/._SX50_|._SY75_/gi, "")
79+
}
80+
className="p-2 w-64 rounded-lg"
81+
alt={book.name}
82+
/>
83+
</div>
84+
<div className="text-center justify-center items-center">
85+
<h3 className="mt-4 text-lg font-bold w-full break-words overflow-x-auto text-primary tracking-tight">
86+
{book.name}
87+
</h3>
88+
<p className="mt-2 text-base leading-relaxed text-secondary">
89+
{book.authors[0]} ({book.year})
90+
</p>
91+
<span className="font-bold text-secondary">
92+
Rating: {book.rating}
93+
</span>
94+
<a
95+
href={book.url}
96+
className="mt-4 block text-active underline"
97+
>
98+
Read More
99+
</a>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
);
105+
})}
106+
</div>
107+
</div>
108+
)}
109+
110+
<div className="mt-20 mb-10 text-center">
111+
<p className="text-primary text-xs">
112+
Made by RapidAPI DevRel Team -{" "}
113+
<a
114+
className="hover:text-active"
115+
href="https://github.com/RapidAPI/DevRel-Examples-External"
116+
>
117+
See more examples like this
118+
</a>
119+
</p>
120+
</div>
121+
</div>
122+
);
123+
}

0 commit comments

Comments
 (0)