86 lines
1.9 KiB
TypeScript
86 lines
1.9 KiB
TypeScript
import { ReactElement } from 'react';
|
|
|
|
import { Flex, Text, Wrap, WrapItem } from '@chakra-ui/react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { TopBar } from '@/components/TopBar/TopBar';
|
|
import { DataTools, TypeCheck } from '@/utils/data-tools';
|
|
import { useThemeMode } from '@/utils/theme-tools';
|
|
|
|
export const alphabet = [
|
|
'a',
|
|
'b',
|
|
'c',
|
|
'd',
|
|
'e',
|
|
'f',
|
|
'g',
|
|
'h',
|
|
'i',
|
|
'j',
|
|
'k',
|
|
'l',
|
|
'm',
|
|
'n',
|
|
'o',
|
|
'p',
|
|
'q',
|
|
'r',
|
|
's',
|
|
't',
|
|
'u',
|
|
'v',
|
|
'w',
|
|
'x',
|
|
'y',
|
|
'z',
|
|
];
|
|
const possibilities = [...alphabet, '^^'];
|
|
|
|
export const TrackSelectionPage = () => {
|
|
const { mode } = useThemeMode();
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (data: string) => {
|
|
navigate(`/track/${data}`);
|
|
};
|
|
return (
|
|
<>
|
|
<TopBar title="All Tracks" />
|
|
<PageLayout>
|
|
<Wrap spacing="20px" marginX="auto" padding="20px" justify="center">
|
|
{possibilities.map((data) => (
|
|
<WrapItem
|
|
width="75px"
|
|
height="75px"
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={mode('#FFFFFF88', '#00000088')}
|
|
key={data}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: mode('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
onClick={() => onSelectItem(data)}
|
|
>
|
|
<Flex direction="column" width="full" height="full">
|
|
<Text
|
|
margin="auto"
|
|
fontSize="25px"
|
|
fontWeight="bold"
|
|
textTransform="uppercase"
|
|
userSelect="none"
|
|
>
|
|
{data.toUpperCase()}
|
|
</Text>
|
|
</Flex>
|
|
</WrapItem>
|
|
))}
|
|
</Wrap>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|