From 152be5d7e63364aadfa224ef5933893a1b602fd6 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 2 Jan 2023 03:47:05 -0800
Subject: [PATCH] Add library detail header component

---
 .../shared/components/library-header.tsx      | 167 ++++++++++++++++++
 src/renderer/features/shared/index.ts         |   1 +
 2 files changed, 168 insertions(+)
 create mode 100644 src/renderer/features/shared/components/library-header.tsx

diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
new file mode 100644
index 00000000..a68879bb
--- /dev/null
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -0,0 +1,167 @@
+import { Center, Group } from '@mantine/core';
+import { useMergedRef } from '@mantine/hooks';
+import { forwardRef, ReactNode, Ref } from 'react';
+import { RiAlbumFill } from 'react-icons/ri';
+import { Link } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
+import styled from 'styled-components';
+import { Text, TextTitle } from '/@/renderer/components';
+import { useContainerQuery } from '/@/renderer/hooks';
+import { LibraryItem } from '/@/renderer/types';
+
+const HeaderContainer = styled.div<{ imageSize: number }>`
+  position: relative;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-template-areas: 'image info';
+  grid-template-rows: 1fr;
+  grid-template-columns: ${(props) => props.imageSize + 25}px 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(SimpleImg)`
+  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)), var(--background-noise);
+`;
+
+interface LibraryHeaderProps {
+  background: string;
+  children?: ReactNode;
+  imagePlaceholderUrl?: string | null;
+  imageUrl?: string | null;
+  item: { route: string; type: LibraryItem };
+  title: string;
+}
+
+export const LibraryHeader = forwardRef(
+  (
+    { imageUrl, imagePlaceholderUrl, background, title, item, children }: LibraryHeaderProps,
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    const cq = useContainerQuery();
+    const mergedRef = useMergedRef(ref, cq.ref);
+    const titleSize = cq.isXl
+      ? '6rem'
+      : cq.isLg
+      ? '5.5rem'
+      : cq.isMd
+      ? '4.5rem'
+      : cq.isSm
+      ? '3.5rem'
+      : '2rem';
+
+    const imageSize = cq.isLg ? 225 : cq.isMd ? 200 : cq.isSm ? 175 : 150;
+
+    return (
+      <HeaderContainer
+        ref={mergedRef}
+        imageSize={imageSize}
+      >
+        <BackgroundImage background={background} />
+        <BackgroundImageOverlay />
+        <CoverImageWrapper>
+          {imageUrl ? (
+            <StyledImage
+              alt="cover"
+              height={imageSize}
+              placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
+              src={imageUrl}
+              width={imageSize}
+            />
+          ) : (
+            <Center
+              sx={{
+                background: 'var(--placeholder-bg)',
+                borderRadius: 'var(--card-default-radius)',
+                height: `${imageSize}px`,
+                width: `${imageSize}px`,
+              }}
+            >
+              <RiAlbumFill
+                color="var(--placeholder-fg)"
+                size={35}
+              />
+            </Center>
+          )}
+        </CoverImageWrapper>
+        <MetadataWrapper>
+          <Group>
+            <Text
+              $link
+              component={Link}
+              fw="600"
+              sx={{ textTransform: 'uppercase' }}
+              to={item.route}
+            >
+              {item.type}
+            </Text>
+          </Group>
+          <TextTitle
+            fw="900"
+            lh="1"
+            mb="0.12em"
+            mt=".08em"
+            sx={{ fontSize: titleSize }}
+          >
+            {title}
+          </TextTitle>
+          <Group
+            spacing="xs"
+            sx={{
+              WebkitBoxOrient: 'vertical',
+              WebkitLineClamp: 2,
+              display: '-webkit-box',
+              overflow: 'hidden',
+            }}
+          />
+          {children}
+        </MetadataWrapper>
+      </HeaderContainer>
+    );
+  },
+);
diff --git a/src/renderer/features/shared/index.ts b/src/renderer/features/shared/index.ts
index 647f6b02..ddb552e3 100644
--- a/src/renderer/features/shared/index.ts
+++ b/src/renderer/features/shared/index.ts
@@ -2,3 +2,4 @@ export * from './components/animated-page';
 export * from './queries/music-folders-query';
 export * from './components/play-button';
 export * from './utils';
+export * from './components/library-header';