Skip to content

Commit 9f443cf

Browse files
fezcodefezcode
committed
style: side panel
1 parent 65dab9b commit 9f443cf

File tree

2 files changed

+126
-40
lines changed

2 files changed

+126
-40
lines changed

‎src/components/SidePanel.js‎

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useEffect, useState } from 'react';
22
import { motion, AnimatePresence } from 'framer-motion';
3-
import { XIcon } from '@phosphor-icons/react';
3+
import { XIcon, InfoIcon } from '@phosphor-icons/react';
44
import { useSidePanel } from '../context/SidePanelContext';
5+
import GenerativeArt from './GenerativeArt';
56

67
const SidePanel = () => {
78
const {
@@ -67,13 +68,13 @@ const SidePanel = () => {
6768
<AnimatePresence>
6869
{isOpen && (
6970
<>
70-
{/* Overlay */}
71+
{/* Backdrop with blur */}
7172
<motion.div
7273
initial={{ opacity: 0 }}
7374
animate={{ opacity: 1 }}
7475
exit={{ opacity: 0 }}
7576
onClick={closeSidePanel}
76-
className="fixed inset-0 bg-black/50 z-[60] backdrop-blur-sm"
77+
className="fixed inset-0 bg-black/80 backdrop-blur-md z-[100]"
7778
/>
7879

7980
<motion.div
@@ -83,34 +84,58 @@ const SidePanel = () => {
8384
variants={variants}
8485
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
8586
style={{ width: panelWidth }}
86-
className="fixed top-0 right-0 h-full bg-gray-900 border-l border-gray-700 shadow-[-10px_0_30px_-10px_rgba(0,0,0,0.5)] z-[70] flex flex-col overflow-hidden"
87+
className="fixed top-0 right-0 h-full bg-[#050505] border-l border-white/10 shadow-2xl z-[110] flex flex-col overflow-hidden"
8788
>
89+
{/* Background Art */}
90+
<div className="absolute inset-0 opacity-[0.03] pointer-events-none grayscale">
91+
<GenerativeArt seed={panelTitle} className="w-full h-full" />
92+
</div>
93+
8894
{/* Resize Handle */}
8995
<div
9096
onMouseDown={(e) => {
9197
setIsResizing(true);
9298
e.preventDefault();
9399
}}
94-
className="absolute left-0 top-0 bottom-0 w-1.5 cursor-ew-resize hover:bg-primary-500/50 transition-colors z-50"
95-
title="Drag to resize"
100+
className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-emerald-500/50 transition-colors z-[120]"
101+
title="DRAG_TO_RESIZE"
96102
/>
97103

98104
{/* Header */}
99-
<div className="flex items-center justify-between p-6 border-b border-gray-800">
100-
<h2 className="text-xl font-mono font-bold text-gray-100 truncate pr-4">
101-
{panelTitle}
102-
</h2>
105+
<div className="relative z-10 flex items-center justify-between p-8 border-b border-white/10 bg-black/40">
106+
<div className="flex flex-col gap-1 min-w-0 pr-4">
107+
<span className="font-mono text-[9px] text-emerald-500 uppercase tracking-[0.3em] font-bold">
108+
System_Panel_Node
109+
</span>
110+
<h2 className="text-2xl font-black font-mono tracking-tighter text-white uppercase italic leading-none truncate">
111+
{panelTitle}
112+
</h2>
113+
</div>
103114
<button
104115
onClick={closeSidePanel}
105-
className="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-full transition-colors flex-shrink-0"
116+
className="p-2 text-gray-500 hover:text-white transition-colors flex-shrink-0"
106117
>
107-
<XIcon size={20} />
118+
<XIcon size={24} weight="bold" />
108119
</button>
109120
</div>
110121

111-
{/* Content */}
112-
<div className="flex-1 overflow-y-auto p-6 text-gray-300 font-mono">
113-
{panelContent}
122+
{/* Content Area */}
123+
<div className="relative z-10 flex-1 overflow-y-auto p-8 custom-scrollbar text-white">
124+
<div className="space-y-8">
125+
{panelContent}
126+
</div>
127+
</div>
128+
129+
{/* Panel Footer */}
130+
<div className="relative z-10 p-6 border-t border-white/10 bg-black/40 flex items-center justify-between">
131+
<div className="flex items-center gap-3 text-gray-600 font-mono text-[9px] uppercase tracking-[0.2em]">
132+
<InfoIcon weight="fill" size={14} className="text-emerald-500/50" />
133+
<span>Buffer_Active // {Math.round(panelWidth)}PX</span>
134+
</div>
135+
<div className="flex gap-2">
136+
<div className="w-1.5 h-1.5 bg-emerald-500 animate-pulse rounded-full" />
137+
<div className="w-1.5 h-1.5 bg-white/10 rounded-full" />
138+
</div>
114139
</div>
115140
</motion.div>
116141
</>
@@ -119,4 +144,4 @@ const SidePanel = () => {
119144
);
120145
};
121146

122-
export default SidePanel;
147+
export default SidePanel;

‎src/pages/BrufezPage.js‎

Lines changed: 85 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import ProjectCard from '../components/ProjectCard';
3131
import LogCard from '../components/LogCard';
3232
import PostTile from '../components/PostTile';
3333
import RoadmapCard from '../components/roadmap/RoadmapCard';
34+
import {useSidePanel} from '../context/SidePanelContext';
3435

3536
const mockProject = {
3637
id: 'fez-99',
@@ -78,11 +79,32 @@ const BrufezPage = () => {
7879
});
7980

8081
const {addToast} = useToast();
82+
const {openSidePanel} = useSidePanel();
8183
const [isDialogOpen, setIsDialogOpen] = useState(false);
8284
const [isModalOpen, setIsModalOpen] = useState(false);
8385
const [dropdownVal, setDropdownVal] = useState('option_01');
8486
const [sliderVal, setSliderVal] = useState(50);
8587

88+
const demoSidePanel = () => {
89+
openSidePanel(
90+
'SIDE_PROTOCOL_ALPHA',
91+
<div className="space-y-8">
92+
<div className="p-6 border border-emerald-500/20 bg-emerald-500/5">
93+
<h4 className="text-emerald-400 font-black uppercase tracking-tighter m-0">Live_Data_Buffer</h4>
94+
<p className="text-[10px] font-mono text-gray-500 uppercase mt-2">Telemetry stream synchronized with local host.</p>
95+
</div>
96+
<p className="text-sm font-mono text-gray-400 uppercase leading-relaxed">
97+
The SidePanel component provides a high-density vertical axis for auxiliary process controls and detailed systemic information without losing context of the primary matrix.
98+
</p>
99+
<div className="grid grid-cols-1 gap-4">
100+
<div className="h-1 bg-white/5" />
101+
<div className="h-1 bg-white/10" />
102+
<div className="h-1 bg-emerald-500/20" />
103+
</div>
104+
</div>
105+
);
106+
};
107+
86108
return (
87109
<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30 font-sans pb-32">
88110
<div className="mx-auto max-w-7xl px-6 py-24 md:px-12">
@@ -140,30 +162,66 @@ const BrufezPage = () => {
140162
{/* LEFT COLUMN */}
141163
<div className="lg:col-span-7 space-y-20">
142164

143-
{/* Philosophy Section */}
144-
<section className="space-y-8">
145-
<h3 className="font-mono text-[10px] font-bold text-emerald-500 uppercase tracking-[0.4em] flex items-center gap-2">
146-
<FlaskIcon weight="fill"/>
147-
01_CORE_PHILOSOPHY
148-
</h3>
149-
<div className="prose prose-invert max-w-none">
150-
<p className="text-xl text-gray-300 font-light leading-relaxed">
151-
Brufez is a departure from the "soft" web. It rejects rounded corners, subtle gradients, and hidden structures.
152-
Instead, it embraces the machine—making the grid visible, the processes transparent, and the feedback absolute.
153-
</p>
154-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
155-
<div className="p-6 border border-white/10 bg-white/5 space-y-4">
156-
<h4 className="text-white uppercase font-black tracking-tighter text-lg m-0">Structural Logic</h4>
157-
<p className="text-xs text-gray-400 font-mono uppercase m-0">If it exists, it must be bounded. Borders are 1PX solid, highlighting the layout hierarchy.</p>
158-
</div>
159-
<div className="p-6 border border-emerald-500/20 bg-emerald-500/5 space-y-4">
160-
<h4 className="text-emerald-400 uppercase font-black tracking-tighter text-lg m-0">Active Feedback</h4>
161-
<p className="text-xs text-gray-400 font-mono uppercase m-0">System states are communicated via color shifts and high-frequency animations (pulses, glitters).</p>
162-
</div>
163-
</div>
164-
</div>
165-
</section>
165+
{/* Philosophy Section */}
166+
<section className="space-y-8">
167+
<h3 className="font-mono text-[10px] font-bold text-emerald-500 uppercase tracking-[0.4em] flex items-center gap-2">
168+
<FlaskIcon weight="fill"/>
169+
01_CORE_PHILOSOPHY
170+
</h3>
171+
<div className="prose prose-invert max-w-none">
172+
<p className="text-xl text-gray-300 font-light leading-relaxed">
173+
Brufez is a departure from the "soft" web. It rejects rounded corners, subtle gradients, and hidden structures.
174+
Instead, it embraces the machine—making the grid visible, the processes transparent, and the feedback absolute.
175+
</p>
176+
177+
<div className="mt-12 space-y-12">
178+
<div className="space-y-4">
179+
<h4 className="text-white uppercase font-black tracking-tighter text-2xl m-0 flex items-center gap-4">
180+
<span className="text-emerald-500 font-mono text-sm">[01]</span> Geometric_Rigidity
181+
</h4>
182+
<p className="text-sm text-gray-400 leading-relaxed font-sans m-0">
183+
Structure is defined by hard 1PX boundaries. We avoid soft shadows and deep elevations. Every component is anchored to a
184+
mathematical grid, emphasizing the "raw" construction of the interface. Corners are sharp (0-2px radius), maintaining a
185+
structural integrity that feels like physical hardware.
186+
</p>
187+
</div>
188+
189+
<div className="space-y-4">
190+
<h4 className="text-white uppercase font-black tracking-tighter text-2xl m-0 flex items-center gap-4">
191+
<span className="text-emerald-500 font-mono text-sm">[02]</span> Chromatic_Absolutism
192+
</h4>
193+
<p className="text-sm text-gray-400 leading-relaxed font-sans m-0">
194+
The palette is restricted to a high-density black (<span className="text-white font-mono">#050505</span>) and a high-frequency
195+
Emerald (<span className="text-emerald-500 font-mono">#10B981</span>). This dual-tone hierarchy creates extreme contrast,
196+
ensuring that "system signals" are immediately distinguishable from static data. Supplemental tones (Rose, Amber) are
197+
reserved exclusively for critical failure or warning states.
198+
</p>
199+
</div>
200+
201+
<div className="space-y-4">
202+
<h4 className="text-white uppercase font-black tracking-tighter text-2xl m-0 flex items-center gap-4">
203+
<span className="text-emerald-500 font-mono text-sm">[03]</span> Systemic_Transparency
204+
</h4>
205+
<p className="text-sm text-gray-400 leading-relaxed font-sans m-0">
206+
Brufez does not hide metadata. Version IDs, process status, and local timestamps are primary UI elements. We use
207+
<span className="text-emerald-400 font-mono"> UPPER_SNAKE_CASE</span> and system syntax (//, ::, []) to treat human-readable
208+
text as structured logs, reinforcing the feeling of interacting directly with a digital kernel.
209+
</p>
210+
</div>
211+
</div>
166212

213+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-16">
214+
<div className="p-6 border border-white/10 bg-white/5 space-y-4">
215+
<h4 className="text-white uppercase font-black tracking-tighter text-lg m-0">Structural Logic</h4>
216+
<p className="text-xs text-gray-400 font-mono uppercase m-0">If it exists, it must be bounded. Borders are 1PX solid, highlighting the layout hierarchy.</p>
217+
</div>
218+
<div className="p-6 border border-emerald-500/20 bg-emerald-500/5 space-y-4">
219+
<h4 className="text-emerald-400 uppercase font-black tracking-tighter text-lg m-0">Active Feedback</h4>
220+
<p className="text-xs text-gray-400 font-mono uppercase m-0">System states are communicated via color shifts and high-frequency animations (pulses, glitters).</p>
221+
</div>
222+
</div>
223+
</div>
224+
</section>
167225
{/* Interactive Components */}
168226
<section className="space-y-8">
169227
<h3 className="font-mono text-[10px] font-bold text-gray-500 uppercase tracking-[0.4em] flex items-center gap-2">
@@ -335,13 +393,16 @@ const BrufezPage = () => {
335393
</button>
336394
</div> </div>
337395

338-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
396+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
339397
<button onClick={() => setIsDialogOpen(true)} className="py-4 border border-white/10 hover:bg-white hover:text-black transition-all font-mono text-[10px] uppercase tracking-widest">
340398
Invoke_Dialog
341399
</button>
342400
<button onClick={() => setIsModalOpen(true)} className="py-4 border border-white/10 hover:bg-white hover:text-black transition-all font-mono text-[10px] uppercase tracking-widest">
343401
Invoke_Modal
344402
</button>
403+
<button onClick={demoSidePanel} className="py-4 border border-white/10 hover:bg-white hover:text-black transition-all font-mono text-[10px] uppercase tracking-widest">
404+
Invoke_Side_Panel
405+
</button>
345406
</div>
346407
</div>
347408
</section>

0 commit comments

Comments
 (0)