160 lines
4.8 KiB
TypeScript
160 lines
4.8 KiB
TypeScript
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 { LibraryItem } from '/@/renderer/api/types';
|
|
import { Text, TextTitle } from '/@/renderer/components';
|
|
import { useContainerQuery } from '/@/renderer/hooks';
|
|
|
|
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
|
|
? '5rem'
|
|
: cq.isSm
|
|
? '4.5rem'
|
|
: '3rem';
|
|
|
|
const imageSize = cq.isLg ? 250 : cq.isMd ? 225 : cq.isSm ? 200 : 175;
|
|
|
|
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}
|
|
to={item.route}
|
|
tt="uppercase"
|
|
weight={600}
|
|
>
|
|
{item.type}
|
|
</Text>
|
|
</Group>
|
|
<TextTitle
|
|
lh={1.15}
|
|
lineClamp={2}
|
|
overflow="hidden"
|
|
pb={cq.isXs ? '0' : cq.isSm ? '0.2rem' : '0.36rem'}
|
|
sx={{ fontSize: titleSize, overflow: 'hidden' }}
|
|
weight={900}
|
|
>
|
|
{title}
|
|
</TextTitle>
|
|
{children}
|
|
</MetadataWrapper>
|
|
</HeaderContainer>
|
|
);
|
|
},
|
|
);
|