Skip to content

Commit 82d3e09

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #836 from Khushalsarode/ebooks
Adding an page for ebooks section tab
2 parents 0837923 + 817e211 commit 82d3e09

File tree

3 files changed

+345
-1
lines changed

3 files changed

+345
-1
lines changed

‎docusaurus.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ const config: Config = {
183183
items: [
184184
{
185185
label: "📚 E-books",
186-
to: "https://learn.recodehive.com/datascience",
186+
to: "/ebooks",
187187
},
188188
{
189189
label: "🗺️ Roadmap",

‎src/pages/ebooks/index.css‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
/* ------------------------------
2+
Root Container
3+
------------------------------ */
4+
5+
.ebook-container {
6+
padding: 4rem 1.5rem;
7+
max-width: 1280px;
8+
margin: 0 auto;
9+
font-family: var(--ifm-font-family-base);
10+
11+
}
12+
13+
14+
15+
/* ------------------------------
16+
Hero Section
17+
------------------------------ */
18+
.ebook-hero {
19+
text-align: center;
20+
margin-bottom: 3rem;
21+
animation: fadeIn 0.6s ease-in;
22+
}
23+
24+
.ebook-title {
25+
font-size: 3rem;
26+
font-weight: 700;
27+
color: var(--ifm-heading-color);
28+
}
29+
30+
.ebook-subtitle {
31+
color: var(--ifm-color-gray-700);
32+
margin-top: 0.75rem;
33+
font-size: 1.2rem;
34+
max-width: 700px;
35+
margin-left: auto;
36+
margin-right: auto;
37+
}
38+
39+
.ebook-search {
40+
margin-top: 1.5rem;
41+
padding: 0.9rem 1.3rem;
42+
width: 60%;
43+
max-width: 480px;
44+
border-radius: 12px;
45+
border: 1px solid var(--ifm-toc-border-color);
46+
font-size: 1rem;
47+
background-color: var(--ifm-background-color);
48+
box-shadow: var(--ifm-global-shadow-lw);
49+
transition: all 0.25s ease;
50+
}
51+
52+
.ebook-search:focus {
53+
border-color: var(--ifm-color-primary);
54+
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
55+
outline: none;
56+
}
57+
58+
/* ------------------------------
59+
Grid Section
60+
------------------------------ */
61+
.ebook-grid {
62+
display: grid;
63+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
64+
gap: 2rem;
65+
justify-items: center;
66+
animation: fadeInUp 0.6s ease-in;
67+
}
68+
69+
/* ------------------------------
70+
Ebook Card
71+
------------------------------ */
72+
.ebook-card {
73+
width: 100%;
74+
max-width: 280px;
75+
background: var(--ifm-card-background-color);
76+
border-radius: 16px;
77+
box-shadow: var(--ifm-global-shadow-lw);
78+
overflow: hidden;
79+
cursor: pointer;
80+
display: flex;
81+
flex-direction: column;
82+
transition: transform 0.3s ease, box-shadow 0.3s ease;
83+
}
84+
85+
.ebook-card:hover {
86+
transform: translateY(-8px);
87+
box-shadow: var(--ifm-global-shadow-md);
88+
}
89+
90+
/* ------------------------------
91+
Image Section
92+
------------------------------ */
93+
.ebook-image-wrapper {
94+
height: 220px;
95+
overflow: hidden;
96+
position: relative;
97+
border-bottom: 1px solid var(--ifm-toc-border-color);
98+
}
99+
100+
.ebook-image {
101+
width: 100%;
102+
height: 100%;
103+
object-fit: cover;
104+
transition: transform 0.35s ease;
105+
}
106+
107+
.ebook-card:hover .ebook-image {
108+
transform: scale(1.05);
109+
}
110+
111+
/* ------------------------------
112+
Content Section
113+
------------------------------ */
114+
.ebook-content {
115+
flex: 1;
116+
display: flex;
117+
flex-direction: column;
118+
justify-content: flex-start;
119+
padding: 1.5rem 1.25rem;
120+
}
121+
122+
.ebook-card-title {
123+
font-weight: 600;
124+
font-size: 1.3rem;
125+
color: var(--ifm-heading-color);
126+
margin-bottom: 0.6rem;
127+
}
128+
129+
.ebook-card-desc {
130+
color: var(--ifm-color-gray-700);
131+
font-size: 1rem;
132+
line-height: 1.55;
133+
margin-bottom: 0.8rem;
134+
}
135+
136+
/* ------------------------------
137+
Category Tag
138+
------------------------------ */
139+
.ebook-category {
140+
display: inline-block;
141+
margin-top: 1rem;
142+
font-size: 0.85rem;
143+
font-weight: 500;
144+
color: var(--ifm-color-primary);
145+
background-color: rgba(0, 122, 255, 0.08);
146+
padding: 0.4rem 0.8rem;
147+
border-radius: 6px;
148+
text-transform: uppercase;
149+
letter-spacing: 0.5px;
150+
align-self: flex-start;
151+
}
152+
153+
/* ------------------------------
154+
Button
155+
------------------------------ */
156+
.ebook-read-btn {
157+
color: #fff;
158+
background-color: var(--ifm-color-primary);
159+
border: none;
160+
border-radius: 10px;
161+
padding: 0.7rem 1.3rem;
162+
font-size: 0.95rem;
163+
font-weight: 500;
164+
cursor: pointer;
165+
transition: background-color 0.25s ease, transform 0.2s ease;
166+
align-self: flex-start;
167+
}
168+
169+
.ebook-read-btn:hover {
170+
transform: translateY(-2px);
171+
background-color: #0056d2;
172+
}
173+
174+
/* ------------------------------
175+
No Results
176+
------------------------------ */
177+
.no-results {
178+
text-align: center;
179+
padding: 50px 0;
180+
font-size: 1.2rem;
181+
grid-column: 1 / -1;
182+
}
183+
184+
@keyframes fadeIn {
185+
from {
186+
opacity: 0;
187+
transform: translateY(10px);
188+
}
189+
190+
to {
191+
opacity: 1;
192+
transform: translateY(0);
193+
}
194+
}
195+
196+
@keyframes fadeInUp {
197+
from {
198+
opacity: 0;
199+
transform: translateY(20px);
200+
}
201+
202+
to {
203+
opacity: 1;
204+
transform: translateY(0);
205+
}
206+
}
207+
208+
@media (max-width: 768px) {
209+
.ebook-search {
210+
width: 90%;
211+
}
212+
213+
.ebook-title {
214+
font-size: 2.4rem;
215+
}
216+
217+
.ebook-card {
218+
max-width: 95%;
219+
}
220+
}
221+
222+
@media (min-width: 1024px) {
223+
.ebook-grid {
224+
grid-template-columns: repeat(4, 1fr);
225+
}
226+
}
227+
228+
@media (min-width: 768px) and (max-width: 1023px) {
229+
.ebook-grid {
230+
grid-template-columns: repeat(3, 1fr);
231+
}
232+
}
233+
234+
@media (max-width: 767px) {
235+
.ebook-grid {
236+
grid-template-columns: repeat(1, 1fr);
237+
}
238+
}

‎src/pages/ebooks/index.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React, { useState } from 'react';
2+
import Layout from '@theme/Layout';
3+
import { useHistory } from '@docusaurus/router';
4+
import './index.css';
5+
6+
interface Ebook {
7+
id: string;
8+
title: string;
9+
description: string;
10+
contentLink: string;
11+
category: string;
12+
}
13+
14+
// Redirection URL Ebook Data
15+
const ebooks: Ebook[] = [
16+
{
17+
id: '1',
18+
title: 'Mastering Data Science with Python',
19+
description: 'Learn Data Science with examples and real-world projects.',
20+
contentLink: 'https://learn.recodehive.com/datascience',
21+
category: 'Programming',
22+
},
23+
24+
// add here more ebooks or resources as needed for redirection
25+
// sample
26+
/*
27+
{
28+
id: '2',
29+
title: 'Understanding React Hooks',
30+
description: 'A deep dive into React Hooks for better state management.',
31+
contentLink: 'https://learn.recodehive.com/react-hooks',
32+
category: 'Web Development',
33+
},
34+
*/
35+
];
36+
37+
// --------------------------
38+
// Ebook Card Component
39+
// --------------------------
40+
const EbookCard: React.FC<{ ebook: Ebook }> = ({ ebook }) => {
41+
const history = useHistory();
42+
43+
const handleClick = () => {
44+
if (ebook.contentLink.startsWith('http')) {
45+
window.open(ebook.contentLink, '_blank');
46+
} else {
47+
history.push(ebook.contentLink);
48+
}
49+
};
50+
51+
return (
52+
<div className="ebook-card" onClick={handleClick}>
53+
54+
<div className="ebook-content">
55+
<h3 className="ebook-card-title">{ebook.title}</h3>
56+
<p className="ebook-card-desc">{ebook.description}</p>
57+
<div className="ebook-category">{ebook.category}</div>
58+
<button className="ebook-read-btn">📖 Read Now</button>
59+
</div>
60+
</div>
61+
);
62+
};
63+
64+
// --------------------------
65+
// Main Ebook Page
66+
// --------------------------
67+
export default function EbookPage(): JSX.Element {
68+
const [searchTerm, setSearchTerm] = useState('');
69+
70+
const filteredEbooks = ebooks.filter((ebook) =>
71+
ebook.title.toLowerCase().includes(searchTerm.toLowerCase())
72+
);
73+
74+
return (
75+
<Layout title="Ebooks" description="Explore ebooks and learning resources">
76+
<div className="ebook-container">
77+
{/* Hero Section */}
78+
<div className="ebook-hero">
79+
<h1 className="ebook-title">📚 Explore Ebooks</h1>
80+
<p className="ebook-subtitle">
81+
Read high-quality ebooks on programming, tools, and development.
82+
</p>
83+
<input
84+
type="text"
85+
className="ebook-search"
86+
placeholder="Search ebooks..."
87+
value={searchTerm}
88+
onChange={(e) => setSearchTerm(e.target.value)}
89+
/>
90+
</div>
91+
92+
{/* Grid Section */}
93+
<div className="ebook-grid">
94+
{filteredEbooks.length === 0 && (
95+
<div className="no-results">
96+
<p>No ebooks found. Try a different search.</p>
97+
</div>
98+
)}
99+
{filteredEbooks.map((ebook) => (
100+
<EbookCard key={ebook.id} ebook={ebook} />
101+
))}
102+
</div>
103+
</div>
104+
</Layout>
105+
);
106+
}

0 commit comments

Comments
 (0)