Skip to content

Commit 3930a41

Browse files
fezcodefezcode
committed
feat: new codemodals
1 parent add3ff6 commit 3930a41

File tree

3 files changed

+234
-102
lines changed

3 files changed

+234
-102
lines changed

‎src/components/BrutalistCodeModal.jsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, { useEffect } from 'react';
2+
import { createPortal } from 'react-dom';
3+
import { X, Code } from '@phosphor-icons/react';
4+
import { motion, AnimatePresence } from 'framer-motion';
5+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
6+
import { customTheme } from '../utils/customTheme';
7+
import GenerativeArt from './GenerativeArt';
8+
9+
const BrutalistCodeModal = ({ isOpen, onClose, children, language }) => {
10+
useEffect(() => {
11+
if (isOpen) {
12+
document.body.style.overflow = 'hidden';
13+
} else {
14+
document.body.style.overflow = '';
15+
}
16+
return () => {
17+
document.body.style.overflow = '';
18+
};
19+
}, [isOpen]);
20+
21+
return createPortal(
22+
<AnimatePresence>
23+
{isOpen && (
24+
<motion.div
25+
className="fixed inset-0 bg-black/90 backdrop-blur-sm flex justify-center items-center z-[1000] p-4 md:p-8"
26+
onClick={onClose}
27+
initial={{ opacity: 0 }}
28+
animate={{ opacity: 1 }}
29+
exit={{ opacity: 0 }}
30+
>
31+
<motion.div
32+
className="relative bg-[#050505] border border-white/10 rounded-sm shadow-2xl w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden group"
33+
onClick={(e) => e.stopPropagation()}
34+
initial={{ scale: 0.95, opacity: 0, y: 20 }}
35+
animate={{ scale: 1, opacity: 1, y: 0 }}
36+
exit={{ scale: 0.95, opacity: 0, y: 20 }}
37+
transition={{ duration: 0.3, ease: 'circOut' }}
38+
>
39+
<div className="absolute inset-0 opacity-[0.03] pointer-events-none grayscale">
40+
<GenerativeArt seed="CODE_MODAL" className="w-full h-full" />
41+
</div>
42+
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-white/[0.02] z-10">
43+
<div className="flex items-center gap-3">
44+
<Code size={20} className="text-emerald-500" weight="fill" />
45+
<span className="font-mono text-xs font-bold uppercase tracking-[0.2em] text-gray-400">
46+
Code_Viewer
47+
<span className="text-gray-600 mx-2">::</span>
48+
<span className="text-emerald-500">{language || 'TEXT'}</span>
49+
</span>
50+
</div>
51+
<button
52+
onClick={onClose}
53+
className="group p-2 hover:bg-red-500/10 border border-transparent hover:border-red-500/50 transition-all rounded-sm"
54+
>
55+
<X size={20} className="text-gray-500 group-hover:text-red-500 transition-colors" />
56+
</button>
57+
</div>
58+
59+
<div className="flex-1 overflow-auto relative z-10 custom-scrollbar bg-black/40 text-gray-300">
60+
<SyntaxHighlighter
61+
style={customTheme}
62+
language={language}
63+
PreTag="div"
64+
customStyle={{
65+
margin: 0,
66+
padding: '1.5rem',
67+
background: 'transparent',
68+
height: '100%',
69+
fontFamily: '"JetBrains Mono", monospace',
70+
fontSize: '0.9rem',
71+
}}
72+
showLineNumbers={true}
73+
lineNumberStyle={{
74+
minWidth: '2.5em',
75+
paddingRight: '1.5em',
76+
color: '#333',
77+
textAlign: 'right',
78+
fontFamily: '"JetBrains Mono", monospace'
79+
}}
80+
codeTagProps={{
81+
style: { fontFamily: "'JetBrains Mono', monospace" },
82+
}}
83+
>
84+
{children}
85+
</SyntaxHighlighter>
86+
</div>
87+
88+
<div className="px-6 py-2 border-t border-white/10 bg-white/[0.02] flex justify-between items-center z-10">
89+
<span className="font-mono text-[10px] text-gray-600 uppercase tracking-widest">
90+
ReadOnly Mode
91+
</span>
92+
<span className="font-mono text-[10px] text-emerald-500/50 uppercase tracking-widest">
93+
• Connected
94+
</span>
95+
</div>
96+
</motion.div>
97+
</motion.div>
98+
)}
99+
</AnimatePresence>,
100+
document.body
101+
);
102+
};
103+
104+
export default BrutalistCodeModal;

‎src/components/CodeModal.jsx‎

