34 lines
969 B
TypeScript
34 lines
969 B
TypeScript
import { TbAt, TbSun } from 'react-icons/tb';
|
|
import { Box, Stack, Text } from '@mantine/core';
|
|
import classes from './ContactIcons.module.css';
|
|
|
|
interface ContactIconProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
|
|
icon: typeof TbSun;
|
|
title: React.ReactNode;
|
|
description: React.ReactNode;
|
|
}
|
|
|
|
function ContactIcon({ icon: Icon, title, description, ...others }: ContactIconProps) {
|
|
return (
|
|
<div className={classes.wrapper} {...others}>
|
|
<Box mr="md">
|
|
<Icon size={24} />
|
|
</Box>
|
|
|
|
<div>
|
|
<Text size="xs" className={classes.title}>
|
|
{title}
|
|
</Text>
|
|
<Text className={classes.description}>{description}</Text>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const MOCKDATA = [{ title: 'Email', description: 'hello@mantine.dev', icon: TbAt }];
|
|
|
|
export function ContactIconsList() {
|
|
const items = MOCKDATA.map((item, index) => <ContactIcon key={index} {...item} />);
|
|
return <Stack>{items}</Stack>;
|
|
}
|