Skip to content

Commit acb8641

Browse files
fezcodefezcode
committed
fix: transmissions.piml and friends page
1 parent 1f9123f commit acb8641

File tree

2 files changed

+131
-26
lines changed

2 files changed

+131
-26
lines changed

‎src/components/BrutalistModal.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
22
import { motion, AnimatePresence } from 'framer-motion';
33
import { XIcon } from '@phosphor-icons/react';
44

5-
const BrutalistModal = ({ isOpen, onClose, title, children }) => {
5+
const BrutalistModal = ({ isOpen, onClose, title, children, maxWidth = 'max-w-xl' }) => {
66
useEffect(() => {
77
const handleKeyDown = (event) => {
88
if (event.key === 'Escape' && isOpen) {
@@ -41,7 +41,7 @@ const BrutalistModal = ({ isOpen, onClose, title, children }) => {
4141
animate={{ opacity: 1, scale: 1, y: 0 }}
4242
exit={{ opacity: 0, scale: 0.95, y: 20 }}
4343
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
44-
className="relative w-full max-w-xl bg-[#050505] border border-white/10 rounded-sm shadow-2xl overflow-hidden flex flex-col"
44+
className={`relative w-full ${maxWidth} bg-[#050505] border border-white/10 rounded-sm shadow-2xl overflow-hidden flex flex-col`}
4545
onClick={(e) => e.stopPropagation()}
4646
>
4747
<div className="flex items-center justify-between p-6 border-b border-white/10 bg-white/[0.02]">

‎src/pages/FriendsPage.jsx‎

Lines changed: 129 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Broadcast,
77
BookOpen,
88
Users,
9+
ArrowSquareOut,
910
} from '@phosphor-icons/react';
1011
import piml from 'piml';
1112
import Seo from '../components/Seo';
@@ -42,17 +43,29 @@ const FriendsPage = () => {
4243

4344
const getCategoryIcon = (key) => {
4445
switch (key) {
45-
case 'friends': return <Users size={32} weight="duotone" className="text-emerald-500" />;
46-
case 'books': return <BookOpen size={32} weight="duotone" className="text-cyan-500" />;
47-
default: return <Broadcast size={32} weight="duotone" className="text-rose-500" />;
46+
case 'friends':
47+
return (
48+
<Users size={32} weight="duotone" className="text-emerald-500" />
49+
);
50+
case 'books':
51+
return (
52+
<BookOpen size={32} weight="duotone" className="text-cyan-500" />
53+
);
54+
default:
55+
return (
56+
<Broadcast size={32} weight="duotone" className="text-rose-500" />
57+
);
4858
}
4959
};
5060

5161
const getCategoryLabel = (key) => {
5262
switch (key) {
53-
case 'friends': return 'Parallel Realities';
54-
case 'books': return 'Archive Access';
55-
default: return key.charAt(0).toUpperCase() + key.slice(1);
63+
case 'friends':
64+
return 'Parallel Realities';
65+
case 'books':
66+
return 'Archive Access';
67+
default:
68+
return key.charAt(0).toUpperCase() + key.slice(1);
5669
}
5770
};
5871

@@ -63,8 +76,13 @@ const FriendsPage = () => {
6376
description="A curated list of signals, portals, and archives from the digital garden."
6477
/>
6578
{/* Structural Grid Background */}
66-
<div className="fixed inset-0 opacity-[0.05] pointer-events-none"
67-
style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '100px 100px' }}
79+
<div
80+
className="fixed inset-0 opacity-[0.05] pointer-events-none"
81+
style={{
82+
backgroundImage:
83+
'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)',
84+
backgroundSize: '100px 100px',
85+
}}
6886
/>
6987

7088
{/* Decorative Art Background - Increased visibility */}
@@ -77,16 +95,88 @@ const FriendsPage = () => {
7795
<motion.div
7896
initial={{ y: -100 }}
7997
animate={{ y: '100vh' }}
80-
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
98+
transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}
8199
className="w-full h-24 bg-gradient-to-b from-transparent via-emerald-500/10 to-transparent"
82100
/>
83101
</div>
84102

85103
<BrutalistModal
86104
isOpen={isModalOpen}
87105
onClose={() => setIsModalOpen(false)}
88-
item={selectedItem}
89-
/>
106+
maxWidth="max-w-4xl"
107+
title={
108+
<span className="font-playfairDisplay font-bold normal-case text-3xl">
109+
{selectedItem?.title}
110+
</span>
111+
}
112+
>
113+
{' '}
114+
<div className="flex flex-col md:flex-row -m-8 min-h-[400px]">
115+
{/* Left Side: All Generative Art */}
116+
<div className="w-full md:w-5/12 border-b md:border-b-0 md:border-r border-white/10 relative overflow-hidden bg-black">
117+
<div className="absolute inset-0 z-0">
118+
<GenerativeArt
119+
seed={selectedItem?.title || 'void'}
120+
className="w-full h-full"
121+
/>
122+
</div>
123+
{/* Aesthetic Overlays */}
124+
<div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent pointer-events-none" />
125+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none" />
126+
</div>
127+
128+
{/* Right Side: Detailed Transmission Data */}
129+
<div className="w-full md:w-7/12 p-10 flex flex-col bg-[#050505] relative">
130+
<div className="mb-8">
131+
<div className="flex items-center gap-3 mb-4">
132+
<div className="w-8 h-[1px] bg-emerald-500" />
133+
<span className="font-mono text-[10px] uppercase tracking-[0.4em] text-emerald-500/70">
134+
Secure Transmission
135+
</span>
136+
</div>
137+
138+
{selectedItem?.author && (
139+
<p className="font-mono text-xs uppercase tracking-[0.2em] text-gray-500 border-l border-emerald-500/30 pl-4 py-1">
140+
Origin: {selectedItem.author}
141+
</p>
142+
)}
143+
</div>
144+
145+
<div className="flex-grow">
146+
{selectedItem?.description && (
147+
<p className="font-garamond text-xl md:text-2xl text-gray-300 leading-relaxed opacity-90">
148+
"{selectedItem.description}"
149+
</p>
150+
)}
151+
</div>
152+
153+
{selectedItem?.url && (
154+
<div className="mt-12 pt-8 border-t border-white/5">
155+
<a
156+
href={selectedItem.url}
157+
target="_blank"
158+
rel="noopener noreferrer"
159+
className="group flex items-center justify-between w-full p-4 bg-emerald-950/30 border border-emerald-500/30 hover:bg-emerald-500 hover:border-emerald-500 hover:text-black transition-all duration-300"
160+
>
161+
<span className="font-mono text-xs font-bold uppercase tracking-[0.2em] text-emerald-500 group-hover:text-black transition-colors">
162+
Establish Portal Connection
163+
</span>
164+
<ArrowSquareOut
165+
size={20}
166+
weight="bold"
167+
className="text-emerald-500 group-hover:text-black group-hover:translate-x-1 transition-all"
168+
/>
169+
</a>
170+
</div>
171+
)}
172+
173+
{/* Subtle Corner Decoration */}
174+
<div className="absolute bottom-4 right-4 opacity-10 pointer-events-none">
175+
<Broadcast size={40} weight="thin" className="text-emerald-500" />
176+
</div>
177+
</div>
178+
</div>
179+
</BrutalistModal>
90180

91181
<div className="relative z-10">
92182
{/* Navigation */}
@@ -99,7 +189,10 @@ const FriendsPage = () => {
99189
onClick={() => navigate(-1)}
100190
className="group flex items-center gap-3 text-gray-500 hover:text-white transition-all duration-300 font-mono text-xs uppercase tracking-[0.3em] bg-white/5 px-4 py-2 border border-white/10 hover:border-emerald-500/50"
101191
>
102-
<ArrowLeft weight="bold" className="group-hover:-translate-x-1 transition-transform" />
192+
<ArrowLeft
193+
weight="bold"
194+
className="group-hover:-translate-x-1 transition-transform"
195+
/>
103196
<span>Return to Archive</span>
104197
</button>
105198
<div className="h-px flex-grow bg-white/10" />
@@ -109,10 +202,12 @@ const FriendsPage = () => {
109202
<header className="mb-32 relative">
110203
<div className="absolute -left-12 top-0 bottom-0 w-1 bg-emerald-500 hidden xl:block" />
111204
<h1 className="text-7xl md:text-9xl font-black font-playfairDisplay italic uppercase tracking-tighter mb-6 leading-none">
112-
<span className="text-emerald-500">Friends</span> of the <span className="text-lime-500">Show</span>
205+
<span className="text-emerald-500">Friends</span> of the{' '}
206+
<span className="text-lime-500">Show</span>
113207
</h1>
114208
<p className="text-xl md:text-2xl text-gray-500 font-arvo max-w-2xl leading-relaxed border-l-2 border-white/10 pl-6">
115-
Signals from parallel realities and archived transmissions from the digital garden.
209+
Signals from parallel realities and archived transmissions from
210+
the digital garden.
116211
</p>
117212
</header>
118213

@@ -121,8 +216,14 @@ const FriendsPage = () => {
121216
let items = [];
122217
if (Array.isArray(content)) {
123218
items = content;
124-
} else if (content && typeof content === 'object' && content.item) {
125-
items = Array.isArray(content.item) ? content.item : [content.item];
219+
} else if (
220+
content &&
221+
typeof content === 'object' &&
222+
content.item
223+
) {
224+
items = Array.isArray(content.item)
225+
? content.item
226+
: [content.item];
126227
}
127228

128229
if (items.length === 0) return null;
@@ -138,14 +239,18 @@ const FriendsPage = () => {
138239
>
139240
<div className="flex items-center gap-8">
140241
<div className="p-6 bg-white/5 border border-white/10 rounded-sm relative group overflow-hidden">
141-
<div className="absolute inset-0 bg-emerald-500/0 group-hover:bg-emerald-500/5 transition-colors" />
142-
{getCategoryIcon(key)}
242+
<div className="absolute inset-0 bg-emerald-500/0 group-hover:bg-emerald-500/5 transition-colors" />
243+
{getCategoryIcon(key)}
143244
</div>
144245
<div className="flex-grow">
145246
<div className="flex items-center gap-4 mb-2">
146-
<h2 className="text-4xl md:text-6xl font-normal font-playfairDisplay uppercase tracking-tighter">{getCategoryLabel(key)}</h2>
247+
<h2 className="text-4xl md:text-6xl font-normal font-playfairDisplay uppercase tracking-tighter">
248+
{getCategoryLabel(key)}
249+
</h2>
147250
<div className="h-px flex-grow bg-white/10" />
148-
<span className="font-mono text-[10px] text-emerald-500/50 uppercase tracking-[0.2em]">Section_{idx + 1}</span>
251+
<span className="font-mono text-[10px] text-emerald-500/50 uppercase tracking-[0.2em]">
252+
Section_{idx + 1}
253+
</span>
149254
</div>
150255
<p className="text-xs font-mono text-gray-500 uppercase tracking-[0.4em]">
151256
Transmissions detected in the {key} sector.
@@ -171,15 +276,15 @@ const FriendsPage = () => {
171276

172277
<footer className="mt-64 pt-24 border-t border-white/10 relative">
173278
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-8 bg-[#050505]">
174-
<Broadcast size={32} className="text-emerald-500 animate-pulse" />
279+
<Broadcast size={32} className="text-emerald-500 animate-pulse" />
175280
</div>
176281
<p className="font-mono text-[10px] text-gray-600 uppercase tracking-[0.5em] text-center mb-4">
177282
End of Line // Transmission Terminated
178283
</p>
179284
<div className="flex justify-center gap-12 opacity-20">
180-
{[...Array(6)].map((_, i) => (
181-
<div key={i} className="w-1 h-1 bg-white rounded-full" />
182-
))}
285+
{[...Array(6)].map((_, i) => (
286+
<div key={i} className="w-1 h-1 bg-white rounded-full" />
287+
))}
183288
</div>
184289
</footer>
185290
</div>

0 commit comments

Comments
 (0)