64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { isAfter, parse } from "date-fns";
|
||
import { motion } from "framer-motion";
|
||
|
||
interface ProjectCardProps {
|
||
title: string;
|
||
company: string;
|
||
image: string;
|
||
releaseDate: string;
|
||
stream?: boolean;
|
||
}
|
||
|
||
function ProjectCard({
|
||
title,
|
||
company,
|
||
image,
|
||
releaseDate,
|
||
stream,
|
||
}: ProjectCardProps) {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
|
||
className="aspect-[4/3] p-6 bg-cover bg-center bg-no-repeat flex items-end"
|
||
style={{
|
||
background: `linear-gradient(180deg, rgba(20, 22, 31, 0.00) 0%, rgba(20, 22, 31, 0.60) 100%), url('${image}'), lightgray 50% / cover no-repeat`,
|
||
}}
|
||
>
|
||
<div className="flex flex-col gap-4">
|
||
<div>
|
||
<p className="text-2xl font-gilroy font-medium">{title}</p>
|
||
<p className="text-sm">{company}</p>
|
||
</div>
|
||
|
||
<div className="flex gap-2">
|
||
{isAfter(parse(releaseDate, "dd.MM.yyyy", new Date()), new Date()) ? (
|
||
<div className="bg-[#14161F] px-4 py-2.5 rounded-full w-fit">
|
||
<p className="font-gilroy font-medium leading-none">
|
||
Релиз {releaseDate}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="bg-gradient px-4 py-2.5 rounded-full w-fit">
|
||
<p className="font-gilroy font-medium leading-none">Сдан</p>
|
||
</div>
|
||
)}
|
||
|
||
{stream && (
|
||
<div className="bg-[#14161F] px-4 py-2.5 rounded-full w-fit flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-gradient rounded-full"></div>
|
||
<p className="font-gilroy font-semibold leading-none text-gradient">
|
||
Stream
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
export default ProjectCard;
|