File size: 1,783 Bytes
9470652 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import features from "@components/Landing/features.json";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@catalyst/table";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
const FeatureComparisonTable = () => {
const renderEntry = (input: true | string) => {
return input === true ? (
<CheckCircleIcon className="text-emerald-500 w-8 h-8 mx-auto"></CheckCircleIcon>
) : (
input
);
};
return (
<div className="flex justify-center">
<div className="bg-gray-800 rounded-xl border border-gray-700 overflow-x-scroll sm:overflow-hidden grow">
<Table
dense
bleed
grid
striped
className="ml-0 mr-0 [--gutter:theme(spacing.6)]"
>
<TableHead>
<TableRow>
<TableHeader className="text-center">Feature</TableHeader>
<TableHeader className="text-center">DataLine</TableHeader>
<TableHeader className="text-center">ChatGPT Plus</TableHeader>
</TableRow>
</TableHead>
<TableBody>
{features.features.map(({ feature, dataline, chatgpt }) => (
<TableRow key={feature}>
<TableCell className="text-zinc-400 text-wrap">
{feature}
</TableCell>
<TableCell className="text-zinc-400">
{dataline && renderEntry(dataline)}
</TableCell>
<TableCell className="text-zinc-400">
{chatgpt && renderEntry(chatgpt)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
};
export default FeatureComparisonTable;
|