diff --git a/src/renderer/components/badge/index.tsx b/src/renderer/components/badge/index.tsx index 111de779..4a1a1b98 100644 --- a/src/renderer/components/badge/index.tsx +++ b/src/renderer/components/badge/index.tsx @@ -1,6 +1,5 @@ import type { BadgeProps as MantineBadgeProps } from '@mantine/core'; -import { createPolymorphicComponent } from '@mantine/core'; -import { Badge as MantineBadge } from '@mantine/core'; +import { createPolymorphicComponent, Badge as MantineBadge } from '@mantine/core'; import styled from 'styled-components'; export type BadgeProps = MantineBadgeProps; diff --git a/src/renderer/components/button/index.tsx b/src/renderer/components/button/index.tsx index 389ca465..00e1dd92 100644 --- a/src/renderer/components/button/index.tsx +++ b/src/renderer/components/button/index.tsx @@ -248,7 +248,7 @@ interface HoldButtonProps extends ButtonProps { } export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => { - const [_timeoutRemaining, setTimeoutRemaining] = useState(timeoutProps.duration); + const [, setTimeoutRemaining] = useState(timeoutProps.duration); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(0); @@ -279,12 +279,12 @@ export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => { }, [clear, isRunning, start]); return ( - <_Button + ); }; diff --git a/src/renderer/components/page-header/index.tsx b/src/renderer/components/page-header/index.tsx index 073d0090..93cf1cb2 100644 --- a/src/renderer/components/page-header/index.tsx +++ b/src/renderer/components/page-header/index.tsx @@ -3,7 +3,8 @@ import { useEffect, useRef } from 'react'; import styled from 'styled-components'; import { useShouldPadTitlebar } from '/@/renderer/hooks'; -const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }>` +const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string; position?: string }>` + position: ${(props) => props.position}; z-index: 100; width: 100%; height: ${(props) => props.height || '60px'}; @@ -12,6 +13,7 @@ const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }> `; const Header = styled(motion.div)<{ $padRight?: boolean }>` + z-index: 15; height: 100%; margin-right: ${(props) => props.$padRight && '170px'}; padding: 1rem; @@ -26,14 +28,41 @@ const Header = styled(motion.div)<{ $padRight?: boolean }>` } `; +// const BackgroundImage = styled.div<{ background: string }>` +// position: absolute; +// top: 0; +// z-index: -1; +// width: 100%; +// height: 100%; +// background: ${(props) => props.background}; +// `; + +// const BackgroundImageOverlay = styled.div` +// position: absolute; +// top: 0; +// left: 0; +// z-index: -1; +// width: 100%; +// height: 100%; +// /* background: linear-gradient(180deg, rgba(25, 26, 28, 0%), var(--main-bg)); */ +// /* background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); */ +// `; + interface PageHeaderProps { backgroundColor?: string; children?: React.ReactNode; height?: string; + position?: string; useOpacity?: boolean; } -export const PageHeader = ({ height, backgroundColor, useOpacity, children }: PageHeaderProps) => { +export const PageHeader = ({ + position, + height, + backgroundColor, + useOpacity, + children, +}: PageHeaderProps) => { const ref = useRef(null); const padRight = useShouldPadTitlebar(); @@ -51,8 +80,11 @@ export const PageHeader = ({ height, backgroundColor, useOpacity, children }: Pa transition: { duration: 1.5 }, }} height={height} + position={position} >
{children}
+ {/* */} + {/* */} ); }; diff --git a/src/renderer/features/player/components/slider.tsx b/src/renderer/features/player/components/slider.tsx index fb675dc1..8fa82656 100644 --- a/src/renderer/features/player/components/slider.tsx +++ b/src/renderer/features/player/components/slider.tsx @@ -91,9 +91,9 @@ const StyledTrack = styled.div` `; const Track = (props: any, state: any) => ( - // eslint-disable-next-line react/destructuring-assignment ); diff --git a/src/renderer/features/songs/index.ts b/src/renderer/features/songs/index.ts index bac3bf76..e69de29b 100644 --- a/src/renderer/features/songs/index.ts +++ b/src/renderer/features/songs/index.ts @@ -1 +0,0 @@ -export * from './routes/song-list-route';