98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { ReactElement } from 'react';
|
|
|
|
import { Center, Flex, HStack, Text } from '@chakra-ui/react';
|
|
import { LuCrown, LuDisc3, LuEar, LuFileAudio } from 'react-icons/lu';
|
|
import { MdGroup } from 'react-icons/md';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { TopBar } from '@/components/TopBar/TopBar';
|
|
|
|
import { useColorModeValue } from '@/components/ui/color-mode';
|
|
|
|
type HomeListType = {
|
|
id: number;
|
|
name: string;
|
|
icon: ReactElement;
|
|
to: string;
|
|
};
|
|
const homeList: HomeListType[] = [
|
|
{
|
|
id: 1,
|
|
name: 'Genders',
|
|
icon: <LuCrown style={{ width: "100px", height: "100px" }} />,
|
|
to: 'gender',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Artists',
|
|
icon: <MdGroup style={{ width: "100px", height: "100px" }} />,
|
|
to: 'artist',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Albums',
|
|
icon: <LuDisc3 style={{ width: "100px", height: "100px" }} />,
|
|
to: 'album',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Tracks',
|
|
icon: <LuFileAudio style={{ width: "100px", height: "100px" }} />,
|
|
to: 'track',
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Playlists',
|
|
icon: <LuEar style={{ width: "100px", height: "100px" }} />,
|
|
to: 'playlists',
|
|
},
|
|
];
|
|
|
|
export const HomePage = () => {
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (data: HomeListType) => {
|
|
navigate(data.to);
|
|
};
|
|
return (
|
|
<>
|
|
<TopBar title="Home" />
|
|
<PageLayout>
|
|
<HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center">
|
|
{homeList.map((data) => (
|
|
<Flex align="flex-start"
|
|
width="200px"
|
|
height="190px"
|
|
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)}
|
|
>
|
|
<Flex direction="column" width="full" height="full">
|
|
<Center height="full">{data.icon}</Center>
|
|
<Center>
|
|
<Text
|
|
fontSize="25px"
|
|
fontWeight="bold"
|
|
textTransform="uppercase"
|
|
userSelect="none"
|
|
>
|
|
{data.name}
|
|
</Text>
|
|
</Center>
|
|
</Flex>
|
|
</Flex>
|
|
))}
|
|
</HStack>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|