72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import NavLink from '../link/NavLink';
|
|
import Card from '@/components/card/Card';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
useColorModeValue,
|
|
Text,
|
|
Icon,
|
|
} from '@chakra-ui/react';
|
|
import { MdEdit } from 'react-icons/md';
|
|
|
|
export default function Default(props: {
|
|
illustration: string | JSX.Element;
|
|
name: string;
|
|
description: string;
|
|
link: string;
|
|
edit?: string;
|
|
action?: any;
|
|
admin?: boolean;
|
|
}) {
|
|
const { illustration, name, description, link, edit, admin } = props;
|
|
const textColor = useColorModeValue('#120F43', 'white');
|
|
const gray = useColorModeValue('gray.500', 'white');
|
|
|
|
return (
|
|
<NavLink href={link}>
|
|
<Card h="100%" py="24px" px="24px">
|
|
<Flex
|
|
my="auto"
|
|
h="100%"
|
|
direction={'column'}
|
|
align={{ base: 'center', xl: 'start' }}
|
|
justify={{ base: 'center', xl: 'center' }}
|
|
>
|
|
<Flex align="start" w="100%" mb="30px">
|
|
<Text fontSize="34px" lineHeight={'120%'}>
|
|
{illustration}
|
|
</Text>
|
|
{admin ? (
|
|
<Flex ms="auto">
|
|
<NavLink href={edit ? edit : '/admin/edit-template'}>
|
|
<Button
|
|
w="24px"
|
|
h="24px"
|
|
_hover={{}}
|
|
_focus={{}}
|
|
_active={{}}
|
|
bg="none"
|
|
>
|
|
<Icon w="24px" h="24px" as={MdEdit} color={gray} />
|
|
</Button>
|
|
</NavLink>
|
|
</Flex>
|
|
) : null}
|
|
</Flex>
|
|
<Box>
|
|
<Text fontSize="lg" color={textColor} fontWeight="700" mb="8px">
|
|
{name}
|
|
</Text>
|
|
<Text fontSize="sm" color={gray} fontWeight="500">
|
|
{description}
|
|
</Text>
|
|
</Box>
|
|
</Flex>
|
|
</Card>
|
|
</NavLink>
|
|
);
|
|
}
|