locale upgrade
This commit is contained in:
111
app/components/ClientWrappers.tsx
Normal file
111
app/components/ClientWrappers.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Transitional Wrapper für bestehende Components
|
||||
* Nutzt direkt JSON Messages statt komplexe Translation-Loader
|
||||
*/
|
||||
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import Hero from './Hero';
|
||||
import About from './About';
|
||||
import Projects from './Projects';
|
||||
import Contact from './Contact';
|
||||
import Footer from './Footer';
|
||||
import type {
|
||||
HeroTranslations,
|
||||
AboutTranslations,
|
||||
ProjectsTranslations,
|
||||
ContactTranslations,
|
||||
FooterTranslations,
|
||||
} from '@/types/translations';
|
||||
import enMessages from '@/messages/en.json';
|
||||
import deMessages from '@/messages/de.json';
|
||||
|
||||
const messageMap = { en: enMessages, de: deMessages };
|
||||
|
||||
function getNormalizedLocale(locale: string): 'en' | 'de' {
|
||||
return locale.startsWith('de') ? 'de' : 'en';
|
||||
}
|
||||
|
||||
export function HeroClient({ locale, translations }: { locale: string; translations: HeroTranslations }) {
|
||||
const normalLocale = getNormalizedLocale(locale);
|
||||
const baseMessages = messageMap[normalLocale];
|
||||
|
||||
const messages = {
|
||||
home: {
|
||||
hero: baseMessages.home.hero
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<Hero />
|
||||
</NextIntlClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function AboutClient({ locale, translations }: { locale: string; translations: AboutTranslations }) {
|
||||
const normalLocale = getNormalizedLocale(locale);
|
||||
const baseMessages = messageMap[normalLocale];
|
||||
|
||||
const messages = {
|
||||
home: {
|
||||
about: baseMessages.home.about
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<About />
|
||||
</NextIntlClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectsClient({ locale, translations }: { locale: string; translations: ProjectsTranslations }) {
|
||||
const normalLocale = getNormalizedLocale(locale);
|
||||
const baseMessages = messageMap[normalLocale];
|
||||
|
||||
const messages = {
|
||||
home: {
|
||||
projects: baseMessages.home.projects
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<Projects />
|
||||
</NextIntlClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function ContactClient({ locale, translations }: { locale: string; translations: ContactTranslations }) {
|
||||
const normalLocale = getNormalizedLocale(locale);
|
||||
const baseMessages = messageMap[normalLocale];
|
||||
|
||||
const messages = {
|
||||
home: {
|
||||
contact: baseMessages.home.contact
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<Contact />
|
||||
</NextIntlClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function FooterClient({ locale, translations }: { locale: string; translations: FooterTranslations }) {
|
||||
const normalLocale = getNormalizedLocale(locale);
|
||||
const baseMessages = messageMap[normalLocale];
|
||||
|
||||
const messages = {
|
||||
footer: baseMessages.footer
|
||||
};
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<Footer />
|
||||
</NextIntlClientProvider>
|
||||
);
|
||||
}
|
||||
12
app/components/Header.server.tsx
Normal file
12
app/components/Header.server.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { getNavTranslations } from '@/lib/translations-loader';
|
||||
import HeaderClient from './HeaderClient';
|
||||
|
||||
interface HeaderProps {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
export default async function Header({ locale }: HeaderProps) {
|
||||
const translations = await getNavTranslations(locale);
|
||||
|
||||
return <HeaderClient locale={locale} translations={translations} />;
|
||||
}
|
||||
249
app/components/HeaderClient.tsx
Normal file
249
app/components/HeaderClient.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Mail } from "lucide-react";
|
||||
import { SiGithub, SiLinkedin } from "react-icons/si";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
import type { NavTranslations } from "@/types/translations";
|
||||
|
||||
interface HeaderClientProps {
|
||||
locale: string;
|
||||
translations: NavTranslations;
|
||||
}
|
||||
|
||||
export default function HeaderClient({ locale, translations }: HeaderClientProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const navItems = [
|
||||
{ name: translations.home, href: `/${locale}` },
|
||||
{ name: translations.about, href: isHome ? "#about" : `/${locale}#about` },
|
||||
{ name: translations.projects, href: isHome ? "#projects" : `/${locale}/projects` },
|
||||
{ name: translations.contact, href: isHome ? "#contact" : `/${locale}#contact` },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" },
|
||||
{
|
||||
icon: SiLinkedin,
|
||||
href: "https://linkedin.com/in/dkonkol",
|
||||
label: "LinkedIn",
|
||||
},
|
||||
{ icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
|
||||
];
|
||||
|
||||
const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || "";
|
||||
const qs = searchParams.toString();
|
||||
const query = qs ? `?${qs}` : "";
|
||||
const enHref = `/en${pathWithoutLocale}${query}`;
|
||||
const deHref = `/de${pathWithoutLocale}${query}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.header
|
||||
initial={false}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
className={`pointer-events-auto transition-all duration-500 ease-out ${
|
||||
scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className={`backdrop-blur-xl transition-all duration-500 flex justify-between items-center ${
|
||||
scrolled
|
||||
? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
|
||||
: "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
|
||||
}`}
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<motion.div
|
||||
key={item.name}
|
||||
whileHover={{ y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-stone-700 hover:text-stone-900 font-medium transition-colors relative liquid-hover"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Language Switcher */}
|
||||
<div className="flex items-center space-x-2 ml-4 pl-4 border-l border-stone-300">
|
||||
<Link
|
||||
href={enHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-all ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-all ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, rotate: 90 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-colors"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.header>
|
||||
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ x: "100%", opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: "100%", opacity: 0 }}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 300 }}
|
||||
className="fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto"
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black text-stone-900"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-stone-700 hover:bg-stone-50 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Language Switcher Mobile */}
|
||||
<div className="flex gap-2 mt-6 pt-6 border-t border-stone-200">
|
||||
<Link
|
||||
href={enHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-stone-200">
|
||||
<div className="flex justify-center space-x-6">
|
||||
{socialLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-all"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<Icon size={20} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user