Skip to content

Commit b188540

Browse files
devnucklesdevnuckles
committed
feat: implement dynamic theme systems with 3 themes
1 parent 11547da commit b188540

File tree

24 files changed

+654
-487
lines changed

24 files changed

+654
-487
lines changed

‎src/app/admin/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,14 +182,14 @@ export default function AdminPage() {
182182
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8">
183183
<div className="space-y-6">
184184
{/* Header */}
185-
<div className="border-4 border-old-ink bg-gradient-to-r from-old-ink to-gray-800 text-old-paper p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,0.3)]">
185+
<div className="border-4 bg-gradient-to-r from-old-ink to-gray-800 p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,0.3)]" style={{ color: 'var(--primary-foreground)', borderColor: 'var(--border)' }}>
186186
<div className="flex items-center gap-3">
187187
<span className="text-5xl">⚙️</span>
188188
<div>
189189
<h1 className="text-3xl md:text-4xl font-bold uppercase tracking-wider">
190190
Admin Panel
191191
</h1>
192-
<p className="text-old-paper opacity-75 text-sm uppercase tracking-wider">
192+
<p className="opacity-75 text-sm uppercase tracking-wider" style={{ color: 'var(--primary-foreground)' }}>
193193
System Management & Control
194194
</p>
195195
</div>
@@ -227,8 +227,8 @@ export default function AdminPage() {
227227
)}
228228

229229
{/* Tabs */}
230-
<div className="border-4 border-old-ink bg-white shadow-[6px_6px_0px_0px_rgba(0,0,0,0.3)]">
231-
<div className="flex border-b-4 border-old-ink overflow-x-auto">
230+
<div className="border-4 shadow-[6px_6px_0px_0px_rgba(0,0,0,0.3)]" style={{ backgroundColor: 'var(--card)', borderColor: 'var(--border)' }}>
231+
<div className="flex border-b-4 overflow-x-auto" style={{ borderColor: 'var(--border)' }}>
232232
<TabButton
233233
active={activeTab === "overview"}
234234
onClick={() => setActiveTab("overview")}

‎src/app/books/[id]/page.tsx‎

Lines changed: 67 additions & 71 deletions
Large diffs are not rendered by default.

