34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import H3 from "@moduletrace/twui/layout/H3";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Row from "@moduletrace/twui/layout/Row";
|
|
import type { FeatureItem } from "@/src/types";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
|
|
type Props = FeatureItem & {
|
|
index: number;
|
|
};
|
|
|
|
export default function FeatureCard({
|
|
Icon,
|
|
title,
|
|
description,
|
|
index,
|
|
}: Props) {
|
|
return (
|
|
<Stack className="h-full w-full gap-14! justify-between bg-light dark:bg-background-dark p-8 xl:p-10 transition-colors hover:bg-white dark:hover:bg-white/5">
|
|
<Row className="w-full justify-between">
|
|
<Span className="text-xs text-slate-400">
|
|
{String(index + 1).padStart(2, "0")}
|
|
</Span>
|
|
<Icon size={20} strokeWidth={1.5} className="text-slate-700 dark:text-slate-300" />
|
|
</Row>
|
|
<Stack className="gap-3!">
|
|
<H3>{title}</H3>
|
|
<Span className="text-slate-500 dark:text-slate-400 leading-relaxed">
|
|
{description}
|
|
</Span>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|