+ )
+}
+
+export { BufferGroup }
diff --git a/components/buffer/header.tsx b/components/buffer/header.tsx
new file mode 100644
index 0000000..fe4a8ed
--- /dev/null
+++ b/components/buffer/header.tsx
@@ -0,0 +1,100 @@
+import { TabRecord } from "./tabs"
+import { Button } from "@/components/core/button"
+import { TabButton } from "./tabs"
+
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger
+} from "@/components/core/tooltip"
+
+import {
+ ArrowLeftIcon,
+ ArrowRightIcon,
+ PlusIcon,
+ Columns2Icon,
+} from "lucide-react"
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/core/dropdown-menu"
+
+type HeaderProps = {
+ tabs: Array
+ active: number
+ setActive: (tab: number) => void
+ onSplit: (orientation: "vertical" | "horizontal" | null) => void
+ onCloseTab: (index: number) => void
+ onCloseBuffer: () => void
+}
+
+function Header({ tabs, active, setActive, onSplit, onCloseTab, onCloseBuffer } : HeaderProps) {
+ // The currently active tab does not have a lower border, so that it
+ // looks like its merging with the buffer content. Adding an
+ // outline/border to the header ruins the effect.
+ return (
+
+
+
+
+
+
+ { /* Each tab element has its own lower & right border */ }
+ {
+ tabs.map((tab, i) => (
+
+ ))
+ }
+ { /* Fill the rest of the space, so the whole header can have a
+ lower border. */ }
+
+