82 lines
No EOL
3.3 KiB
TypeScript
82 lines
No EOL
3.3 KiB
TypeScript
/*
|
|
All rights reserved to NY0510 (As Known As NY64), 2024
|
|
https://github.com/NY0510/ny64.kr/blob/main/src/components/ProfileSection.tsx
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
|
|
|
|
const birthday = new Date('2021-11-14');
|
|
|
|
export function TimeCounter() {
|
|
const mouseX = useMotionValue(0);
|
|
const mouseY = useMotionValue(0);
|
|
|
|
const background = useMotionTemplate`radial-gradient(200px circle at ${mouseX}px ${mouseY}px, rgba(38, 38, 38, 0.4), transparent 80%)`;
|
|
|
|
const [afterBirth, setAfterBirth] = useState<string>('');
|
|
const [tenThousands, setTenThousands] = useState<number>(0);
|
|
const [animate, setAnimate] = useState<boolean>(false);
|
|
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const elapsed = new Date().getTime() - birthday.getTime();
|
|
setAfterBirth(elapsed.toLocaleString());
|
|
|
|
const newTenThousands = Math.floor(elapsed / 10000);
|
|
if (newTenThousands !== tenThousands) {
|
|
setTenThousands(newTenThousands);
|
|
setAnimate(true);
|
|
setTimeout(() => setAnimate(false), 200);
|
|
}
|
|
}, 1);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [tenThousands]);
|
|
|
|
return (
|
|
<div
|
|
onMouseMove={(e) => {
|
|
const { left, top } = e.currentTarget.getBoundingClientRect();
|
|
|
|
mouseX.set(e.clientX - left);
|
|
mouseY.set(e.clientY - top);
|
|
}}
|
|
className="group relative w-full max-w-[350px] overflow-hidden rounded-xl bg-neutral-950"
|
|
title='암냥으로 활동한지'
|
|
>
|
|
<div className="absolute right-5 top-0 h-px w-80 bg-gradient-to-l from-transparent via-white/30 via-10% to-transparent" />
|
|
<motion.div
|
|
className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition duration-300 group-hover:opacity-100"
|
|
style={{
|
|
background: background,
|
|
}}
|
|
/>
|
|
<div className="relative flexflex-col gap-3 rounded-xl border border-white/10 px-4 py-5">
|
|
<div className="space-y-2">
|
|
<p className={`text-sm tabular-nums transition duration-200 ease-in-out ${animate ? 'text-neutral-100' : 'text-neutral-400'}`}>
|
|
{afterBirth} ms
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/*
|
|
return (
|
|
<div className="group relative w-fit mx-auto grid overflow-hidden rounded-3xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors duration-200">
|
|
<span>
|
|
<span className="spark mask-gradient absolute inset-0 h-[100%] w-[100%] animate-flip overflow-hidden rounded-3xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:animate-rotate before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]" />
|
|
</span>
|
|
<span className="backdrop absolute inset-px rounded-3xl bg-neutral-950 transition-colors duration-200" />
|
|
<span className="z-10 flex flex-col items-center gap-2">
|
|
<span>암냥으로 활동한지</span>
|
|
<span className={`tabular-nums transition duration-200 ease-in-out ${animate ? 'text-neutral-100' : 'text-neutral-400'}`}>
|
|
{afterBirth} ms
|
|
</span>
|
|
</span>
|
|
</div>
|
|
);*/
|
|
}
|
|
|