Skip to content

Commit 9335449

Browse files
fezcodefezcode
committed
feat: folder icons for series
1 parent 7c88073 commit 9335449

File tree

1 file changed

+86
-18
lines changed

1 file changed

+86
-18
lines changed

‎src/pages/luxe-views/LuxeBlogPage.jsx‎

Lines changed: 86 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
3-
import { ArrowRightIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
3+
import {
4+
ArrowRightIcon,
5+
MagnifyingGlassIcon,
6+
ListBulletsIcon,
7+
GridFourIcon,
8+
FolderIcon
9+
} from '@phosphor-icons/react';
410
import { fetchAllBlogPosts } from '../../utils/dataUtils';
511
import Seo from '../../components/Seo';
612
import LuxeArt from '../../components/LuxeArt';
@@ -20,6 +26,7 @@ const LuxeBlogPage = () => {
2026
const [loading, setLoading] = useState(true);
2127
const [activeFilter, setActiveFilter] = useState('all');
2228
const [searchQuery, setSearchQuery] = useState('');
29+
const [layoutMode, setLayoutMode] = useState('grid');
2330

2431
useEffect(() => {
2532
const fetchPosts = async () => {
@@ -112,35 +119,53 @@ const LuxeBlogPage = () => {
112119
</div>
113120

114121
{/* Filters */}
115-
<div className="flex gap-2 overflow-x-auto no-scrollbar">
122+
<div className="flex gap-2 overflow-x-auto no-scrollbar flex-1 md:flex-none">
116123
{FILTERS.map(f => (
117124
<button
118125
key={f.id}
119126
onClick={() => setActiveFilter(f.id)}
120127
className={`px-4 py-2 rounded-full font-outfit text-xs uppercase tracking-widest whitespace-nowrap transition-all ${
121128
activeFilter === f.id
122-
? 'bg-[#1A1A1A] text-white'
129+
? 'bg-[#1A1A1A] text-white shadow-lg shadow-black/10'
123130
: 'border border-[#1A1A1A]/10 hover:border-[#1A1A1A] text-[#1A1A1A]/60'
124131
}`}
125132
>
126133
{f.label}
127134
</button>
128135
))}
129136
</div>
137+
138+
{/* Layout Switcher */}
139+
<div className="flex bg-white rounded-full p-1 border border-[#1A1A1A]/5 shadow-sm">
140+
<button
141+
onClick={() => setLayoutMode('grid')}
142+
className={`p-2 rounded-full transition-all ${layoutMode === 'grid' ? 'bg-[#1A1A1A] text-white shadow-md' : 'text-[#1A1A1A]/40 hover:text-[#1A1A1A]'}`}
143+
title="Grid View"
144+
>
145+
<GridFourIcon size={18} />
146+
</button>
147+
<button
148+
onClick={() => setLayoutMode('list')}
149+
className={`p-2 rounded-full transition-all ${layoutMode === 'list' ? 'bg-[#1A1A1A] text-white shadow-md' : 'text-[#1A1A1A]/40 hover:text-[#1A1A1A]'}`}
150+
title="List View"
151+
>
152+
<ListBulletsIcon size={18} />
153+
</button>
154+
</div>
130155
</div>
131156
</div>
132157
</header>
133158

134-
{/* Grid */}
135-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
136-
{loading ? (
137-
<div className="col-span-full py-32 text-center font-outfit text-[#1A1A1A]/40">Loading Archive...</div>
138-
) : (
139-
filteredItems.map((item) => (
159+
{/* Content Area */}
160+
{loading ? (
161+
<div className="py-32 text-center font-outfit text-[#1A1A1A]/40 text-xs uppercase tracking-[0.2em] animate-pulse">Synchronizing Archive...</div>
162+
) : layoutMode === 'grid' ? (
163+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16 animate-fade-in">
164+
{filteredItems.map((item) => (
140165
<Link key={item.slug} to={item.isSeries ? `/blog/series/${item.slug}` : `/blog/${item.slug}`} className="group block">
141-
<div className="relative aspect-[4/5] bg-[#EBEBEB] overflow-hidden mb-6 border border-[#1A1A1A]/5">
166+
<div className="relative aspect-[4/5] bg-[#EBEBEB] overflow-hidden mb-6 border border-[#1A1A1A]/5 shadow-sm group-hover:shadow-2xl transition-all duration-700">
142167
{/* Art/Image */}
143-
<div className="absolute inset-0 transition-transform duration-700 group-hover:scale-105">
168+
<div className="absolute inset-0 transition-transform duration-1000 group-hover:scale-105">
144169
<LuxeArt seed={item.title} className="w-full h-full opacity-80 mix-blend-multiply" />
145170
</div>
146171

@@ -154,26 +179,69 @@ const LuxeBlogPage = () => {
154179

155180
<div className="space-y-3">
156181
<div className="flex items-center gap-3">
157-
<span className="font-outfit text-[10px] uppercase tracking-widest text-[#8D4004]">{item.category}</span>
158-
{item.isSeries && <span className="font-outfit text-[10px] uppercase tracking-widest text-[#1A1A1A]/40 border border-[#1A1A1A]/10 px-1 rounded">Series</span>}
182+
<span className="font-outfit text-[10px] uppercase tracking-widest text-[#8D4004] font-bold">{item.category}</span>
183+
{item.isSeries && (
184+
<span className="font-outfit text-[10px] uppercase tracking-widest text-[#1A1A1A]/40 border border-[#1A1A1A]/10 px-1.5 py-0.5 rounded-sm bg-white/50 flex items-center gap-1">
185+
<FolderIcon size={12} weight="fill" /> Series
186+
</span>
187+
)}
159188
</div>
160189

161190
<h2 className="font-playfairDisplay text-3xl text-[#1A1A1A] group-hover:italic transition-all leading-tight">
162191
{item.title}
163192
</h2>
164193

165-
<p className="font-outfit text-sm text-[#1A1A1A]/60 line-clamp-2">
194+
<p className="font-outfit text-sm text-[#1A1A1A]/60 line-clamp-2 leading-relaxed">
166195
{item.description}
167196
</p>
168197

169-
<div className="pt-4 flex items-center gap-2 text-[#1A1A1A] font-outfit text-xs uppercase tracking-widest group-hover:gap-4 transition-all">
198+
<div className="pt-4 flex items-center gap-2 text-[#1A1A1A]/40 font-outfit text-[10px] uppercase tracking-[0.2em] group-hover:text-[#8D4004] group-hover:gap-4 transition-all">
170199
Read Entry <ArrowRightIcon />
171200
</div>
172201
</div>
173202
</Link>
174-
))
175-
)}
176-
</div>
203+
))}
204+
</div>
205+
) : (
206+
<div className="max-w-5xl mx-auto flex flex-col divide-y divide-[#1A1A1A]/5 animate-fade-in">
207+
{filteredItems.map((item) => (
208+
<Link key={item.slug} to={item.isSeries ? `/blog/series/${item.slug}` : `/blog/${item.slug}`} className="group py-12 first:pt-0 flex flex-col md:flex-row gap-8 items-start md:items-center">
209+
<div className="w-full md:w-48 lg:w-64 shrink-0">
210+
<div className="relative aspect-[16/9] md:aspect-square bg-[#EBEBEB] overflow-hidden border border-[#1A1A1A]/5 group-hover:shadow-xl transition-all duration-500">
211+
<LuxeArt seed={item.title} className="w-full h-full opacity-60 mix-blend-multiply transition-transform duration-1000 group-hover:scale-110" />
212+
</div>
213+
</div>
214+
215+
<div className="flex-1 space-y-4">
216+
<div className="flex items-center gap-4 text-[10px] font-outfit uppercase tracking-[0.2em]">
217+
<span className="text-[#8D4004] font-bold">{item.category}</span>
218+
<span className="text-[#1A1A1A]/30">/</span>
219+
<span className="text-[#1A1A1A]/40">
220+
{new Date(item.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
221+
</span>
222+
{item.isSeries && (
223+
<span className="bg-[#1A1A1A]/5 px-2 py-0.5 rounded text-[9px] text-[#1A1A1A]/60 flex items-center gap-1">
224+
<FolderIcon size={12} weight="bold" /> Series
225+
</span>
226+
)}
227+
</div>
228+
229+
<h2 className="font-playfairDisplay text-3xl md:text-4xl lg:text-5xl text-[#1A1A1A] group-hover:italic group-hover:translate-x-2 transition-all duration-500 leading-tight">
230+
{item.title}
231+
</h2>
232+
233+
<p className="font-outfit text-sm text-[#1A1A1A]/60 line-clamp-2 max-w-2xl leading-relaxed italic">
234+
{item.description}
235+
</p>
236+
</div>
237+
238+
<div className="hidden md:flex shrink-0 w-12 h-12 rounded-full border border-[#1A1A1A]/10 items-center justify-center group-hover:bg-[#1A1A1A] group-hover:text-white transition-all duration-500">
239+
<ArrowRightIcon size={20} />
240+
</div>
241+
</Link>
242+
))}
243+
</div>
244+
)}
177245

178246
</div>
179247
</div>

0 commit comments

Comments
 (0)