40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Panel } from './Panel';
|
|
import { Stack } from './Stack';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { IconContainer } from './IconContainer';
|
|
|
|
import { Icon } from './Icon';
|
|
|
|
interface FeatureItemProps {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
/**
|
|
* FeatureItem - A semantic UI component for a single feature/pillar.
|
|
* Allowed to use Stack primitive.
|
|
*/
|
|
export function FeatureItem({ title, description, icon }: FeatureItemProps) {
|
|
return (
|
|
<Panel variant="default" padding="lg">
|
|
<Stack direction="col" gap={6}>
|
|
<IconContainer>
|
|
<Icon icon={icon} size={5} intent="primary" />
|
|
</IconContainer>
|
|
<Stack direction="col" gap={4}>
|
|
<Heading level={3} weight="bold" uppercase>
|
|
{title}
|
|
</Heading>
|
|
<Text size="md" variant="med" leading="relaxed" block>
|
|
{description}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
}
|