102 lines
4.6 KiB
JavaScript
102 lines
4.6 KiB
JavaScript
import Tippy from "@tippyjs/react";
|
|
import Heading from "@/components/Heading";
|
|
import Image from "@/components/Image";
|
|
import Section from "@/components/Section";
|
|
|
|
import { comparison } from "@/mocks/comparison";
|
|
|
|
type ComparisonProps = {};
|
|
|
|
const Comparison = ({}: ComparisonProps) => {
|
|
const check = (value: any, enterprise?: boolean) =>
|
|
typeof value === "boolean" ? (
|
|
value === true ? (
|
|
<Image
|
|
src={
|
|
enterprise
|
|
? "/images/check-yellow.svg"
|
|
: "/images/check.svg"
|
|
}
|
|
width={24}
|
|
height={24}
|
|
alt="Check"
|
|
/>
|
|
) : null
|
|
) : (
|
|
value
|
|
);
|
|
|
|
return (
|
|
<Section>
|
|
<div className="container">
|
|
<Heading
|
|
className="md:text-center"
|
|
title="Compare plans & features"
|
|
/>
|
|
<div className="-mx-5 px-5 overflow-auto">
|
|
<table className="table-fixed w-full min-w-[32rem]">
|
|
<tbody>
|
|
<tr className="h6">
|
|
<td className="w-[35%] py-4 pr-10">Features</td>
|
|
<td className="p-4 text-center text-color-2">
|
|
Basic
|
|
</td>
|
|
<td className="p-4 text-center text-color-1">
|
|
Premium
|
|
</td>
|
|
<td className="p-4 text-center text-color-3">
|
|
Enterprise
|
|
</td>
|
|
</tr>
|
|
{comparison.map((item) => (
|
|
<tr className="body-2" key={item.id}>
|
|
<td className="w-[35%] h-[4.75rem] py-2.5 pr-2.5 border-t border-n-1/5">
|
|
<div className="flex items-center">
|
|
{item.title}
|
|
<Tippy
|
|
className="p-2.5 bg-n-1 text-n-8 rounded-xl"
|
|
content="Provide dedicated servers for enterprises to ensure maximum security, performance, and uptime."
|
|
placement="right"
|
|
animation="shift-toward"
|
|
>
|
|
<div className="flex-shrink-0 ml-3 opacity-30 transition-opacity hover:opacity-100">
|
|
<Image
|
|
src="/images/icons/help-circle.svg"
|
|
width={24}
|
|
height={24}
|
|
alt="Help"
|
|
/>
|
|
</div>
|
|
</Tippy>
|
|
</div>
|
|
</td>
|
|
<td className="h-[4.75rem] p-2.5 border-t border-n-1/5 text-center">
|
|
{check(
|
|
item.pricing[0],
|
|
item.enterprise
|
|
)}
|
|
</td>
|
|
<td className="h-[4.75rem] p-2.5 border-t border-n-1/5 text-center">
|
|
{check(
|
|
item.pricing[1],
|
|
item.enterprise
|
|
)}
|
|
</td>
|
|
<td className="h-[4.75rem] p-2.5 border-t border-n-1/5 text-center">
|
|
{check(
|
|
item.pricing[2],
|
|
item.enterprise
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Comparison;
|