feat: setup, landing page
This commit is contained in:
Louis
30
src/components/About.tsx
Normal file
30
src/components/About.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const About = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section id="about" className="py-20 px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-bold mb-8 text-accent">{t('about.title')}</h2>
|
||||
<div className="space-y-6 text-secondary/80">
|
||||
<p className="text-lg leading-relaxed">
|
||||
{t('about.description')}
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-6 mt-8">
|
||||
<div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
|
||||
<h3 className="text-xl font-semibold mb-3 text-accent">{t('about.experience_title')}</h3>
|
||||
<p className="text-secondary/70">{t('about.experience_desc')}</p>
|
||||
</div>
|
||||
<div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
|
||||
<h3 className="text-xl font-semibold mb-3 text-accent">{t('about.passion_title')}</h3>
|
||||
<p className="text-secondary/70">{t('about.passion_desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
110
src/components/App.tsx
Normal file
110
src/components/App.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Hero from './Hero';
|
||||
import About from './About';
|
||||
import Experience from './Experience/Experience';
|
||||
import Skills from './Skills';
|
||||
import Education from './Education';
|
||||
import Contact from './Contact';
|
||||
import { ThemeMenu, ThemeType, ThemeSelected } from './ThemeMenu';
|
||||
|
||||
function App() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [theme, setTheme] = useState<ThemeType>('dark');
|
||||
const [themeSelected, setThemeSelected] = useState<ThemeSelected>('system');
|
||||
|
||||
useEffect(() => {
|
||||
if (themeSelected === 'system') {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handleChange = () => {
|
||||
const systemTheme = mediaQuery.matches ? 'dark' : 'light';
|
||||
setTheme(systemTheme);
|
||||
document.documentElement.className = `theme-${systemTheme}`;
|
||||
};
|
||||
|
||||
handleChange();
|
||||
mediaQuery.addEventListener('change', handleChange);
|
||||
|
||||
return () => mediaQuery.removeEventListener('change', handleChange);
|
||||
} else {
|
||||
setTheme(themeSelected);
|
||||
document.documentElement.className = `theme-${themeSelected}`;
|
||||
}
|
||||
}, [themeSelected]);
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = i18n.language === 'fr' ? 'en' : 'fr';
|
||||
i18n.changeLanguage(newLang);
|
||||
};
|
||||
|
||||
const handleThemeChange = (newTheme: ThemeSelected) => {
|
||||
setThemeSelected(newTheme);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen text-secondary bg-primary transition-colors duration-300">
|
||||
{/* Header */}
|
||||
<header className='fixed top-0 left-0 right-0 z-50 flex justify-between items-center gap-4 text-sm w-full px-8 py-6 bg-primary/80 backdrop-blur-md border-b border-secondary/10'>
|
||||
<h1 className='text-2xl font-bold'>
|
||||
<span className='text-accent'>L</span>ouis <span className='text-accent'>E</span>MARD
|
||||
</h1>
|
||||
<nav className='flex gap-6 h-full justify-center items-center'>
|
||||
<a href='#about' className='hover:text-accent transition-colors'>{t('nav.about')}</a>
|
||||
<a href='#experience' className='hover:text-accent transition-colors'>{t('nav.experience')}</a>
|
||||
<a href='#skills' className='hover:text-accent transition-colors'>{t('nav.skills')}</a>
|
||||
<a href='#education' className='hover:text-accent transition-colors'>{t('nav.education')}</a>
|
||||
<a href='#contact' className='hover:text-accent transition-colors'>{t('nav.contact')}</a>
|
||||
|
||||
{/* Language Toggle */}
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className='px-3 py-1 border border-secondary/20 rounded hover:border-accent hover:text-accent transition-all'
|
||||
>
|
||||
{i18n.language.toUpperCase()}
|
||||
</button>
|
||||
|
||||
{/* Theme Menu */}
|
||||
<ThemeMenu
|
||||
theme={theme}
|
||||
themeSelected={themeSelected}
|
||||
onThemeChange={handleThemeChange}
|
||||
/>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main>
|
||||
<Hero />
|
||||
<About />
|
||||
<Experience />
|
||||
<Skills />
|
||||
<Education />
|
||||
<Contact />
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className='py-8 border-t border-secondary/10 bg-secondary/5'>
|
||||
<div className='flex flex-col md:flex-row gap-6 justify-center items-center text-sm'>
|
||||
<a href='https://git.louisemard.dev' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
|
||||
Gitea
|
||||
</a>
|
||||
<a href='https://github.com/LouisDrame' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
|
||||
GitHub
|
||||
</a>
|
||||
<a href='https://www.linkedin.com/in/louis-emard-9b6a931a2/' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a href='https://www.collective.work/profile/louis-emard' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
|
||||
Collective
|
||||
</a>
|
||||
</div>
|
||||
<p className='text-center mt-4 text-secondary/50 text-xs'>
|
||||
© {new Date().getFullYear()} Louis EMARD. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
42
src/components/Contact.tsx
Normal file
42
src/components/Contact.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Contact = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-20 px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-4xl font-bold mb-8 text-accent">{t('contact.title')}</h2>
|
||||
<p className="text-lg text-secondary/70 mb-12">
|
||||
{t('contact.description')}
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-center items-center">
|
||||
<a
|
||||
href="mailto:louis.emard@example.com"
|
||||
className="px-8 py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-all hover:shadow-lg w-full md:w-auto"
|
||||
>
|
||||
📧 {t('contact.email')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/louis-emard-9b6a931a2/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all w-full md:w-auto"
|
||||
>
|
||||
💼 LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/LouisDrame"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all w-full md:w-auto"
|
||||
>
|
||||
💻 GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
44
src/components/Education.tsx
Normal file
44
src/components/Education.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Education = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const educations = [
|
||||
{
|
||||
period: '2020 - 2023',
|
||||
title: 'education.degree1.title',
|
||||
school: 'education.degree1.school',
|
||||
description: 'education.degree1.description'
|
||||
},
|
||||
{
|
||||
period: '2018 - 2020',
|
||||
title: 'education.degree2.title',
|
||||
school: 'education.degree2.school',
|
||||
description: 'education.degree2.description'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="education" className="py-20 px-8 bg-secondary/5">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-bold mb-12 text-accent">{t('education.title')}</h2>
|
||||
<div className="space-y-6">
|
||||
{educations.map((edu, index) => (
|
||||
<div key={index} className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-all">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-start mb-3">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-secondary mb-1">{t(edu.title)}</h3>
|
||||
<p className="text-accent font-medium">{t(edu.school)}</p>
|
||||
</div>
|
||||
<span className="text-secondary/60 text-sm md:text-base mt-2 md:mt-0">{edu.period}</span>
|
||||
</div>
|
||||
<p className="text-secondary/70">{t(edu.description)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Education;
|
||||
159
src/components/Experience/Experience.tsx
Normal file
159
src/components/Experience/Experience.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Routes, Route, useRoutes, Link, useParams, useNavigate } from 'react-router';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
const Experience = () => {
|
||||
const { t } = useTranslation();
|
||||
const experiences = [
|
||||
{
|
||||
period: '2023 - 2024',
|
||||
title: 'experience.job1.title',
|
||||
company: 'experience.job1.company',
|
||||
description: 'experience.job1.description',
|
||||
tasks: ['experience.job1.task1', 'experience.job1.task2', 'experience.job1.task3']
|
||||
},
|
||||
{
|
||||
period: '2022',
|
||||
title: 'experience.job2.title',
|
||||
company: 'experience.job2.company',
|
||||
description: 'experience.job2.description',
|
||||
tasks: ['experience.job2.task1', 'experience.job2.task2']
|
||||
},
|
||||
{
|
||||
period: '2018 - 2025',
|
||||
title: 'experience.job3.title',
|
||||
company: 'experience.job3.company',
|
||||
description: 'experience.job3.description',
|
||||
tasks: ['experience.job3.task1', 'experience.job3.task2']
|
||||
}
|
||||
];
|
||||
|
||||
const routes = useRoutes(['/', '/experiences/:xpId'].map((path, id) => ({
|
||||
path,
|
||||
element: (
|
||||
<>
|
||||
<Link to={"/"}>
|
||||
<p>Exit</p>
|
||||
</Link>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-bold mb-12 text-accent">{t('experience.title')}</h2>
|
||||
<div className="space-y-8">
|
||||
<ExperiencesList experiences={experiences} t={t} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
})));
|
||||
|
||||
return (
|
||||
<>
|
||||
{routes}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface Experience {
|
||||
period: string;
|
||||
title: string;
|
||||
company: string;
|
||||
description: string;
|
||||
tasks: string[];
|
||||
}
|
||||
|
||||
interface ExperiencesListProps {
|
||||
experiences: Experience[];
|
||||
t: (key: string) => string
|
||||
}
|
||||
|
||||
const ExperiencesList = ({ experiences, t }: ExperiencesListProps) => {
|
||||
const { xpId } = useParams();
|
||||
return <div className=' flex flex-col space-y-8'>
|
||||
{experiences.map((exp, index) => <ExperienceSummary key={index} index={index} exp={exp} t={t} />)}
|
||||
<AnimatePresence>
|
||||
{xpId !== undefined && <DetailedExperience t={t} />}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
}
|
||||
|
||||
interface ExperienceSummaryProps {
|
||||
index: number;
|
||||
exp: {
|
||||
period: string;
|
||||
title: string;
|
||||
company: string;
|
||||
description: string;
|
||||
tasks: string[];
|
||||
};
|
||||
t: (key: string) => string;
|
||||
}
|
||||
|
||||
const ExperienceSummary = ({ index, exp, t }: ExperienceSummaryProps) => {
|
||||
|
||||
return <Link to={`/experiences/${index}`}>
|
||||
<motion.div layoutId={`experience-${index}`} key={index} className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-all">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
|
||||
<motion.div layoutId={`experience-header-${index}`}>
|
||||
<h3 className="text-2xl font-semibold text-secondary mb-1">{t(exp.title)}</h3>
|
||||
<p className="text-accent font-medium">{t(exp.company)}</p>
|
||||
</motion.div>
|
||||
<span className="text-secondary/60 text-sm md:text-base mt-2 md:mt-0">{exp.period}</span>
|
||||
</div>
|
||||
<p className="text-secondary/70 mb-4">{t(exp.description)}</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-secondary/60">
|
||||
{exp.tasks.map((task, taskIndex) => (
|
||||
<li key={taskIndex}>{t(task)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</Link>
|
||||
};
|
||||
|
||||
interface DetailedExperienceProps {
|
||||
t: (key: string) => string;
|
||||
}
|
||||
|
||||
const DetailedExperience = ({ t }: DetailedExperienceProps) => {
|
||||
const { xpId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
// Prevent background scrolling when detailed view is open
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
navigate('/');
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'auto';
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleBackgroundClick = (e: React.MouseEvent) => {
|
||||
if(e.target === e.currentTarget) {
|
||||
navigate('/');
|
||||
}
|
||||
}
|
||||
return <motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 flex flex-col items-center justify-center z-0 backdrop-blur-sm'
|
||||
onClick={handleBackgroundClick}
|
||||
|
||||
>
|
||||
<motion.div layoutId={`experience-${xpId}`} className="bg-primary p-8 rounded-lg border border-accent max-w-3xl w-full h-1/2" onClick={(e) => e.stopPropagation()}>
|
||||
<motion.div layoutId={`experience-header-${xpId}`}>
|
||||
<h3 className="text-2xl font-semibold text-secondary mb-1">Dev full stack</h3>
|
||||
<p className="text-accent font-medium">Meta Video</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>;
|
||||
};
|
||||
|
||||
export default Experience;
|
||||
37
src/components/Hero.tsx
Normal file
37
src/components/Hero.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Hero = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section className="min-h-screen flex items-center justify-center px-8 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-accent to-secondary bg-clip-text text-transparent">
|
||||
Louis EMARD
|
||||
</h1>
|
||||
<h2 className="text-2xl md:text-3xl text-secondary/80 mb-8">
|
||||
{t('hero.title')}
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-secondary/60 mb-12 max-w-2xl mx-auto">
|
||||
{t('hero.subtitle')}
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center flex-wrap">
|
||||
<a
|
||||
href="#contact"
|
||||
className="px-8 py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-all hover:shadow-lg"
|
||||
>
|
||||
{t('hero.cta')}
|
||||
</a>
|
||||
<a
|
||||
href="#projects"
|
||||
className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all"
|
||||
>
|
||||
{t('hero.projects')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
51
src/components/Skills.tsx
Normal file
51
src/components/Skills.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Skills = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const skillCategories = [
|
||||
{
|
||||
title: 'skills.languages.title',
|
||||
skills: ['Python', 'JavaScript/TypeScript', 'Java', 'C', 'SQL', 'HTML/CSS', 'Bash']
|
||||
},
|
||||
{
|
||||
title: 'skills.frameworks.title',
|
||||
skills: ['React', 'Node.js', 'Django', 'FastAPI', 'TailwindCSS', 'Bootstrap']
|
||||
},
|
||||
{
|
||||
title: 'skills.tools.title',
|
||||
skills: ['Git', 'Docker', 'Linux', 'PostgreSQL', 'MongoDB', 'REST API']
|
||||
},
|
||||
{
|
||||
title: 'skills.other.title',
|
||||
skills: ['Agile/Scrum', 'CI/CD', 'Test unitaires', 'Architecture logicielle']
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="skills" className="py-20 px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-bold mb-12 text-accent">{t('skills.title')}</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{skillCategories.map((category, index) => (
|
||||
<div key={index} className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
|
||||
<h3 className="text-xl font-semibold mb-4 text-secondary">{t(category.title)}</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{category.skills.map((skill, skillIndex) => (
|
||||
<span
|
||||
key={skillIndex}
|
||||
className="px-4 py-2 bg-accent/10 text-accent border border-accent/20 rounded-full text-sm font-medium hover:bg-accent/20 transition-all"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Skills;
|
||||
143
src/components/ThemeMenu.tsx
Normal file
143
src/components/ThemeMenu.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import clsx from 'clsx';
|
||||
import Moon from '../icons/Moon';
|
||||
import Sun from '../icons/Sun';
|
||||
import SystemIcon from '../icons/System';
|
||||
|
||||
export type CustomThemeColor = 'purple' | 'teal' | 'sunset' | 'forest' | 'ocean' | 'rose' | 'amber';
|
||||
export type ThemeType = 'light' | 'dark' | `custom-${CustomThemeColor}`;
|
||||
export type ThemeSelected = 'light' | 'dark' | `custom-${CustomThemeColor}` | 'system';
|
||||
|
||||
interface ThemeMenuProps {
|
||||
theme: ThemeType;
|
||||
themeSelected: ThemeSelected;
|
||||
onThemeChange: (theme: ThemeSelected) => void;
|
||||
}
|
||||
|
||||
const customThemes: CustomThemeColor[] = ['purple', 'teal', 'sunset', 'forest', 'ocean', 'rose', 'amber'];
|
||||
|
||||
const getThemeEmoji = (color: CustomThemeColor): string => {
|
||||
const emojis: Record<CustomThemeColor, string> = {
|
||||
purple: '💜',
|
||||
teal: '🩵',
|
||||
sunset: '🌅',
|
||||
forest: '🌲',
|
||||
ocean: '🌊',
|
||||
rose: '🌹',
|
||||
amber: '⚡'
|
||||
};
|
||||
return emojis[color];
|
||||
};
|
||||
|
||||
export const ThemeMenu = ({ theme, themeSelected, onThemeChange }: ThemeMenuProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [showThemeMenu, setShowThemeMenu] = useState(false);
|
||||
const [showCustomSubmenu, setShowCustomSubmenu] = useState(true);
|
||||
|
||||
const getThemeIcon = () => {
|
||||
if (themeSelected === 'system') {
|
||||
return <SystemIcon className='text-secondary'/>;
|
||||
}
|
||||
if (theme === 'light') {
|
||||
return <Sun className='text-secondary'/>;
|
||||
}
|
||||
if (theme.startsWith('custom-')) {
|
||||
const color = theme.split('-')[1] as CustomThemeColor;
|
||||
return <span className='text-accent text-xl'>{getThemeEmoji(color)}</span>;
|
||||
}
|
||||
return <Moon className='text-secondary'/>;
|
||||
};
|
||||
|
||||
const handleThemeSelect = (selectedTheme: ThemeSelected) => {
|
||||
onThemeChange(selectedTheme);
|
||||
setShowThemeMenu(false);
|
||||
setShowCustomSubmenu(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowThemeMenu(!showThemeMenu)}
|
||||
className="hover:drop-shadow-[0_0_8px_currentColor] transition-all flex flex-row p-2 hover:bg-secondary/10 rounded"
|
||||
>
|
||||
{getThemeIcon()}
|
||||
</button>
|
||||
|
||||
{showThemeMenu && (
|
||||
<div className="absolute right-0 top-12 bg-primary border border-secondary/20 rounded-lg shadow-xl z-50 min-w-[180px] overflow-hidden">
|
||||
{/* Light Theme */}
|
||||
<button
|
||||
onClick={() => handleThemeSelect('light')}
|
||||
className={clsx(
|
||||
"w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
|
||||
themeSelected === 'light' && "bg-accent/20 text-accent"
|
||||
)}
|
||||
>
|
||||
<Sun height={16} width={16} /> {t('theme.light')}
|
||||
</button>
|
||||
|
||||
{/* Dark Theme */}
|
||||
<button
|
||||
onClick={() => handleThemeSelect('dark')}
|
||||
className={clsx(
|
||||
"w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
|
||||
themeSelected === 'dark' && "bg-accent/20 text-accent"
|
||||
)}
|
||||
>
|
||||
<Moon height={16} width={16} /> {t('theme.dark')}
|
||||
</button>
|
||||
|
||||
{/* Custom Themes - with submenu */}
|
||||
<div
|
||||
className="relative"
|
||||
>
|
||||
<button
|
||||
className={clsx(
|
||||
"w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center justify-between gap-3",
|
||||
themeSelected.startsWith('custom-') && "bg-accent/20 text-accent"
|
||||
)}
|
||||
onClick={() => setShowCustomSubmenu(true)}
|
||||
onBlur={() => setShowCustomSubmenu(false)}
|
||||
>
|
||||
<span className="flex items-center gap-3">
|
||||
<span className='text-lg'>✨</span> {t('theme.custom')}
|
||||
</span>
|
||||
<span className="text-xs">▶</span>
|
||||
</button>
|
||||
|
||||
{/* Custom Submenu */}
|
||||
{/* {showCustomSubmenu && ( */}
|
||||
<div className=" top-0 ml-1 bg-primary border border-secondary/20 rounded-lg shadow-xl min-w-[160px] overflow-hidden">
|
||||
{customThemes.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => handleThemeSelect(`custom-${color}`)}
|
||||
className={clsx(
|
||||
"w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
|
||||
themeSelected === `custom-${color}` && "bg-accent/20 text-accent"
|
||||
)}
|
||||
>
|
||||
<span className='text-lg'>{getThemeEmoji(color)}</span>
|
||||
{t(`theme.custom_${color}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* )} */}
|
||||
</div>
|
||||
|
||||
{/* System Theme */}
|
||||
<button
|
||||
onClick={() => handleThemeSelect('system')}
|
||||
className={clsx(
|
||||
"w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
|
||||
themeSelected === 'system' && "bg-accent/20 text-accent"
|
||||
)}
|
||||
>
|
||||
<SystemIcon height={16} width={16} /> {t('theme.system')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user