Add library detail header component
This commit is contained in:
jeffvli
parent
4326f6cf91
commit
152be5d7e6
2 changed files with 168 additions and 0 deletions
167
src/renderer/features/shared/components/library-header.tsx
Normal file
167
src/renderer/features/shared/components/library-header.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
@ -2,3 +2,4 @@ export * from './components/animated-page';
|
||||||
export * from './queries/music-folders-query';
|
export * from './queries/music-folders-query';
|
||||||
export * from './components/play-button';
|
export * from './components/play-button';
|
||||||
export * from './utils';
|
export * from './utils';
|
||||||
|
export * from './components/library-header';
|
||||||
|
|
|
||||||
Reference in a new issue