Add initial album detail page

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

@@ -0,0 +1,182 @@
+import { Center, Group } from '@mantine/core';
+import { Fragment } from 'react';
+import { RiAlbumFill } from 'react-icons/ri';
+import { generatePath, useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Text, TextTitle } from '/@/renderer/components';
+import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
+import { useContainerQuery } from '/@/renderer/hooks';
+import { AppRoute } from '/@/renderer/router/routes';
+
+const HeaderContainer = styled.div`
+  position: relative;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-template-areas: 'image info';
+  grid-template-rows: 1fr;
+  grid-template-columns: 250px minmax(0, 1fr);
+  gap: 0.5rem;
+  width: 100%;
+  max-width: 100%;
+  height: 30vh;
+  min-height: 340px;
+  max-height: 500px;
+  padding: 5rem 2rem 2rem;
+`;
+
+const CoverImageWrapper = styled.div`
+  z-index: 15;
+  display: flex;
+  grid-area: image;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100%;
+  filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
+`;
+
+const MetadataWrapper = styled.div`
+  z-index: 15;
+  display: flex;
+  flex-direction: column;
+  grid-area: info;
+  justify-content: flex-end;
+  width: 100%;
+`;
+
+const StyledImage = styled.img`
+  object-fit: cover;
+`;
+
+const BackgroundImage = styled.div<{ background: string }>`
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: ${(props) => props.background};
+`;
+
+const BackgroundImageOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg));
+`;
+
+interface AlbumDetailHeaderProps {
+  background: string;
+}
+
+export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
+  const { albumId } = useParams() as { albumId: string };
+  const detailQuery = useAlbumDetail({ id: albumId });
+  const cq = useContainerQuery();
+
+  const titleSize = cq.isXl
+    ? '6rem'
+    : cq.isLg
+    ? '5.5rem'
+    : cq.isMd
+    ? '4.5rem'
+    : cq.isSm
+    ? '3.5rem'
+    : '2rem';
+
+  return (
+    <HeaderContainer ref={cq.ref}>
+      <BackgroundImage background={background} />
+      <BackgroundImageOverlay />
+      <CoverImageWrapper>
+        {detailQuery?.data?.imageUrl ? (
+          <StyledImage
+            alt="cover"
+            height={225}
+            src={detailQuery?.data.imageUrl}
+            width={225}
+          />
+        ) : (
+          <Center
+            sx={{
+              background: 'var(--placeholder-bg)',
+              borderRadius: 'var(--card-default-radius)',
+              height: `${80}px`,
+              width: `${80}px`,
+            }}
+          >
+            <RiAlbumFill
+              color="var(--placeholder-fg)"
+              size={35}
+            />
+          </Center>
+        )}
+      </CoverImageWrapper>
+      <MetadataWrapper>
+        <Group>
+          <Text
+            $link
+            component={Link}
+            fw="600"
+            sx={{ textTransform: 'uppercase' }}
+            to={AppRoute.LIBRARY_ALBUMS}
+          >
+            Album
+          </Text>
+          {detailQuery?.data?.releaseYear && (
+            <>
+              <Text>•</Text>
+              <Text>{detailQuery?.data?.releaseYear}</Text>
+            </>
+          )}
+        </Group>
+        <TextTitle
+          fw="900"
+          lh="1"
+          mb="0.12em"
+          mt=".08em"
+          sx={{ fontSize: titleSize }}
+        >
+          {detailQuery?.data?.name}
+        </TextTitle>
+        <Group
+          spacing="xs"
+          sx={{
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: 2,
+            display: '-webkit-box',
+            overflow: 'hidden',
+          }}
+        >
+          {detailQuery?.data?.albumArtists.map((artist, index) => (
+            <Fragment key={`artist-${artist.id}`}>
+              {index > 0 && (
+                <Text
+                  $noSelect
+                  sx={{
+                    display: 'inline-block',
+                    padding: '0 0.5rem',
+                  }}
+                >
+                  •
+                </Text>
+              )}
+              <Text
+                $link
+                component={Link}
+                fw="600"
+                to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                  albumArtistId: artist.id,
+                })}
+              >
+                {artist.name}
+              </Text>
+            </Fragment>
+          ))}
+        </Group>
+      </MetadataWrapper>
+    </HeaderContainer>
+  );
+};