Skip to content

Commit a7b8cb2

Browse files
fezcodefezcode
committed
feat: new layout and modals
1 parent 64e7863 commit a7b8cb2

File tree

3 files changed

+114
-12
lines changed

3 files changed

+114
-12
lines changed

‎src/components/ContactModal.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import {
66
GithubLogoIcon,
77
GlobeIcon,
88
RedditLogoIcon,
9+
ArrowUpRightIcon,
910
} from '@phosphor-icons/react';
1011
import GenericModal from './GenericModal';
12+
import LuxeModal from './LuxeModal';
1113
import { useSiteConfig } from '../context/SiteConfigContext';
14+
import { useVisualSettings } from '../context/VisualSettingsContext';
1215

1316
const socialIcons = {
1417
GithubLogo: GithubLogoIcon,
@@ -20,6 +23,35 @@ const socialIcons = {
2023

2124
const ContactModal = ({ isOpen, onClose }) => {
2225
const { config } = useSiteConfig();
26+
const { fezcodexTheme } = useVisualSettings();
27+
28+
if (fezcodexTheme === 'luxe') {
29+
return (
30+
<LuxeModal isOpen={isOpen} onClose={onClose} title="Establish Contact">
31+
<div className="flex flex-col gap-8">
32+
<p className="font-outfit text-sm text-[#1A1A1A]/60 italic leading-relaxed">
33+
Choose a preferred channel to initiate communication with the primary node.
34+
</p>
35+
36+
<div className="grid grid-cols-1 gap-4">
37+
{config?.socials &&
38+
config.socials.map((link) => {
39+
const Icon = socialIcons[link.icon] || GlobeIcon;
40+
return (
41+
<LuxeContactLink
42+
key={link.id}
43+
href={link.url}
44+
icon={Icon}
45+
label={link.label}
46+
value={link.url.replace(/^mailto:/, '').replace(/^https?:\/\//, '')}
47+
/>
48+
);
49+
})}
50+
</div>
51+
</div>
52+
</LuxeModal>
53+
);
54+
}
2355

2456
return (
2557
<GenericModal isOpen={isOpen} onClose={onClose} title="Contact">
@@ -49,6 +81,28 @@ const ContactModal = ({ isOpen, onClose }) => {
4981
);
5082
};
5183

84+
const LuxeContactLink = ({ href, icon: Icon, label, value }) => (
85+
<a
86+
href={href}
87+
target="_blank"
88+
rel="noopener noreferrer"
89+
className="group flex items-center justify-between border border-[#1A1A1A]/5 bg-[#FAFAF8] p-6 transition-all hover:bg-white hover:shadow-xl hover:border-[#8D4004]/20 rounded-sm"
90+
>
91+
<div className="flex items-center gap-6">
92+
<div className="w-12 h-12 flex items-center justify-center bg-white rounded-full shadow-sm text-[#1A1A1A]/40 group-hover:text-[#8D4004] transition-colors">
93+
<Icon size={24} weight="light" />
94+
</div>
95+
<div className="flex flex-col">
96+
<span className="text-[10px] font-outfit uppercase tracking-[0.2em] text-[#1A1A1A]/40">
97+
{label}
98+
</span>
99+
<span className="font-playfairDisplay text-lg italic text-[#1A1A1A]">{value}</span>
100+
</div>
101+
</div>
102+
<ArrowUpRightIcon size={18} className="text-[#1A1A1A]/10 group-hover:text-[#8D4004] transition-colors" />
103+
</a>
104+
);
105+
52106
const ContactLink = ({ href, icon: Icon, label, value }) => (
53107
<a
54108
href={href}

‎src/components/Layout.jsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import Navbar from './Navbar';
3-
import ClassicSidebar from './ClassicSidebar';
43
import BrutalistSidebar from './BrutalistSidebar';
54
import Footer from './Footer';
65
import LuxeSidebar from './LuxeSidebar';
@@ -35,8 +34,6 @@ const Layout = ({
3534
isGarden,
3635
isAutumn,
3736
isRain,
38-
sidebarColor,
39-
sidebarMode,
4037
isSidebarOpen,
4138
toggleSidebar,
4239
isAppFullscreen,
@@ -88,14 +85,6 @@ const Layout = ({
8885
toggleModal={toggleModal}
8986
setIsPaletteOpen={setIsPaletteOpen}
9087
/>
91-
) : sidebarMode === 'classic' ? (
92-
<ClassicSidebar
93-
isOpen={isSidebarOpen}
94-
toggleSidebar={toggleSidebar}
95-
toggleModal={toggleModal}
96-
setIsPaletteOpen={setIsPaletteOpen}
97-
sidebarColor={sidebarColor}
98-
/>
9988
) : (
10089
<BrutalistSidebar
10190
isOpen={isSidebarOpen}
@@ -105,7 +94,7 @@ const Layout = ({
10594
/>
10695
))}
10796
<div
108-
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen && !hideLayout ? (sidebarMode === 'classic' ? 'md:ml-64' : 'md:ml-72') : 'md:ml-0'}`}
97+
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen && !hideLayout ? 'md:ml-72' : 'md:ml-0'}`}
10998
>
11099
{!hideLayout && (
111100
fezcodexTheme === 'luxe' ? (

‎src/components/LuxeModal.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useEffect } from 'react';
2+
import { motion, AnimatePresence } from 'framer-motion';
3+
import { X } from '@phosphor-icons/react';
4+
5+
const LuxeModal = ({ isOpen, onClose, title, children }) => {
6+
useEffect(() => {
7+
if (isOpen) {
8+
document.body.style.overflow = 'hidden';
9+
} else {
10+
document.body.style.overflow = 'unset';
11+
}
12+
return () => {
13+
document.body.style.overflow = 'unset';
14+
};
15+
}, [isOpen]);
16+
17+
return (
18+
<AnimatePresence>
19+
{isOpen && (
20+
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
21+
<motion.div
22+
initial={{ opacity: 0 }}
23+
animate={{ opacity: 1 }}
24+
exit={{ opacity: 0 }}
25+
className="absolute inset-0 bg-[#F5F5F0]/80 backdrop-blur-md"
26+
onClick={onClose}
27+
/>
28+
<motion.div
29+
initial={{ opacity: 0, scale: 0.95, y: 20 }}
30+
animate={{ opacity: 1, scale: 1, y: 0 }}
31+
exit={{ opacity: 0, scale: 0.95, y: 20 }}
32+
transition={{ type: "spring", stiffness: 300, damping: 30 }}
33+
className="relative w-full max-w-2xl bg-white border border-[#1A1A1A]/10 shadow-2xl rounded-sm overflow-hidden flex flex-col max-h-[90vh]"
34+
>
35+
{/* Header */}
36+
<div className="flex items-center justify-between p-6 border-b border-[#1A1A1A]/5 bg-[#FAFAF8]">
37+
<h2 className="font-playfairDisplay text-2xl text-[#1A1A1A] italic">
38+
{title}
39+
</h2>
40+
<button
41+
onClick={onClose}
42+
className="text-[#1A1A1A]/40 hover:text-[#1A1A1A] transition-colors p-2"
43+
>
44+
<X size={20} />
45+
</button>
46+
</div>
47+
48+
{/* Content */}
49+
<div className="p-8 overflow-y-auto font-outfit text-[#1A1A1A]/80 leading-relaxed text-sm">
50+
{children}
51+
</div>
52+
</motion.div>
53+
</div>
54+
)}
55+
</AnimatePresence>
56+
);
57+
};
58+
59+
export default LuxeModal;

0 commit comments

Comments
 (0)