Skip to content

Commit 6bc62ff

Browse files
fezcodefezcode
committed
feat: icon suffix in luxe pages
1 parent 5b9419a commit 6bc62ff

14 files changed

+118
-102
lines changed

‎src/components/LuxeFooter.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33
import { version } from '../version';
44
import { useAboutData } from '../hooks/useAboutData';
5-
import { Command } from '@phosphor-icons/react';
5+
import { CommandIcon } from '@phosphor-icons/react';
66

77
const LuxeFooter = () => {
88
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -69,7 +69,7 @@ const LuxeFooter = () => {
6969

7070
<div className="p-6 border border-[#1A1A1A]/5 bg-white rounded-sm">
7171
<div className="flex items-center gap-3 mb-2 text-[#1A1A1A]/60">
72-
<Command size={16} />
72+
<CommandIcon size={16} />
7373
<span className="font-outfit text-[10px] uppercase tracking-widest">Quick Actions</span>
7474
</div>
7575
<p className="font-outfit text-xs text-[#1A1A1A]/40">

‎src/components/LuxeNavbar.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
3-
import { List, MagnifyingGlass } from '@phosphor-icons/react';
3+
import { ListIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
44

55
const LuxeNavbar = ({
66
toggleSidebar,
@@ -36,7 +36,7 @@ const LuxeNavbar = ({
3636
className="text-[#1A1A1A]/60 hover:text-[#1A1A1A] transition-colors focus:outline-none"
3737
aria-label="Toggle Sidebar"
3838
>
39-
<List size={24} weight="light" />
39+
<ListIcon size={24} weight="light" />
4040
</button>
4141

4242
<Link to="/" className="flex items-center gap-2 group">
@@ -62,7 +62,7 @@ const LuxeNavbar = ({
6262
className="flex items-center gap-2 text-[#1A1A1A]/60 hover:text-[#1A1A1A] transition-colors"
6363
aria-label="Toggle Search"
6464
>
65-
<MagnifyingGlass size={20} weight="light" />
65+
<MagnifyingGlassIcon size={20} weight="light" />
6666
<span className="hidden md:inline font-outfit text-xs font-medium uppercase tracking-widest">
6767
Search
6868
</span>

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

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import {
4-
ArrowLeft,
5-
Lock,
6-
Info,
7-
BellSlash,
8-
Funnel,
9-
XCircle,
10-
CalendarBlank,
11-
CheckCircle,
4+
ArrowLeftIcon,
5+
LockIcon,
6+
InfoIcon,
7+
BellSlashIcon,
8+
FunnelIcon,
9+
XCircleIcon,
10+
CalendarBlankIcon,
11+
CheckCircleIcon,
1212
} from '@phosphor-icons/react';
1313
import { motion, AnimatePresence } from 'framer-motion';
1414
import Seo from '../../components/Seo';
@@ -68,13 +68,18 @@ const LuxeAchievementsPage = () => {
6868

6969
<div className="max-w-[1400px] mx-auto px-6 md:px-12 relative z-10">
7070

71-
{/* Header */}
72-
<header className="mb-20 pt-12 border-b border-[#1A1A1A]/10 pb-12">
73-
<Link to="/" className="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/40 hover:text-[#8D4004] transition-colors">
74-
<ArrowLeft /> FZCX Index
75-
</Link>
71+
{/* Header */}
72+
73+
<header className="mb-20 pt-12 border-b border-[#1A1A1A]/10 pb-12">
74+
75+
<Link to="/" className="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/40 hover:text-[#8D4004] transition-colors">
76+
77+
<ArrowLeftIcon /> FZCX Index
78+
79+
</Link>
80+
81+
<div className="flex flex-col lg:flex-row lg:items-end justify-between gap-12">
7682

77-
<div className="flex flex-col lg:flex-row lg:items-end justify-between gap-12">
7883
<div>
7984
<h1 className="font-playfairDisplay text-7xl md:text-9xl text-[#1A1A1A] mb-6">
8085
Milestones
@@ -108,7 +113,7 @@ const LuxeAchievementsPage = () => {
108113
{/* Filters */}
109114
<div className="flex flex-wrap items-center gap-4 mb-16">
110115
<div className="flex items-center gap-2 text-[#1A1A1A]/30 font-outfit text-[10px] uppercase tracking-widest mr-4">
111-
<Funnel size={14} /> <span>Filter Archives:</span>
116+
<FunnelIcon size={14} /> <span>Filter Archives:</span>
112117
</div>
113118
{uniqueCategories.map((category) => {
114119
const isSelected =
@@ -137,7 +142,7 @@ const LuxeAchievementsPage = () => {
137142
onClick={clearFilters}
138143
className="flex items-center gap-2 text-[10px] font-outfit uppercase tracking-widest text-rose-600 hover:text-rose-800 transition-colors ml-4"
139144
>
140-
<XCircle size={16} /> Reset Filters
145+
<XCircleIcon size={16} /> Reset Filters
141146
</motion.button>
142147
)}
143148
</AnimatePresence>
@@ -153,7 +158,7 @@ const LuxeAchievementsPage = () => {
153158
<div className={`w-10 h-10 flex items-center justify-center rounded-full ${
154159
showAchievementToast ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' : 'bg-[#1A1A1A]/5'
155160
}`}>
156-
{showAchievementToast ? <Info size={20} weight="fill" /> : <BellSlash size={20} />}
161+
{showAchievementToast ? <InfoIcon size={20} weight="fill" /> : <BellSlashIcon size={20} />}
157162
</div>
158163
<div className="flex flex-col">
159164
<span className="font-outfit text-[9px] uppercase tracking-[0.3em] opacity-50">Discovery Protocol</span>
@@ -187,9 +192,9 @@ const LuxeAchievementsPage = () => {
187192
{/* Status Marker */}
188193
<div className="absolute top-4 right-4">
189194
{isUnlocked ? (
190-
<CheckCircle size={16} weight="fill" className="text-emerald-600" />
195+
<CheckCircleIcon size={16} weight="fill" className="text-emerald-600" />
191196
) : (
192-
<Lock size={16} weight="light" className="text-[#1A1A1A]/20" />
197+
<LockIcon size={16} weight="light" className="text-[#1A1A1A]/20" />
193198
)}
194199
</div>
195200

@@ -211,7 +216,7 @@ const LuxeAchievementsPage = () => {
211216
: 'bg-transparent text-[#1A1A1A]/10 border border-dashed border-[#1A1A1A]/10'
212217
}`}>
213218
<div className="scale-[1.8]">
214-
{isUnlocked ? achievement.icon : <Lock size={20} weight="light" />}
219+
{isUnlocked ? achievement.icon : <LockIcon size={20} weight="light" />}
215220
</div>
216221
</div>
217222
</div>
@@ -231,7 +236,7 @@ const LuxeAchievementsPage = () => {
231236
{/* Unlocked Date Footer */}
232237
{isUnlocked && (
233238
<div className="mt-8 pt-6 border-t border-[#1A1A1A]/5 w-full flex items-center justify-center gap-2 text-[9px] font-outfit uppercase tracking-widest text-[#1A1A1A]/30">
234-
<CalendarBlank size={12} />
239+
<CalendarBlankIcon size={12} />
235240
<span>Synchronized: {unlockedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
236241
</div>
237242
)}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
3-
import { MagnifyingGlass, ArrowUpRight, ArrowLeft } from '@phosphor-icons/react';
3+
import { MagnifyingGlassIcon, ArrowUpRightIcon, ArrowLeftIcon } from '@phosphor-icons/react';
44
import Seo from '../../components/Seo';
55
import { appIcons } from '../../utils/appIcons';
66
import LuxeArt from '../../components/LuxeArt';
@@ -71,7 +71,7 @@ const LuxeAppsPage = () => {
7171

7272
<header className="mb-12 pt-12 border-b border-[#1A1A1A]/10 pb-12">
7373
<Link to="/" className="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-black/40 hover:text-[#8D4004] transition-colors">
74-
<ArrowLeft /> FZCX Index
74+
<ArrowLeftIcon /> FZCX Index
7575
</Link>
7676
<h1 className="font-playfairDisplay text-7xl md:text-9xl text-[#1A1A1A] mb-6">
7777
Software
@@ -89,7 +89,7 @@ const LuxeAppsPage = () => {
8989
onChange={(e) => setSearchQuery(e.target.value)}
9090
className="w-full bg-transparent py-2 outline-none font-outfit text-sm placeholder-[#1A1A1A]/30"
9191
/>
92-
<MagnifyingGlass className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />
92+
<MagnifyingGlassIcon className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />
9393
</div>
9494
</div>
9595
</header>
@@ -141,7 +141,7 @@ const LuxeAppsPage = () => {
141141
</div>
142142

143143
<div className="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-[#1A1A1A] text-white p-4 rounded-full">
144-
<ArrowUpRight size={24} />
144+
<ArrowUpRightIcon size={24} />
145145
</div>
146146
</div>
147147

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
3-
import { ArrowRight, MagnifyingGlass } from '@phosphor-icons/react';
3+
import { ArrowRightIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
44
import { fetchAllBlogPosts } from '../../utils/dataUtils';
55
import Seo from '../../components/Seo';
66
import LuxeArt from '../../components/LuxeArt';
@@ -108,7 +108,7 @@ const LuxeBlogPage = () => {
108108
onChange={(e) => setSearchQuery(e.target.value)}
109109
className="w-full bg-transparent py-2 outline-none font-outfit text-sm placeholder-[#1A1A1A]/30"
110110
/>
111-
<MagnifyingGlass className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />
111+
<MagnifyingGlassIcon className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />
112112
</div>
113113

114114
{/* Filters */}
@@ -167,7 +167,7 @@ const LuxeBlogPage = () => {
167167
</p>
168168

169169
<div className="pt-4 flex items-center gap-2 text-[#1A1A1A] font-outfit text-xs uppercase tracking-widest group-hover:gap-4 transition-all">
170-
Read Entry <ArrowRight />
170+
Read Entry <ArrowRightIcon />
171171
</div>
172172
</div>
173173
</Link>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useMemo } from 'react';
2-
import { MagnifyingGlass, Terminal, Command, ArrowRight, ArrowLeft } from '@phosphor-icons/react';
2+
import { MagnifyingGlassIcon, TerminalIcon, CommandIcon, ArrowRightIcon, ArrowLeftIcon } from '@phosphor-icons/react';
33
import { Link } from 'react-router-dom';
44
import Seo from '../../components/Seo';
55
import { commands as commandsData } from '../../data/commands';
@@ -28,7 +28,7 @@ const LuxeCommandsPage = () => {
2828

2929
<header className="mb-20 pt-12 border-b border-[#1A1A1A]/10 pb-12">
3030
<Link to="/" className="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/40 hover:text-[#8D4004] transition-colors">
31-
<ArrowLeft /> FZCX Index
31+
<ArrowLeftIcon /> FZCX Index
3232
</Link>
3333
<h1 className="font-playfairDisplay text-7xl md:text-9xl text-[#1A1A1A] mb-6">
3434
Terminal
@@ -54,7 +54,7 @@ const LuxeCommandsPage = () => {
5454
onChange={(e) => setSearchQuery(e.target.value)}
5555
className="w-full bg-transparent py-2 outline-none font-outfit text-sm placeholder-[#1A1A1A]/30"
5656
/>
57-
<MagnifyingGlass className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />
57+
<MagnifyingGlassIcon className="absolute right-0 top-1/2 -translate-y-1/2 text-[#1A1A1A]/40" />
5858
</div>
5959
</div>
6060
</header>
@@ -80,7 +80,7 @@ const LuxeCommandsPage = () => {
8080
className="group relative bg-white border border-[#1A1A1A]/5 p-8 text-left hover:shadow-xl hover:border-[#1A1A1A]/10 transition-all duration-500 rounded-sm overflow-hidden"
8181
>
8282
{/* Decorative Command Icon Background */}
83-
<Command
83+
<CommandIcon
8484
size={120}
8585
weight="thin"
8686
className="absolute -right-8 -bottom-8 text-[#1A1A1A]/[0.02] group-hover:text-[#8D4004]/[0.05] transition-colors duration-700"
@@ -91,7 +91,7 @@ const LuxeCommandsPage = () => {
9191
<div className="px-3 py-1 bg-[#1A1A1A]/5 rounded-sm border border-[#1A1A1A]/5">
9292
<span className="font-mono text-xs text-[#8D4004]">{cmd.commandId}</span>
9393
</div>
94-
<Terminal size={18} className="text-[#1A1A1A]/20 group-hover:text-[#1A1A1A] transition-colors" />
94+
<TerminalIcon size={18} className="text-[#1A1A1A]/20 group-hover:text-[#1A1A1A] transition-colors" />
9595
</div>
9696

9797
<h3 className="font-playfairDisplay text-2xl text-[#1A1A1A] leading-tight group-hover:italic transition-all">
@@ -103,7 +103,7 @@ const LuxeCommandsPage = () => {
103103
</p>
104104

105105
<div className="pt-4 flex items-center gap-2 text-[10px] font-outfit uppercase tracking-[0.3em] text-[#1A1A1A]/30 group-hover:text-[#8D4004] transition-colors">
106-
Execute <ArrowRight size={12} className="group-hover:translate-x-2 transition-transform" />
106+
Execute <ArrowRightIcon size={12} className="group-hover:translate-x-2 transition-transform" />
107107
</div>
108108
</div>
109109
</button>

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

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import React, { useState, useEffect } from 'react';
22
import { useParams, Link } from 'react-router-dom';
33
import { motion, useScroll, useTransform } from 'framer-motion';
4-
import { ArrowLeft, Star, ShareNetwork, Tag, User, CalendarBlank, ArrowUpRight } from '@phosphor-icons/react';
4+
import {
5+
ArrowLeftIcon,
6+
StarIcon,
7+
ShareNetworkIcon,
8+
TagIcon,
9+
UserIcon,
10+
CalendarBlankIcon,
11+
ArrowUpRightIcon,
12+
} from '@phosphor-icons/react';
513
import Seo from '../../components/Seo';
614
import LuxeArt from '../../components/LuxeArt';
715
import MarkdownContent from '../../components/MarkdownContent';
@@ -83,13 +91,13 @@ const LuxeLogDetailPage = () => {
8391

8492
<div className="relative z-10 max-w-4xl space-y-8">
8593
<Link to="/logs" className="inline-flex items-center gap-2 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/40 hover:text-[#8D4004] transition-colors mb-4">
86-
<ArrowLeft /> Back to Archives
94+
<ArrowLeftIcon /> Back to Archives
8795
</Link>
8896

8997
<div className="flex items-center justify-center gap-4">
9098
<div className="flex gap-1">
9199
{[...Array(5)].map((_, i) => (
92-
<Star key={i} size={16} weight="fill" className={i < (attributes.rating || 0) ? "text-[#8D4004]" : "text-[#1A1A1A]/10"} />
100+
<StarIcon key={i} size={16} weight="fill" className={i < (attributes.rating || 0) ? "text-[#8D4004]" : "text-[#1A1A1A]/10"} />
93101
))}
94102
</div>
95103
</div>
@@ -99,11 +107,14 @@ const LuxeLogDetailPage = () => {
99107
</h1>
100108

101109
<div className="flex flex-wrap justify-center gap-6 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/50">
102-
<span className="flex items-center gap-2 px-3 py-1 rounded-full border bg-opacity-10 backdrop-blur-sm" style={{ color: accentColor, borderColor: `${accentColor}40`, backgroundColor: `${accentColor}10` }}>
103-
<Tag size={14} weight="fill" /> {category}
110+
<span
111+
className="flex items-center gap-2 px-3 py-1 rounded-full border font-bold text-black"
112+
style={{ backgroundColor: accentColor, borderColor: accentColor }}
113+
>
114+
<TagIcon size={14} weight="fill" /> {category}
104115
</span>
105-
{attributes.author && <span className="flex items-center gap-2"><User size={14} /> {attributes.author}</span>}
106-
<span className="flex items-center gap-2"><CalendarBlank size={14} /> {attributes.date}</span>
116+
{attributes.author && <span className="flex items-center gap-2"><UserIcon size={14} /> {attributes.author}</span>}
117+
<span className="flex items-center gap-2"><CalendarBlankIcon size={14} /> {attributes.date}</span>
107118
</div>
108119
</div>
109120
</motion.div>
@@ -131,13 +142,13 @@ const LuxeLogDetailPage = () => {
131142
<div className="mt-20 pt-12 border-t border-[#1A1A1A]/10 flex flex-col items-center gap-8">
132143
{attributes.link && (
133144
<a href={attributes.link} target="_blank" rel="noreferrer" className="flex items-center gap-2 bg-[#1A1A1A] text-white px-8 py-4 rounded-full font-outfit text-xs uppercase tracking-widest hover:bg-[#8D4004] transition-colors">
134-
External Source <ArrowUpRight weight="bold" />
145+
External Source <ArrowUpRightIcon weight="bold" />
135146
</a>
136147
)}
137148

138149
<div className="flex gap-4">
139150
<button className="flex items-center gap-2 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/60 hover:text-[#8D4004] transition-colors">
140-
<ShareNetwork size={16} /> Share Entry
151+
<ShareNetworkIcon size={16} /> Share Entry
141152
</button>
142153
</div>
143154
</div>

0 commit comments

Comments
 (0)