71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { Flex, HStack } from '@chakra-ui/react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { EmptyEnd } from '@/components/EmptyEnd';
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
|
import { SearchInput } from '@/components/SearchInput';
|
|
import { TopBar } from '@/components/TopBar/TopBar';
|
|
import { DisplayGender } from '@/components/gender/DisplayGender';
|
|
import { useColorModeValue } from '@/components/ui/color-mode';
|
|
import { useOrderedGenders } from '@/service/Gender';
|
|
|
|
export const GendersPage = () => {
|
|
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
|
|
const { isLoading, dataGenders } = useOrderedGenders(filterTitle);
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (genderId: number) => {
|
|
navigate(`/gender/${genderId}`);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<>
|
|
<TopBar title="All Genders" />
|
|
<PageLayoutInfoCenter>No Gender available</PageLayoutInfoCenter>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<TopBar title="All Genders">
|
|
<SearchInput onChange={setFilterTitle} />
|
|
</TopBar>
|
|
<PageLayout>
|
|
<HStack
|
|
wrap="wrap"
|
|
gap="20px"
|
|
marginX="auto"
|
|
padding="20px"
|
|
justify="center"
|
|
>
|
|
{dataGenders.map((data) => (
|
|
<Flex
|
|
align="flex-start"
|
|
width="270px"
|
|
height="120px"
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
|
key={data.id}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
onClick={() => onSelectItem(data.id)}
|
|
>
|
|
<DisplayGender dataGender={data} />
|
|
</Flex>
|
|
))}
|
|
</HStack>
|
|
<EmptyEnd />
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|