nurmuhammet/postshop-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some bugs

Browse Source
This commit is contained in:
Jelaletdin12
2025-12-23 13:32:57 +05:00
parent cdc9fa686f
commit 2b46d525f2
30 changed files with 857 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
components/ErrorPage/index.tsx Normal file
View File

@@ -0,0 +1,128 @@
"use client";
import React, { useEffect, useState } from "react";
// Google Fonts'u içe aktarmak için bileşen dışına ekliyoruz
const fontImport = `
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:100,200,300,400');
@keyframes clockwise {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes anticlockwise {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@keyframes clockwiseError {
0% { transform: rotate(0deg); }
20% { transform: rotate(30deg); }
40% { transform: rotate(25deg); }
60% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
@keyframes anticlockwiseError {
0% { transform: rotate(0deg); }
20% { transform: rotate(-30deg); }
40% { transform: rotate(-25deg); }
60% { transform: rotate(-30deg); }
100% { transform: rotate(0deg); }
}
@keyframes anticlockwiseErrorStop {
0% { transform: rotate(0deg); }
20% { transform: rotate(-30deg); }
60% { transform: rotate(-30deg); }
100% { transform: rotate(0deg); }
}
`;
export default function ErrorPage() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 1000);
return () => clearTimeout(timer);
}, []);
return (
<div className="min-h-screen bg-white flex flex-col items-center justify-start overflow-hidden font-['Encode_Sans_Semi_Condensed',_sans-serif]">
{/* CSS Animasyonlarını buraya gömüyoruz */}
<style dangerouslySetInnerHTML={{ __html: fontImport }} />
<h1
className={`text-[10rem] leading-[10rem] font-extralight text-black transition-all duration-500 ease-linear
${isLoading ? "mt-0 opacity-0" : "mt-[100px] opacity-100"}`}
>
500
</h1>
<h2
className={`text-[1.5rem] font-extralight text-black mt-5 mb-[30px] transition-all duration-500 ease-linear
${isLoading ? "mt-0 opacity-0" : "opacity-100"}`}
>
Unexpected Error <b className="font-bold">:(</b>
</h2>
<div className="relative w-auto h-0">
{/* Gear One */}
<div
className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -left-[130px]
before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
style={{
animation: isLoading
? "clockwise 3s linear infinite"
: "anticlockwiseErrorStop 2s linear infinite",
}}
>
<GearBars />
</div>
{/* Gear Two */}
<div
className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -top-[75px]
before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
style={{
animation: isLoading
? "anticlockwise 3s linear infinite"
: "anticlockwiseError 2s linear infinite",
}}
>
<GearBars />
</div>
{/* Gear Three */}
<div
className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -top-[235px] left-[130px]
before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
style={{
animation: isLoading
? "clockwise 3s linear infinite"
: "clockwiseError 2s linear infinite",
}}
>
<GearBars />
</div>
</div>
</div>
);
}
// Dişli çubukları için yardımcı bileşen
function GearBars() {
return (
<>
<div className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]" />
<div
className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 rotate-60 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]"
style={{ transform: "rotate(60deg)" }}
/>
<div
className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 rotate-120 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]"
style={{ transform: "rotate(120deg)" }}
/>
</>
);
}