70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Modal from "./Modal";
|
|
import useModalStore from "../store/modal";
|
|
|
|
interface IRelevantExpCard {
|
|
image: string;
|
|
name: string;
|
|
location: string;
|
|
src?: string;
|
|
}
|
|
|
|
function RelevantExpCard({ image, name, location, src }: IRelevantExpCard) {
|
|
const [modalComponent, setModalComponent] = useModalStore((state) => [
|
|
state.component,
|
|
state.setComponent,
|
|
]);
|
|
|
|
function handleClick() {
|
|
if (src) {
|
|
setModalComponent(
|
|
<video
|
|
muted={true}
|
|
autoPlay={true}
|
|
playsInline={true}
|
|
controls={true}
|
|
className="aspect-video w-full max-h-screen"
|
|
>
|
|
<source src={src} type="video/mp4" />
|
|
</video>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-[#22222A] rounded-lg overflow-hidden">
|
|
<div
|
|
className="relative sm:h-[404px] h-[200px] bg-no-repeat bg-cover bg-center"
|
|
style={{ backgroundImage: `url('${image}')` }}
|
|
>
|
|
<div
|
|
className="bg-black bg-opacity-25 absolute top-0 left-0 w-full h-full flex justify-center items-center cursor cursor-pointer group"
|
|
onClick={handleClick}
|
|
>
|
|
<svg
|
|
className="group-hover:scale-125 transition-transform"
|
|
width="64"
|
|
height="64"
|
|
viewBox="0 0 64 64"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M54.285 30.971C55.0618 31.4371 55.0618 32.5629 54.285 33.029L17.8174 54.9096C17.0176 55.3895 16 54.8133 16 53.8806L16 10.1194C16 9.18667 17.0176 8.61054 17.8174 9.09044L54.285 30.971Z"
|
|
fill="#F2F2F2"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="p-8 space-y-2">
|
|
<p className="font-gilroy 2xl:text-4xl sm:text-3xl text-2xl">{name}</p>
|
|
<p className="text-[#ABABBA] 2xl:text-xl sm:text-lg text-base">
|
|
{location}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RelevantExpCard;
|