Lines changed: 11 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,16 @@
1-
import React, { useEffect } from 'react';
2-
import { X, Code } from '@phosphor-icons/react';
3-
import { motion, AnimatePresence } from 'framer-motion';
4-
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
5-
import { customTheme } from '../utils/customTheme';
6-
import GenerativeArt from './GenerativeArt';
1+
import React from 'react';
2+
import { useVisualSettings } from '../context/VisualSettingsContext';
3+
import BrutalistCodeModal from './BrutalistCodeModal';
4+
import LuxeCodeModal from './LuxeCodeModal';
75

8-
const CodeModal = ({ isOpen, onClose, children, language }) => {
9-
useEffect(() => {
10-
if (isOpen) {
11-
document.body.style.overflow = 'hidden';
12-
} else {
13-
document.body.style.overflow = '';
14-
}
15-
return () => {
16-
document.body.style.overflow = '';
17-
};
18-
}, [isOpen]);
6+
const CodeModal = (props) => {
7+
const { fezcodexTheme } = useVisualSettings();
198

20-
return (
21-
<AnimatePresence>
22-
{isOpen && (
23-
<motion.div
24-
className="fixed inset-0 bg-black/90 backdrop-blur-sm flex justify-center items-center z-50 p-4 md:p-8"
25-
onClick={onClose}
26-
initial={{ opacity: 0 }}
27-
animate={{ opacity: 1 }}
28-
exit={{ opacity: 0 }}
29-
>
30-
<motion.div
31-
className="relative bg-[#050505] border border-white/10 rounded-sm shadow-2xl w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden group"
32-
onClick={(e) => e.stopPropagation()}
33-
initial={{ scale: 0.95, opacity: 0, y: 20 }}
34-
animate={{ scale: 1, opacity: 1, y: 0 }}
35-
exit={{ scale: 0.95, opacity: 0, y: 20 }}
36-
transition={{ duration: 0.3, ease: 'circOut' }}
37-
>
38-
{/* Background Art */}
39-
<div className="absolute inset-0 opacity-[0.03] pointer-events-none">
40-
<GenerativeArt seed="CODE_MODAL" className="w-full h-full" />
41-
</div>
42-
{/* Header */}
43-
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-white/[0.02] z-10">
44-
<div className="flex items-center gap-3">
45-
<Code size={20} className="text-emerald-500" weight="fill" />
46-
<span className="font-mono text-xs font-bold uppercase tracking-[0.2em] text-gray-400">
47-
Code_Viewer
48-
<span className="text-gray-600 mx-2">::</span>
49-
<span className="text-emerald-500">{language || 'TEXT'}</span>
50-
</span>
51-
</div>
52-
<button
53-
onClick={onClose}
54-
className="group p-2 hover:bg-red-500/10 border border-transparent hover:border-red-500/50 transition-all rounded-sm"
55-
>
56-
<X size={20} className="text-gray-500 group-hover:text-red-500 transition-colors" />
57-
</button>
58-
</div>
9+
if (fezcodexTheme === 'luxe') {
10+
return <LuxeCodeModal {...props} />;
11+
}
5912

60-
{/* Content */}
61-
<div className="flex-1 overflow-auto relative z-10 custom-scrollbar bg-black/40 text-gray-300">
62-
<SyntaxHighlighter
63-
style={customTheme}
64-
language={language}
65-
PreTag="div"
66-
customStyle={{
67-
margin: 0,
68-
padding: '1.5rem',
69-
background: 'transparent',
70-
height: '100%',
71-
fontFamily: '"JetBrains Mono", monospace',
72-
fontSize: '0.9rem', // equivalent to text-sm
73-
}}
74-
showLineNumbers={true}
75-
lineNumberStyle={{
76-
minWidth: '2.5em',
77-
paddingRight: '1.5em',
78-
color: '#333',
79-
textAlign: 'right',
80-
fontFamily: '"JetBrains Mono", monospace'
81-
}}
82-
codeTagProps={{
83-
style: { fontFamily: "'JetBrains Mono', monospace" },
84-
}}
85-
>
86-
{children}
87-
</SyntaxHighlighter>
88-
</div>
89-
90-
{/* Footer Status Bar */}
91-
<div className="px-6 py-2 border-t border-white/10 bg-white/[0.02] flex justify-between items-center z-10">
92-
<span className="font-mono text-[10px] text-gray-600 uppercase tracking-widest">
93-
ReadOnly Mode
94-
</span>
95-
<span className="font-mono text-[10px] text-emerald-500/50 uppercase tracking-widest">
96-
• Connected
97-
</span>
98-
</div>
99-
100-
</motion.div>
101-
</motion.div>
102-
)}
103-
</AnimatePresence>
104-
);
13+
return <BrutalistCodeModal {...props} />;
10514
};
10615

107-
export default CodeModal;
16+
export default CodeModal;

‎src/components/LuxeCodeModal.jsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React, { useEffect } from 'react';
2+
import { createPortal } from 'react-dom';
3+
import { X, Code, ClipboardText } from '@phosphor-icons/react';
4+
import { motion, AnimatePresence } from 'framer-motion';
5+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
6+
import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
7+
import LuxeArt from './LuxeArt';
8+
import { useToast } from '../hooks/useToast';
9+
10+
const LuxeCodeModal = ({ isOpen, onClose, children, language }) => {
11+
const { addToast } = useToast();
12+
13+
useEffect(() => {
14+
if (isOpen) {
15+
document.body.style.overflow = 'hidden';
16+
} else {
17+
document.body.style.overflow = '';
18+
}
19+
return () => {
20+
document.body.style.overflow = '';
21+
};
22+
}, [isOpen]);
23+
24+
const handleCopy = () => {
25+
navigator.clipboard.writeText(children).then(() => {
26+
addToast({
27+
title: 'Archive Synchronized',
28+
message: 'Code snippet copied to local clipboard.',
29+
type: 'success'
30+
});
31+
});
32+
};
33+
34+
return createPortal(
35+
<AnimatePresence>
36+
{isOpen && (
37+
<motion.div
38+
className="fixed inset-0 bg-[#F5F5F0]/95 backdrop-blur-md flex justify-center items-center z-[1000] p-4 md:p-12"
39+
onClick={onClose}
40+
initial={{ opacity: 0 }}
41+
animate={{ opacity: 1 }}
42+
exit={{ opacity: 0 }}
43+
>
44+
<motion.div
45+
className="relative bg-white border border-black/5 rounded-sm shadow-[0_40px_120px_-20px_rgba(0,0,0,0.2)] w-full max-w-6xl h-[85vh] flex flex-col overflow-hidden"
46+
onClick={(e) => e.stopPropagation()}
47+
initial={{ scale: 0.98, opacity: 0, y: 20 }}
48+
animate={{ scale: 1, opacity: 1, y: 0 }}
49+
exit={{ scale: 0.98, opacity: 0, y: 20 }}
50+
transition={{ type: "spring", damping: 35, stiffness: 200 }}
51+
>
52+
<div className="absolute inset-0 opacity-[0.03] pointer-events-none">
53+
<LuxeArt seed="CODE_EXPANSION" className="w-full h-full mix-blend-multiply" />
54+
</div>
55+
56+
{/* Header */}
57+
<div className="relative z-10 flex items-center justify-between p-6 md:p-8 border-b border-black/5 bg-[#FAFAF8]">
58+
<div className="flex flex-col">
59+
<span className="font-outfit text-[9px] uppercase tracking-[0.4em] text-[#8D4004] font-bold">
60+
Technical Specification
61+
</span>
62+
<h2 className="font-playfairDisplay italic text-2xl text-[#1A1A1A] flex items-center gap-3">
63+
<Code size={24} weight="light" className="text-[#8D4004]" />
64+
{language?.toUpperCase() || 'SOURCE'}
65+
</h2>
66+
</div>
67+
68+
<div className="flex items-center gap-4">
69+
<button
70+
onClick={handleCopy}
71+
className="flex items-center gap-2 px-5 py-2 bg-white hover:bg-[#1A1A1A] text-[#1A1A1A]/60 hover:text-white border border-black/10 rounded-full transition-all text-[10px] uppercase tracking-widest font-bold"
72+
>
73+
<ClipboardText size={16} /> Copy
74+
</button>
75+
<button
76+
onClick={onClose}
77+
className="group p-2 text-[#1A1A1A]/20 hover:text-[#8D4004] transition-colors"
78+
>
79+
<X size={24} weight="light" />
80+
</button>
81+
</div>
82+
</div>
83+
84+
{/* Content */}
85+
<div className="flex-1 overflow-auto relative z-10 custom-scrollbar bg-white p-2">
86+
<SyntaxHighlighter
87+
style={coy}
88+
language={language}
89+
PreTag="div"
90+
customStyle={{
91+
margin: 0,
92+
padding: '2rem',
93+
background: 'transparent',
94+
fontSize: '0.95rem',
95+
lineHeight: '1.7'
96+
}}
97+
showLineNumbers={true}
98+
>
99+
{children}
100+
</SyntaxHighlighter>
101+
</div>
102+
103+
{/* Footer */}
104+
<div className="relative z-10 px-8 py-3 border-t border-black/5 bg-[#FAFAF8] flex justify-between items-center font-outfit text-[9px] uppercase tracking-[0.3em] text-black/20">
105+
<span>Refined Syntax Presentation</span>
106+
<div className="flex items-center gap-2">
107+
<span className="w-1 h-1 bg-[#8D4004]/30 rounded-full animate-pulse" />
108+
<span>Archive Online</span>
109+
</div>
110+
</div>
111+
</motion.div>
112+
</motion.div>
113+
)}
114+
</AnimatePresence>,
115+
document.body
116+
);
117+
};
118+
119+
export default LuxeCodeModal;

0 commit comments

Comments
 (0)