93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import ProgressPie from "./ProgressPie";
|
|
import TouchScreenIcon from "./icons/TouchScreenIcon";
|
|
import VRIcon from "./icons/VRIcon";
|
|
import MobileIcon from "./icons/MobileIcon";
|
|
import IProject from "../types/IProject";
|
|
import { format } from "date-fns";
|
|
|
|
function ProjectCard({
|
|
name,
|
|
company,
|
|
city,
|
|
image,
|
|
stage = 6,
|
|
releaseDate = format(new Date(), "yyyy-MM-dd"),
|
|
devices = [],
|
|
}: IProject) {
|
|
const stagePercentage = Math.round((100 / 6) * stage);
|
|
|
|
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="group relative aspect-[4/3] p-4 flex items-end overflow-hidden"
|
|
>
|
|
<div
|
|
className="group-hover:scale-110 transition-transform duration-500 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `url(${import.meta.env.VITE_API_URL}/upload/${image})`,
|
|
}}
|
|
></div>
|
|
<div className="absolute top-0 left-0 w-full h-full bg-gradient-card"></div>
|
|
<div className="relative flex flex-col gap-4">
|
|
<div>
|
|
<p className="2xl:text-2xl text-xl font-gilroy font-medium">{name}</p>
|
|
<p className="2xl:text-sm text-xs">
|
|
{company !== "-" && `${company},`} {city}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{stage < 6 ? (
|
|
<div className="bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-1">
|
|
<p className="font-gilroy font-medium leading-none">
|
|
{stagePercentage}%
|
|
</p>
|
|
<ProgressPie value={stagePercentage} />
|
|
</div>
|
|
) : (
|
|
<div className="bg-gradient py-2.5 px-4 rounded-full">
|
|
<p className="font-gilroy font-medium leading-none">
|
|
{new Date(releaseDate).getFullYear()}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{devices.length > 0 && (
|
|
<>
|
|
{devices.includes("stream") && (
|
|
<div className="bg-[#14161F] px-3 py-2 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>
|
|
)}
|
|
{devices.includes("touch") && (
|
|
<div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
|
|
<TouchScreenIcon />
|
|
</div>
|
|
)}
|
|
{devices.includes("mobile") && (
|
|
<div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
|
|
<MobileIcon />
|
|
</div>
|
|
)}
|
|
{devices.includes("vr") && (
|
|
<div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
|
|
<VRIcon />
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default ProjectCard;
|