Lint all files

src/renderer/features/shared/components/library-header.tsx

@@ -10,150 +10,151 @@ 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;
+    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%));
+    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%;
+    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;
-  }
+    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};
+    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);
+    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;
+    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';
+    (
+        { 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;
+        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`,
-              }}
+        return (
+            <HeaderContainer
+                ref={mergedRef}
+                imageSize={imageSize}
             >
-              <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>
-    );
-  },
+                <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>
+        );
+    },
 );