Add files

src/renderer/features/titlebar/components/titlebar.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import { Group } from '@mantine/core';
+import styled from 'styled-components';
+import { WindowControls } from '../../window-controls';
+import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+
+interface TitlebarProps {
+  children?: ReactNode;
+}
+
+const TitlebarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--titlebar-fg);
+
+  button {
+    -webkit-app-region: no-drag;
+  }
+`;
+
+// const Left = styled.div`
+//   display: flex;
+//   flex: 1/3;
+//   justify-content: center;
+//   height: 100%;
+//   padding-left: 1rem;
+//   opacity: 0;
+// `;
+
+// const Center = styled.div`
+//   display: flex;
+//   flex: 1/3;
+//   justify-content: center;
+//   height: 100%;
+//   opacity: 0;
+// `;
+
+const Right = styled.div`
+  display: flex;
+  flex: 1/3;
+  justify-content: center;
+  height: 100%;
+`;
+
+export const Titlebar = ({ children }: TitlebarProps) => {
+  return (
+    <>
+      <TitlebarContainer>
+        <Right>
+          {children}
+          <Group spacing="xs">
+            <>
+              {/* <ActivityMenu /> */}
+              <AppMenu />
+            </>
+            <WindowControls />
+          </Group>
+        </Right>
+      </TitlebarContainer>
+    </>
+  );
+};
+
+Titlebar.defaultProps = {
+  children: undefined,
+};