Skip to content

Commit b6b21d9

Browse files
fezcodefezcode
committed
feat(terracotta): add TerracottaCodeModal component
1 parent f26cd34 commit b6b21d9

1 file changed

Lines changed: 101 additions & 0 deletions

File tree

‎src/components/TerracottaCodeModal.jsx‎

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

0 commit comments

Comments
 (0)