Rename

src/renderer/features/titlebar/components/title-bar.tsx

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { Group } from '@mantine/core';
+import { Text } from '@/renderer/components';
+import { ActivityMenu } from '@/renderer/features/titlebar/components/activity-menu';
+import { AppMenu } from '@/renderer/features/titlebar/components/app-menu';
+import { useAuthStore } from '@/renderer/store';
+import { Font } from '@/renderer/styles';
+import { WindowControls } from '../../window-controls';
+
+interface TitlebarProps {
+  children?: ReactNode;
+}
+
+const TitlebarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+
+  button {
+    -webkit-app-region: no-drag;
+
+    svg {
+      transform: scaleX(1);
+    }
+  }
+`;
+
+const Left = styled.div`
+  display: flex;
+  flex: 1/3;
+  justify-content: center;
+  height: 100%;
+  padding-left: 1rem;
+`;
+
+const Center = styled.div`
+  display: flex;
+  flex: 1/3;
+  justify-content: center;
+  height: 100%;
+`;
+
+const Right = styled.div`
+  display: flex;
+  flex: 1/3;
+  justify-content: center;
+  height: 100%;
+`;
+
+export const Titlebar = ({ children }: TitlebarProps) => {
+  const isAuthenticated = useAuthStore((state) => !!state.accessToken);
+
+  return (
+    <>
+      <TitlebarContainer>
+        <Left>
+          <Group>
+            <Text font={Font.POPPINS}>Feishin</Text>
+          </Group>
+        </Left>
+        <Center />
+        <Right>
+          {children}
+          <Group spacing="xs">
+            {isAuthenticated && (
+              <>
+                <ActivityMenu />
+                <AppMenu />
+              </>
+            )}
+            <WindowControls />
+          </Group>
+        </Right>
+      </TitlebarContainer>
+    </>
+  );
+};
+
+Titlebar.defaultProps = {
+  children: undefined,
+};