35 lines
1015 B
TypeScript
35 lines
1015 B
TypeScript
import React, { FC } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
|
|
|
|
import { CtaButton, PageSection } from '../';
|
|
|
|
import { ListItem } from './ListItem';
|
|
import { BenefitsSectionProps } from './types';
|
|
import { iconsMap } from './helper';
|
|
|
|
export const BenefitsSection: FC<BenefitsSectionProps> = ({
|
|
data: { heading, description, list } = {},
|
|
}) => {
|
|
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
|
|
|
return (
|
|
<PageSection>
|
|
<VStack w='full' spacing={2}>
|
|
<Heading as='h2'>{t(heading)}</Heading>
|
|
<Text>{t(description)}</Text>
|
|
</VStack>
|
|
<List display='flex' flexDirection='column' spacing={3}>
|
|
{list.map((itemKey, i) => (
|
|
<ListItem key={i} Icon={iconsMap[itemKey]}>
|
|
{t(itemKey)}
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<HStack w='full' justify='flex-end'>
|
|
<CtaButton />
|
|
</HStack>
|
|
</PageSection>
|
|
);
|
|
};
|