58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Text, Wrap, WrapItem } from '@chakra-ui/react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
|
import { TopBar } from '@/components/TopBar/TopBar';
|
|
import { DisplayAlbum } from '@/components/album/DisplayAlbum';
|
|
import { useAlbumService } from '@/service/Album';
|
|
import { useThemeMode } from '@/utils/theme-tools';
|
|
|
|
export const AlbumsPage = () => {
|
|
const { store } = useAlbumService();
|
|
const { mode } = useThemeMode();
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (albumId: number) => {
|
|
navigate(`/album/${albumId}`);
|
|
};
|
|
|
|
if (store.isLoading) {
|
|
return (
|
|
<>
|
|
<TopBar />
|
|
<PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<TopBar />
|
|
<PageLayout>
|
|
<Text>All Albums:</Text>
|
|
|
|
<Wrap spacing="20px" marginX="auto" padding="20px" justify="center">
|
|
{store.data?.map((data) => (
|
|
<WrapItem
|
|
width="270px"
|
|
height="120px"
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={mode('#FFFFFF88', '#00000088')}
|
|
key={data.id}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: mode('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
onClick={() => onSelectItem(data.id)}
|
|
>
|
|
<DisplayAlbum dataAlbum={data} />
|
|
</WrapItem>
|
|
))}
|
|
</Wrap>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|