42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Box, Button, Text, VStack, Icon, useColorMode } from "@chakra-ui/react";
|
|
import { FaPlus, FaUsers } from "react-icons/fa";
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface EmptyStateProps {
|
|
onAddData: () => void;
|
|
}
|
|
|
|
const EmptyState = ({ onAddData }: EmptyStateProps) => {
|
|
const { colorMode } = useColorMode();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Box
|
|
p={8}
|
|
borderRadius="lg"
|
|
boxShadow="md"
|
|
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
|
|
textAlign="center"
|
|
>
|
|
<VStack spacing={4}>
|
|
<Icon as={FaUsers} boxSize={12} color={colorMode === 'dark' ? 'blue.300' : 'blue.500'} />
|
|
<Text fontSize="xl" fontWeight="bold">
|
|
{t('journal.pl.attendance.emptyState.title')}
|
|
</Text>
|
|
<Text color={colorMode === 'dark' ? 'gray.400' : 'gray.600'}>
|
|
{t('journal.pl.attendance.emptyState.description')}
|
|
</Text>
|
|
<Button
|
|
leftIcon={<FaPlus />}
|
|
colorScheme="blue"
|
|
onClick={onAddData}
|
|
mt={2}
|
|
>
|
|
{t('journal.pl.common.add')}
|
|
</Button>
|
|
</VStack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default EmptyState;
|