Add features & update project

2026-06-23 01:46:08 -04:00
parent 930fbf5965
commit fe72fc2957
39 changed files with 3106 additions and 178 deletions
@@ -0,0 +1,65 @@
+'use client';
+
+import { Circle, X } from 'lucide-react';
+
+import { Button } from '@spoon/ui';
+
+import { basename } from './languages';
+
+export type OpenFileTab = {
+  path: string;
+  dirty: boolean;
+};
+
+export const FileTabs = ({
+  tabs,
+  activePath,
+  onActivate,
+  onClose,
+}: {
+  tabs: OpenFileTab[];
+  activePath?: string;
+  onActivate: (path: string) => void;
+  onClose: (path: string) => void;
+}) => {
+  if (tabs.length === 0) return null;
+  return (
+    <div className='border-border bg-muted/30 flex h-10 flex-none items-stretch overflow-x-auto border-b'>
+      {tabs.map((tab) => {
+        const active = tab.path === activePath;
+        return (
+          <div
+            key={tab.path}
+            className={
+              active
+                ? 'border-primary bg-background flex max-w-56 min-w-0 items-center border-t-2 border-r'
+                : 'border-border flex max-w-56 min-w-0 items-center border-r'
+            }
+            title={tab.path}
+          >
+            <button
+              type='button'
+              className='flex h-full min-w-0 flex-1 items-center gap-2 px-3 text-left text-xs'
+              onClick={() => onActivate(tab.path)}
+            >
+              {tab.dirty ? (
+                <Circle className='fill-primary text-primary size-2 flex-none' />
+              ) : null}
+              <span className='truncate font-mono'>{basename(tab.path)}</span>
+            </button>
+            <Button
+              type='button'
+              variant='ghost'
+              size='icon'
+              className='mr-1 size-6 flex-none'
+              aria-label={`Close ${tab.path}`}
+              onClick={() => onClose(tab.path)}
+            >
+              <X className='size-3' />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};