‎src/app/books/page.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -69,20 +69,20 @@ export default function BooksPage() {
6969
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8">
7070
<div className="space-y-6">
7171
{/* Header - Compact */}
72-
<div className="border-4 border-old-ink bg-white p-4 md:p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,0.3)]">
72+
<div className="border-4 p-4 md:p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,0.3)]" style={{ backgroundColor: 'var(--card)', borderColor: 'var(--border)' }}>
7373
<div className="flex items-center gap-3 mb-2">
7474
<span className="text-3xl md:text-4xl">📚</span>
7575
<div>
7676
<h1 className="text-2xl md:text-3xl font-bold uppercase tracking-wider">Book Collection</h1>
77-
<p className="text-old-grey text-xs md:text-sm uppercase tracking-wider">
77+
<p className="text-xs md:text-sm uppercase tracking-wider" style={{ color: 'var(--muted-foreground)' }}>
7878
{books.length} {books.length === 1 ? 'Book' : 'Books'} Available
7979
</p>
8080
</div>
8181
</div>
8282
</div>
8383

8484
{/* Search & Filters - Compact */}
85-
<div className="border-4 border-old-ink bg-white p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]">
85+
<div className="border-4 p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]" style={{ backgroundColor: 'var(--card)', borderColor: 'var(--border)' }}>
8686
<div className="flex flex-col md:flex-row gap-3">
8787
{/* Search */}
8888
<div className="flex-1">
@@ -93,12 +93,11 @@ export default function BooksPage() {
9393
onChange={(e) => setSearch(e.target.value)}
9494
onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
9595
placeholder="Search by title, author..."
96-
className="flex-1 px-3 py-2 border-2 border-old-border focus:border-old-ink outline-none text-sm"
96+
className="flex-1 px-3 py-2 border-2 focus: outline-none text-sm" style={{ borderColor: 'var(--border)' }}
9797
/>
9898
<button
9999
onClick={handleSearch}
100-
className="px-6 py-2 border-2 border-old-ink bg-old-ink text-old-paper font-bold uppercase text-xs
101-
hover:bg-white hover:text-old-ink transition-all"
100+
className="px-6 py-2 border-2 font-bold uppercase text-xs hover: hover: transition-all" style={{ backgroundColor: 'var(--primary)', color: 'var(--primary-foreground)', borderColor: 'var(--border)' }}
102101
>
103102
Search
104103
</button>
@@ -113,7 +112,7 @@ export default function BooksPage() {
113112
setStatusFilter(e.target.value)
114113
loadBooks()
115114
}}
116-
className="w-full px-3 py-2 border-2 border-old-border focus:border-old-ink outline-none text-sm"
115+
className="w-full px-3 py-2 border-2 focus: outline-none text-sm" style={{ borderColor: 'var(--border)' }}
117116
>
118117
<option value="">All Status</option>
119118
<option value="available">Available</option>
@@ -126,12 +125,12 @@ export default function BooksPage() {
126125

127126
{/* Books Grid */}
128127
{loading ? (
129-
<div className="text-center py-12 border-4 border-old-ink bg-white">
130-
<p className="text-old-grey uppercase tracking-wider text-sm">Loading books...</p>
128+
<div className="text-center py-12 border-4" style={{ backgroundColor: 'var(--card)', borderColor: 'var(--border)' }}>
129+
<p className="uppercase tracking-wider text-sm" style={{ color: 'var(--muted-foreground)' }}>Loading books...</p>
131130
</div>
132131
) : books.length === 0 ? (
133-
<div className="text-center py-12 border-4 border-old-ink bg-white">
134-
<p className="text-old-grey uppercase tracking-wider text-sm">No books found</p>
132+
<div className="text-center py-12 border-4" style={{ backgroundColor: 'var(--card)', borderColor: 'var(--border)' }}>
133+
<p className="uppercase tracking-wider text-sm" style={{ color: 'var(--muted-foreground)' }}>No books found</p>
135134
</div>
136135
) : (
137136
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
@@ -159,10 +158,10 @@ function BookCard({ book, onBookmark }: { book: Book; onBookmark: (id: string, t
159158
}
160159

161160
return (
162-
<div className="border-2 border-old-ink bg-white hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)] transition-all group cursor-pointer"
161+
<div className="border-2 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)] transition-all group cursor-pointer" style={{ backgroundColor: 'var(--card)', borderColor: 'var(--border)' }}
163162
onClick={() => router.push(`/books/${book.id}`)}>
164163
{/* Book Cover - Smaller */}
165-
<div className="aspect-[3/4] bg-old-border flex items-center justify-center border-b-2 border-old-ink relative overflow-hidden">
164+
<div className="aspect-[3/4] bg-old-border flex items-center justify-center border-b-2 relative overflow-hidden" style={{ borderColor: 'var(--border)' }}>
166165
{book.cover_url ? (
167166
<img src={book.cover_url} alt={book.title} className="w-full h-full object-cover" />
168167
) : (
@@ -176,16 +175,16 @@ function BookCard({ book, onBookmark }: { book: Book; onBookmark: (id: string, t
176175

177176
{/* Book Info - Compact */}
178177
<div className="p-2.5">
179-
<h3 className="font-bold uppercase text-xs leading-tight mb-1 line-clamp-2 min-h-[2rem] group-hover:text-old-grey transition-colors">
178+
<h3 className="font-bold uppercase text-xs leading-tight mb-1 line-clamp-2 min-h-[2rem] group-hover: transition-colors" style={{ color: 'var(--muted-foreground)' }}>
180179
{book.title}
181180
</h3>
182181

183-
<p className="text-old-grey text-xs mb-2 truncate">
182+
<p className="text-xs mb-2 truncate" style={{ color: 'var(--muted-foreground)' }}>
184183
{book.author}
185184
</p>
186185

187186
{/* Stats - Inline */}
188-
<div className="flex items-center justify-between text-xs text-old-grey mb-2 pb-2 border-b border-old-border">
187+
<div className="flex items-center justify-between text-xs mb-2 pb-2 border-b" style={{ color: 'var(--muted-foreground)', borderColor: 'var(--border)' }}>
189188
<span className="flex items-center gap-1">
190189
<span className="opacity-50">📖</span>
191190
{book.total_reads}
@@ -210,7 +209,7 @@ function BookCard({ book, onBookmark }: { book: Book; onBookmark: (id: string, t
210209
e.stopPropagation()
211210
onBookmark(book.id, 'like')
212211
}}
213-
className="flex-1 py-1 border border-old-border hover:border-red-400 hover:bg-red-50 transition-all text-sm"
212+
className="flex-1 py-1 border hover:border-red-400 hover:bg-red-50 transition-all text-sm" style={{ borderColor: 'var(--border)' }}
214213
title="Like"
215214
>
216215
❤️
@@ -220,7 +219,7 @@ function BookCard({ book, onBookmark }: { book: Book; onBookmark: (id: string, t
220219
e.stopPropagation()
221220
onBookmark(book.id, 'bookmark')
222221
}}
223-
className="flex-1 py-1 border border-old-border hover:border-blue-400 hover:bg-blue-50 transition-all text-sm"
222+
className="flex-1 py-1 border hover:border-blue-400 hover:bg-blue-50 transition-all text-sm" style={{ borderColor: 'var(--border)' }}
224223
title="Bookmark"
225224
>
226225
🔖
@@ -230,7 +229,7 @@ function BookCard({ book, onBookmark }: { book: Book; onBookmark: (id: string, t
230229
e.stopPropagation()
231230
onBookmark(book.id, 'priority')
232231
}}
233-
className="flex-1 py-1 border border-old-border hover:border-yellow-400 hover:bg-yellow-50 transition-all text-sm"
232+
className="flex-1 py-1 border hover:border-yellow-400 hover:bg-yellow-50 transition-all text-sm" style={{ borderColor: 'var(--border)' }}
234233
title="Priority"
235234
>
236235
⭐

0 commit comments

Comments
 (0)