Add genres to album detail page

src/renderer/features/albums/components/album-detail-content.tsx

@@ -13,9 +13,10 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { Box, Group, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
-import { useParams } from 'react-router';
+import { generatePath, useParams } from 'react-router';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { useSongListStore } from '/@/renderer/store';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useContainerQuery } from '/@/renderer/hooks';
@@ -177,12 +178,15 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
     }
   };
 
+  const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
+
   const { intersectRef, tableContainerRef } = useFixedTableHeader();
 
   return (
     <ContentContainer>
+      <Box component="section">
         <Group
-        ref={intersectRef}
+          ref={showGenres ? null : intersectRef}
           className="test"
           pb="2rem"
           pt="1rem"
@@ -229,6 +233,30 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
             </DropdownMenu>
           </Group>
         </Group>
+      </Box>
+      {showGenres && (
+        <Box
+          ref={showGenres ? intersectRef : null}
+          component="section"
+          py="1rem"
+        >
+          <Group>
+            {detailQuery?.data?.genres?.map((genre) => (
+              <Button
+                key={`genre-${genre.id}`}
+                compact
+                component={Link}
+                radius="md"
+                size="sm"
+                to={generatePath(`${AppRoute.LIBRARY_ALBUMS}?genre=${genre.id}`, { albumId })}
+                variant="default"
+              >
+                {genre.name}
+              </Button>
+            ))}
+          </Group>
+        </Box>
+      )}
       <Box ref={tableContainerRef}>
         <VirtualTable
           ref={tableRef}