Support dynamic page headers

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

@@ -0,0 +1,56 @@
+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="xl"
+    >
+      {children}
+    </Group>
+  );
+};
+
+interface TitleProps {
+  children: ReactNode;
+}
+
+const Title = ({ children }: TitleProps) => {
+  return (
+    <TextTitle
+      fw="bold"
+      order={2}
+      overflow="hidden"
+    >
+      {children}
+    </TextTitle>
+  );
+};
+
+interface PlayButtonProps {
+  onClick: () => void;
+  size?: number;
+}
+
+const PlayButton = ({ size, onClick }: PlayButtonProps) => {
+  return (
+    <PlayBtn
+      h={size || 45}
+      w={size || 45}
+      onClick={onClick}
+    />
+  );
+};
+
+LibraryHeaderBar.Title = Title;
+LibraryHeaderBar.PlayButton = PlayButton;

src/renderer/features/shared/index.ts

@@ -3,3 +3,4 @@ export * from './queries/music-folders-query';
 export * from './components/play-button';
 export * from './utils';
 export * from './components/library-header';
+export * from './components/library-header-bar';