38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { Trans } from "react-i18next";
|
|
|
|
interface CardProps {
|
|
icon: string;
|
|
image: string;
|
|
title: string | JSX.Element;
|
|
location: string | JSX.Element;
|
|
handleClick: () => void;
|
|
}
|
|
|
|
function Card({ icon, image, title, location, handleClick }: CardProps) {
|
|
return (
|
|
<div className="rounded-lg overflow-hidden flex flex-col justify-between bg-[#22222A]">
|
|
<div
|
|
className="aspect-video bg-no-repeat bg-center bg-cover"
|
|
style={{ backgroundImage: `url('${image}')` }}
|
|
></div>
|
|
<div className="p-8 space-y-8">
|
|
<div className="flex items-center space-x-4">
|
|
<img src={icon} alt="" className="w-12 h-12" />
|
|
<div>
|
|
<p className="sm:text-xl font-gilroy">{title}</p>
|
|
<p className="sm:text-base text-sm text-[#ABABBA]">{location}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleClick}
|
|
className="px-4 py-2 bg-gradient rounded w-full opacity-90 hover:opacity-100 transition-opacity font-gilroy"
|
|
>
|
|
<Trans i18nKey="button" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Card;
|