mirror of
https://github.com/AderKonstantin/aderktech-chronark.com-.git
synced 2025-06-08 13:48:42 +03:00
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
import {
|
|
motion,
|
|
MotionValue,
|
|
useMotionTemplate,
|
|
useMotionValue,
|
|
} from "framer-motion";
|
|
|
|
import type { Project } from "contentlayer/generated";
|
|
import Link from "next/link";
|
|
|
|
const Flashlight: React.FC<{
|
|
x: MotionValue<number>;
|
|
y: MotionValue<number>;
|
|
}> = ({ x, y }) => {
|
|
let maskImage = useMotionTemplate`radial-gradient(320px at ${x}px ${y}px, white, transparent)`;
|
|
let style = { maskImage, WebkitMaskImage: maskImage };
|
|
|
|
return (
|
|
<div className="pointer-events-none">
|
|
<div className="absolute inset-0 z-0 transition duration-300 [mask-image:linear-gradient(black,transparent)] group-hover:opacity-50" />
|
|
<motion.div
|
|
className="absolute inset-0 z-10 bg-gradient-to-br opacity-100 via-zinc-100/10 transition duration-1000 group-hover:opacity-50 "
|
|
style={style}
|
|
/>
|
|
<motion.div
|
|
className="absolute inset-0 z-10 opacity-0 mix-blend-overlay transition duration-1000 group-hover:opacity-100"
|
|
style={style}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Card: React.FC<{ project: Project }> = ({ project }) => {
|
|
const mouseX = useMotionValue(0); //randomBetween(rect?.left, rect?.right));
|
|
const mouseY = useMotionValue(0); //randomBetween(rect?.top, rect?.bottom));
|
|
|
|
function onMouseMove({ currentTarget, clientX, clientY }: any) {
|
|
const { left, top } = currentTarget.getBoundingClientRect();
|
|
mouseX.set(clientX - left);
|
|
mouseY.set(clientY - top);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
key={project._id}
|
|
onMouseMove={onMouseMove}
|
|
href={`/projects/${project.slug}`}
|
|
// className="group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
|
|
|
|
className="overflow-hidden relative p-4 duration-700 border rounded-xl hover:bg-zinc-800/30 group md:gap-8 hover:border-zinc-600 border-zinc-600 md:p-8"
|
|
>
|
|
<Flashlight x={mouseX} y={mouseY} />
|
|
|
|
<span className="text-xs duration-1000 text-zinc-200 group-hover:text-white group-hover:border-zinc-200 drop-shadow-orange">
|
|
{project.date ? (
|
|
<time dateTime={new Date(project.date).toISOString()}>
|
|
{Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(
|
|
new Date(project.date),
|
|
)}
|
|
</time>
|
|
) : (
|
|
<span>SOON</span>
|
|
)}
|
|
</span>
|
|
<h2 className="z-20 text-xl font-medium duration-1000 lg:text-3xl text-zinc-200 group-hover:text-white font-display">
|
|
{project.title}
|
|
</h2>
|
|
<p className="z-20 mt-4 text-sm duration-1000 text-zinc-400 group-hover:text-zinc-200">
|
|
{project.description}
|
|
</p>
|
|
</Link>
|
|
);
|
|
};
|