This repository has been archived on 2025-03-19. You can view files and clone it, but cannot push or open issues or pull requests.
feishin/src/renderer/features/shared/components/library-header-bar.tsx
2023-02-05 20:52:25 -08:00

55 lines
1,011 B
TypeScript

import { ReactNode } from 'react';
import { Group } from '@mantine/core';
import { TextTitle } from '/@/renderer/components';
import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
interface LibraryHeaderBarProps {
children: ReactNode;
}
export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
return (
<Group
noWrap
align="center"
h="100%"
px="1rem"
spacing="md"
>
{children}
</Group>
);
};
interface TitleProps {
children: ReactNode;
}
const Title = ({ children }: TitleProps) => {
return (
<TextTitle
order={1}
overflow="hidden"
weight={700}
>
{children}
</TextTitle>
);
};
interface PlayButtonProps {
onClick: () => void;
}
const PlayButton = ({ onClick }: PlayButtonProps) => {
return (
<PlayBtn
h="45px"
w="45px"
onClick={onClick}
/>
);
};
LibraryHeaderBar.Title = Title;
LibraryHeaderBar.PlayButton = PlayButton;