63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { AM, EC, GA, US, GD, GB } from "country-flag-icons/react/1x1";
|
||
import { ProductBoxProps } from "../../types/props";
|
||
import Button from "../button";
|
||
import { useState } from "react";
|
||
import MuiModalBuy from "./components/MuiModalBuy";
|
||
|
||
const ProductBox = ({
|
||
title,
|
||
space,
|
||
users,
|
||
price,
|
||
btnText,
|
||
variant,
|
||
}: ProductBoxProps) => {
|
||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||
const toggleModal = () => {
|
||
setIsOpen(true);
|
||
};
|
||
return (
|
||
<div
|
||
className={`p-4 w-full h-full flex flex-col gap-3 justify-center items-center rounded-lg shadow-inner ${
|
||
variant === 1
|
||
? "shadow-purple-800 bg-purple-600"
|
||
: variant === 2
|
||
? "shadow-orange-800 bg-orange-600"
|
||
: variant === 3 && "shadow-indigo-800 bg-indigo-600"
|
||
} bg-cover bg-center bg-banner`}
|
||
>
|
||
<MuiModalBuy isOpen={isOpen} setIsOpen={setIsOpen} />
|
||
<h1 className="max-md:text-xl md:text-2xl font-bold">{title}</h1>
|
||
<div className="w-full h-full p-2 flex gap-2 justify-between items-center">
|
||
<div className="w-full h-full flex flex-col gap-2">
|
||
<h2 className="max-md:text-lg md:text-xl text-center">{space} گیگ</h2>
|
||
<p className="max-md:text-sm md:text-lg text-center">
|
||
{users} کاربره
|
||
</p>
|
||
</div>
|
||
<div className="w-full h-full gap-4 grid grid-cols-3">
|
||
<GA className="w-5 lg:w-7 rounded-md" />
|
||
<US className="w-5 lg:w-7 rounded-md" />
|
||
<EC className="w-5 lg:w-7 rounded-md" />
|
||
<AM className="w-5 lg:w-7 rounded-md" />
|
||
<GB className="w-5 lg:w-7 rounded-md" />
|
||
<GD className="w-5 lg:w-7 rounded-md" />
|
||
</div>
|
||
</div>
|
||
<div className="w-full h-full bg-purple-950 text-center rounded-lg md:text-xl font-bold shadow-inner shadow-purple-600 px-4 py-2">
|
||
{price} تومان
|
||
</div>
|
||
<div className="w-full h-full grid grid-cols-1">
|
||
<Button
|
||
extra="shadow-inner shadow-gray-400"
|
||
onClick={() => toggleModal()}
|
||
>
|
||
{btnText}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProductBox;
|