plane/apps/www/components/pricing/Table.tsx
2022-12-21 00:56:19 +05:30

178 lines
5.8 KiB
TypeScript

// next imports
import Image from "next/image";
const FeaturesTable = () => {
const tableData = [
{
name: "Lorem ipsum",
free: true,
pro: true,
enterprise: true
},
{
name: "Lorem ipsum",
free: true,
pro: true,
enterprise: true
},
{
name: "Lorem ipsum",
free: true,
pro: true,
enterprise: true
},
{
name: "Lorem ipsum",
free: true,
pro: true,
enterprise: true
},
{
name: "Lorem ipsum",
free: false,
pro: true,
enterprise: true
},
{
name: "Lorem ipsum",
free: false,
pro: false,
enterprise: true
}
];
return (
<div className="w-full pb-20">
<div className="container px-5 mx-auto overflow-auto">
<table className="min-w-full">
<thead className="rounded">
<tr className="h-[50px]">
<th
scope="col"
className="px-3 text-left font-medium text-[#ffffff] text-xl"
>
Lorem ipsum
</th>
<th
scope="col"
className="px-3 py-3.5 text-left font-medium text-[#ffffff] text-xl"
>
<div className="mb-14">Cloud Free</div>
</th>
<th
scope="col"
className="px-3 py-3.5 text-left font-medium text-[#ffffff] text-xl"
>
<div className="mb-14"> Cloud Pro</div>
</th>
<th
scope="col"
className="px-3 py-3.5 text-left font-medium text-[#ffffff] text-xl"
>
<div className="mb-14">Enterprise</div>
</th>
</tr>
</thead>
<tbody
className="card-gradient mt-10 rounded-lg text-[#C0C0C0] divide-y divide-[#2A3144]"
>
{tableData.map((data: any) => (
<tr key={`data-${data.id}`} className="m-2 h-[50px] rounded-lg">
<td className="whitespace-nowrap px-3 py-4 text-">
{data.name}
</td>
<td className="whitespace-nowrap px-3 py-4">
{data.free && (
<div className="flex-shrink-0 relative w-[24px] h-[24px]">
<Image
src="/icons/check-circle.svg"
className="w-full h-full object-contain rounded"
layout="fill"
alt="user"
/>
</div>
)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{" "}
{data.pro && (
<div className="flex-shrink-0 relative w-[24px] h-[24px]">
<Image
src="/icons/check-circle.svg"
className="w-full h-full object-contain rounded"
layout="fill"
alt="user"
/>
</div>
)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{data.enterprise && (
<div className="flex-shrink-0 relative w-[24px] h-[24px]">
<Image
src="/icons/check-circle.svg"
className="w-full h-full object-contain rounded"
layout="fill"
alt="user"
/>
</div>
)}
</td>
</tr>
))}
</tbody>
<div className="mt-10"></div>
<div className="text-white mb-4 text-xl px-3">Lorem ipsum</div>
<tbody className="card-gradient mt-10 rounded overflow-hidden text-[#C0C0C0] divide-y divide-[#2A3144]">
{tableData.map((data: any) => (
<tr key={`data-${data.id}`} className="m-2 h-[50px]">
<td className="whitespace-nowrap px-3 py-4 text-">
{data.name}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{data.free && (
<div className="flex-shrink-0 relative w-[24px] h-[24px]">
<Image
src="/icons/check-circle.svg"
className="w-full h-full object-contain rounded"
layout="fill"
alt="user"
/>
</div>
)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{" "}
{data.pro && (
<div className="flex-shrink-0 relative w-[24px] h-[24px]">
<Image
src="/icons/check-circle.svg"
className="w-full h-full object-contain rounded"
layout="fill"
alt="user"
/>
</div>
)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{data.enterprise && (
<div className="flex-shrink-0 relative w-[24px] h-[24px]">
<Image
src="/icons/check-circle.svg"
className="w-full h-full object-contain rounded"
layout="fill"
alt="user"
/>
</div>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default FeaturesTable;