feat: add window titlebar

src/shared/titlebar/controls/gnome.tsx

@@ -0,0 +1,39 @@
+import { HTMLProps, useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { AppWindowContext, WindowButton, WindowIcons } from '@shared/titlebar';
+
+export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
+  const { isWindowMaximized, minimizeWindow, maximizeWindow, closeWindow } =
+    useContext(AppWindowContext);
+
+  return (
+    <div
+      className={twMerge('mr-[10px] h-auto items-center space-x-[13px]', className)}
+      {...props}
+    >
+      <WindowButton
+        onClick={minimizeWindow}
+        className="m-0 aspect-square h-6 w-6 cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
+      >
+        <WindowIcons.minimizeWin className="h-[9px] w-[9px]" />
+      </WindowButton>
+      <WindowButton
+        onClick={maximizeWindow}
+        className="m-0 aspect-square h-6 w-6 cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
+      >
+        {!isWindowMaximized ? (
+          <WindowIcons.maximizeWin className="h-2 w-2" />
+        ) : (
+          <WindowIcons.maximizeRestoreWin className="h-[9px] w-[9px]" />
+        )}
+      </WindowButton>
+      <WindowButton
+        onClick={closeWindow}
+        className="m-0 aspect-square h-6 w-6 cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
+      >
+        <WindowIcons.closeWin className="h-2 w-2" />
+      </WindowButton>
+    </div>
+  );
+}