120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
const DIAGNOSTICS = [
|
|
"SOLAR PANEL DİZİLERİ SENKRONİZE EDİLİYOR...",
|
|
"RÜZGAR TRÜBİN KOMPANSATÖRLERİ DENGELENİYOR...",
|
|
"KOJENERASYON OPTİMİZASYON KATI AKTİFLEŞTİRİLİYOR...",
|
|
"YEŞİL DÖNÜŞÜM KARBON AĞI YAPILANDIRILIYOR...",
|
|
"SCENERJİ ENERJİ AKIŞI STABİL DURUMA GETİRİLDİ.",
|
|
];
|
|
|
|
export default function Preloader({ onComplete }: { onComplete: () => void }) {
|
|
const [progress, setProgress] = useState(0);
|
|
const [diagnosticText, setDiagnosticText] = useState(DIAGNOSTICS[0]);
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
|
|
useEffect(() => {
|
|
let currentProgress = 0;
|
|
const duration = 2400; // 2.4 seconds total preloader time
|
|
const intervalTime = 20;
|
|
const step = 100 / (duration / intervalTime);
|
|
|
|
const timer = setInterval(() => {
|
|
currentProgress += step;
|
|
if (currentProgress >= 100) {
|
|
currentProgress = 100;
|
|
clearInterval(timer);
|
|
setTimeout(() => {
|
|
setIsVisible(false);
|
|
setTimeout(onComplete, 800); // Allow curtain reveal animation to complete
|
|
}, 500);
|
|
}
|
|
setProgress(Math.floor(currentProgress));
|
|
|
|
// Update diagnostic text based on progress
|
|
const diagIndex = Math.min(
|
|
Math.floor((currentProgress / 100) * DIAGNOSTICS.length),
|
|
DIAGNOSTICS.length - 1
|
|
);
|
|
setDiagnosticText(DIAGNOSTICS[diagIndex]);
|
|
}, intervalTime);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [onComplete]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isVisible && (
|
|
<motion.div
|
|
initial={{ opacity: 1 }}
|
|
exit={{
|
|
clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
|
|
transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] }
|
|
}}
|
|
className="fixed inset-0 w-full h-full bg-[#03070b] z-[99999] flex flex-col items-center justify-center p-6 select-none"
|
|
>
|
|
{/* Subtle decorative grid in preloader */}
|
|
<div
|
|
className="absolute inset-0 w-full h-full opacity-10 pointer-events-none"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(to right, rgba(13, 242, 147, 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(13, 242, 147, 0.05) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "40px 40px",
|
|
}}
|
|
/>
|
|
|
|
<div className="w-full max-w-xl flex flex-col relative z-10">
|
|
{/* Tech Logo / Icon */}
|
|
<div className="flex items-center gap-3 mb-10">
|
|
<div className="w-6 h-6 border border-accent-emerald flex items-center justify-center rounded-sm animate-spin-slow">
|
|
<div className="w-2.5 h-2.5 bg-accent-emerald" />
|
|
</div>
|
|
<span className="font-space text-lg font-bold tracking-[0.2em] text-accent-emerald uppercase">
|
|
SCENERJİ SYSTEM
|
|
</span>
|
|
<span className="ml-auto text-[10px] font-mono text-text-dim px-2 py-0.5 border border-text-dim/20 rounded-sm">
|
|
v2.6.0
|
|
</span>
|
|
</div>
|
|
|
|
{/* Diagnostic Logs */}
|
|
<div className="h-16 font-mono text-xs text-text-secondary border-l border-accent-emerald/20 pl-4 mb-8 flex flex-col justify-center">
|
|
<span className="text-[10px] text-accent-cyan tracking-wider uppercase mb-1">
|
|
[SİSTEM TEŞHİS KÜTÜPHANESİ]
|
|
</span>
|
|
<span className="animate-pulse">{diagnosticText}</span>
|
|
</div>
|
|
|
|
{/* Progress Counter & Bar */}
|
|
<div className="flex items-end justify-between font-space mb-3">
|
|
<span className="text-sm font-light text-text-secondary tracking-widest uppercase">
|
|
ENERJİ AĞI KALİBRASYONU
|
|
</span>
|
|
<span className="text-3xl font-bold text-accent-emerald tabular-nums">
|
|
{progress}%
|
|
</span>
|
|
</div>
|
|
|
|
<div className="w-full h-[2px] bg-bg-tertiary relative overflow-hidden rounded-full">
|
|
<motion.div
|
|
className="h-full bg-gradient-to-r from-accent-cyan to-accent-emerald"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-8 flex justify-between font-mono text-[9px] text-text-dim uppercase tracking-wider">
|
|
<span>KURULUM: AYRIS TECH</span>
|
|
<span>LOKASYON: TÜRKİYE</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|