Skip to content

Commit 81ebbc8

Browse files
ONEONUORAONEONUORA
authored
feat: add reader-dashboard (#54)
1 parent c7e685f commit 81ebbc8

File tree

14 files changed

+1589
-0
lines changed

14 files changed

+1589
-0
lines changed

‎next.config.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// next.config.js
2+
// /** @type {import('next').NextConfig} */
3+
// const nextConfig = {
4+
// reactStrictMode: true,
5+
// experimental: {
6+
// turbo: {
7+
// enabled: true, // Set turbo to true within an object
8+
// },
9+
// },
10+
// };
11+
12+
// export default nextConfig;
13+
14+
15+
// /** @type {import('next').NextConfig} */
16+
// const nextConfig = {};
17+
18+
// module.exports = nextConfig;
19+
20+
21+
import type { NextConfig } from "next";
22+
23+
const nextConfig: NextConfig = {
24+
/* config options here */
25+
};
26+
27+
export default nextConfig;

‎src/app/reader-dashboard/components/book-modal.tsx‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
"use client"
2+
3+
import { ArrowLeft, MoreHorizontal, Star, X } from "lucide-react"
4+
import Image from "next/image"
5+
import { useEffect, useState } from "react"
6+
import { BookReaderModal } from "../components/book-reader-modal"
7+
import imgbook from "../../../../public/Cover.png"
8+
import imgbook1 from "../../../../public/user1.svg"
9+
interface BookModalProps {
10+
book: {
11+
id: string
12+
title: string
13+
author: string
14+
rating: number
15+
status: "read" | "unread" | "progress"
16+
progress?: number
17+
isNFT?: boolean
18+
likes?: number
19+
verified?: boolean
20+
}
21+
onClose: () => void
22+
}
23+
24+
export function BookModal({ book, onClose }: BookModalProps) {
25+
// Close modal on escape key
26+
useEffect(() => {
27+
const handleEscape = (e: KeyboardEvent) => {
28+
if (e.key === "Escape") {
29+
onClose()
30+
}
31+
}
32+
document.addEventListener("keydown", handleEscape)
33+
return () => document.removeEventListener("keydown", handleEscape)
34+
}, [onClose])
35+
36+
// Prevent body scroll when modal is open
37+
useEffect(() => {
38+
document.body.style.overflow = "hidden"
39+
return () => {
40+
document.body.style.overflow = "unset"
41+
}
42+
}, [])
43+
44+
const [isReaderOpen, setIsReaderOpen] = useState(false)
45+
46+
const openReader = () => {
47+
setIsReaderOpen(true)
48+
}
49+
50+
const closeReader = () => {
51+
setIsReaderOpen(false)
52+
}
53+
54+
return (
55+
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
56+
<div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border-4 border-dashed border-blue-500">
57+
{/* Header */}
58+
<div className="flex items-center justify-between p-6 border-b border-gray-200">
59+
<div className="flex items-center gap-4">
60+
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
61+
<ArrowLeft className="w-5 h-5" />
62+
</button>
63+
<h1 className="text-lg font-semibold">Native Invisible</h1>
64+
</div>
65+
66+
<div className="flex items-center gap-4">
67+
<div className="flex items-center gap-2">
68+
<Image
69+
src={imgbook1}
70+
alt="Joseph Yanum"
71+
width={32}
72+
height={32}
73+
className="rounded-full"
74+
/>
75+
<div className="text-sm">
76+
<div className="flex items-center gap-1">
77+
<span className="font-medium">Joseph Yanum</span>
78+
<div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
79+
<span className="text-white text-xs">✓</span>
80+
</div>
81+
</div>
82+
<div className="text-gray-500">@joeyanum</div>
83+
</div>
84+
</div>
85+
<button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
86+
<MoreHorizontal className="w-5 h-5" />
87+
</button>
88+
<button
89+
onClick={onClose}
90+
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
91+
aria-label="Close modal"
92+
>
93+
<X className="w-5 h-5" />
94+
</button>
95+
</div>
96+
</div>
97+
98+
{/* Main Content */}
99+
<div className="p-6">
100+
{/* Book Info Section */}
101+
<div className="flex flex-col md:flex-row gap-8 mb-8">
102+
{/* Book Cover */}
103+
<div className="flex-shrink-0">
104+
<Image
105+
src={imgbook}
106+
alt={book.title}
107+
width={240}
108+
height={320}
109+
className="rounded-xl shadow-lg"
110+
/>
111+
</div>
112+
113+
{/* Book Details */}
114+
<div className="flex-1">
115+
<h2 className="text-2xl font-bold mb-2">{book.title}</h2>
116+
<div className="flex items-center gap-2 mb-4">
117+
<span className="text-gray-600">By {book.author}</span>
118+
{book.verified && (
119+
<div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
120+
<span className="text-white text-xs">✓</span>
121+
</div>
122+
)}
123+
</div>
124+
125+
{/* Rating */}
126+
<div className="flex items-center gap-2 mb-4">
127+
<div className="flex items-center gap-1">
128+
<Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
129+
<span className="font-medium">{book.rating}</span>
130+
</div>
131+
<span className="text-gray-500">of 109 Review</span>
132+
</div>
133+
134+
{/* Access Type */}
135+
<div className="mb-4">
136+
<div className="text-sm text-gray-600 mb-1">Access Type</div>
137+
<div className="text-blue-600 font-medium">One-time Purchase</div>
138+
</div>
139+
140+
{/* Reading Progress */}
141+
{book.status === "progress" && book.progress && (
142+
<div className="mb-6">
143+
<span className="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full font-medium">
144+
{book.progress}% Read
145+
</span>
146+
</div>
147+
)}
148+
149+
{/* Continue Reading Button */}
150+
<button
151+
onClick={openReader}
152+
className="bg-blue-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-blue-700 transition-colors"
153+
>
154+
Continue Reading
155+
</button>
156+
</div>
157+
</div>
158+
159+
{/* Description */}
160+
<div className="mb-8 border-t border-dashed border-gray-300 pt-8">
161+
<h3 className="text-lg font-semibold mb-4">Description</h3>
162+
<p className="text-gray-600 mb-4">
163+
"Native Invisibility" delves into the complex and often insidious ways in which indigenous peoples and
164+
their unique experiences are rendered unseen and unheard in the modern era.
165+
</p>
166+
<button className="text-blue-600 hover:text-blue-700 text-sm font-medium">Read More</button>
167+
</div>
168+
169+
{/* Book Details Grid */}
170+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 border-t border-dashed border-gray-300 pt-8">
171+
<div>
172+
<div className="text-sm text-gray-600 mb-1">Genre(s)</div>
173+
<div className="text-sm">Fiction</div>
174+
<div className="text-sm">Comic</div>
175+
</div>
176+
<div>
177+
<div className="text-sm text-gray-600 mb-1">Page count</div>
178+
<div className="text-sm">21 Pages</div>
179+
</div>
180+
<div>
181+
<div className="text-sm text-gray-600 mb-1">Language</div>
182+
<div className="text-sm">English</div>
183+
</div>
184+
<div>
185+
<div className="text-sm text-gray-600 mb-1">Date published</div>
186+
<div className="text-sm">12 April, 2025</div>
187+
</div>
188+
</div>
189+
190+
{/* ISBN */}
191+
<div className="mb-8 border-t border-dashed border-gray-300 pt-8">
192+
<div className="text-sm text-gray-600 mb-1">ISBN</div>
193+
<div className="text-sm">978-3-16-148410-0</div>
194+
</div>
195+
196+
{/* From Publisher & About Author */}
197+
<div className="grid md:grid-cols-2 gap-8 border-t border-dashed border-gray-300 pt-8">
198+
{/* From the Publisher */}
199+
<div>
200+
<h3 className="text-lg font-semibold mb-4">From the Publisher</h3>
201+
<p className="text-gray-600 text-sm">
202+
Native Invisibility unveils the crucial ways indigenous cultures are often unseen in our modern world.
203+
This vital book fosters understanding and action for recognition and justice.
204+
</p>
205+
</div>
206+
207+
{/* About the Author */}
208+
<div>
209+
<h3 className="text-lg font-semibold mb-4">About the Author</h3>
210+
<div className="flex items-start gap-3 mb-4">
211+
<Image
212+
src={imgbook1}
213+
alt={book.author}
214+
width={48}
215+
height={48}
216+
className="rounded-full"
217+
/>
218+
<div className="flex-1">
219+
<div className="flex items-center justify-between mb-2">
220+
<div className="flex items-center gap-2">
221+
<span className="font-medium">{book.author}</span>
222+
{book.verified && (
223+
<div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
224+
<span className="text-white text-xs">✓</span>
225+
</div>
226+
)}
227+
</div>
228+
<button className="text-sm border border-gray-300 px-3 py-1 rounded-full hover:bg-gray-50 transition-colors">
229+
Follow
230+
</button>
231+
</div>
232+
</div>
233+
</div>
234+
<p className="text-gray-600 text-sm">
235+
Darrin Collins is a dedicated researcher and writer deeply committed to exploring issues of cultural
236+
visibility, marginalization, and the intersection of identity and technology. His work in Native
237+
Invisibility reflects a long-standing interest in amplifying underrepresented voices and fostering a
238+
more equitable understanding of diverse experiences in the contemporary world.
239+
</p>
240+
</div>
241+
</div>
242+
</div>
243+
{/* Book Reader Modal */}
244+
{isReaderOpen && <BookReaderModal book={book} onClose={closeReader} />}
245+
</div>
246+
</div>
247+
)
248+
}

0 commit comments

Comments
 (0)