62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Navigation from '@/components/Navigation';
|
|
import Footer from '@/components/Footer';
|
|
import { type Language, type LanguageContent } from '@/lib/languages';
|
|
|
|
interface ClientLayoutProps {
|
|
children: React.ReactNode;
|
|
lang: Language;
|
|
t: LanguageContent;
|
|
}
|
|
|
|
interface Star {
|
|
left: string;
|
|
top: string;
|
|
animationDelay: string;
|
|
animationDuration: string;
|
|
}
|
|
|
|
export default function ClientLayout({ children, lang, t }: ClientLayoutProps) {
|
|
const [stars, setStars] = useState<Star[]>([]);
|
|
|
|
useEffect(() => {
|
|
const generateStars = () => {
|
|
const newStars: Star[] = [];
|
|
for (let i = 0; i < 50; i++) {
|
|
newStars.push({
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 2}s`,
|
|
animationDuration: `${2 + Math.random() * 3}s`,
|
|
});
|
|
}
|
|
setStars(newStars);
|
|
};
|
|
generateStars();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black text-cyan-400 overflow-hidden relative">
|
|
{/* Animated Background */}
|
|
<div className="fixed inset-0 opacity-20">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-blue-900/20 to-cyan-900/30"></div>
|
|
{stars.map((style, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute w-1 h-1 bg-cyan-400 rounded-full animate-pulse"
|
|
style={style}
|
|
></div>
|
|
))}
|
|
</div>
|
|
|
|
<Navigation currentLang={lang} t={t} />
|
|
|
|
<main className="relative z-10">{children}</main>
|
|
|
|
<Footer currentLang={lang} t={t} />
|
|
</div>
|
|
);
|
|
}
|