This commit is contained in:
2023-12-01 14:43:18 +05:00
parent b8cec033bb
commit edcd51599c
33 changed files with 2669 additions and 236 deletions
+42 -23
View File
@@ -1,21 +1,19 @@
import { motion } from "framer-motion";
import ProgressPie from "./ProgressPie";
interface ProjectCardProps {
title: string;
company: string;
image: string;
stream?: boolean;
stage?: number;
}
import TouchScreenIcon from "./icons/TouchScreenIcon";
import VRIcon from "./icons/VRIcon";
import MobileIcon from "./icons/MobileIcon";
import IProject from "../types/IProject";
function ProjectCard({
title,
name,
company,
city,
image,
stage = 6,
stream,
}: ProjectCardProps) {
releaseYear = 2023,
devices = [],
}: IProject) {
const stagePercentage = Math.round((100 / 6) * stage);
return (
@@ -35,13 +33,13 @@ function ProjectCard({
<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">
{title}
<p className="2xl:text-2xl text-xl font-gilroy font-medium">{name}</p>
<p className="2xl:text-sm text-xs">
{company}, {city}
</p>
<p className="2xl:text-sm text-xs">{company}</p>
</div>
<div className="flex gap-1">
<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">
@@ -51,17 +49,38 @@ function ProjectCard({
</div>
) : (
<div className="bg-gradient px-3 py-2 rounded-full w-fit">
<p className="font-gilroy font-medium leading-none">Сдан</p>
<p className="font-gilroy font-medium leading-none">
{releaseYear}
</p>
</div>
)}
{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.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>