summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/media-panel/tabbar.tsx
diff options
context:
space:
mode:
authorMaze <167211895+mazeincoding@users.noreply.github.com>2026-01-31 00:20:04 +0100
committerGitHub <noreply@github.com>2026-01-31 00:20:04 +0100
commit7bf0984698e43b9aa2dd879f65951318ed410390 (patch)
treeccf2cd590a47d550152afc07129cb55c71a9ec35 /apps/web/src/components/editor/media-panel/tabbar.tsx
parent0173db99448d1c4c6415dcf15272e17551b48b04 (diff)
downloadopencut-7bf0984698e43b9aa2dd879f65951318ed410390.tar.gz
codebase overhaul (#697)
Diffstat (limited to 'apps/web/src/components/editor/media-panel/tabbar.tsx')
-rw-r--r--apps/web/src/components/editor/media-panel/tabbar.tsx99
1 files changed, 0 insertions, 99 deletions
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
deleted file mode 100644
index e2bfdff7..00000000
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { Tab, tabs, useMediaPanelStore } from "./store";
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useEffect, useRef, useState } from "react";
-
-export function TabBar() {
- const { activeTab, setActiveTab } = useMediaPanelStore();
- const scrollRef = useRef<HTMLDivElement>(null);
- const [showTopFade, setShowTopFade] = useState(false);
- const [showBottomFade, setShowBottomFade] = useState(false);
-
- const checkScrollPosition = () => {
- const element = scrollRef.current;
- if (!element) return;
-
- const { scrollTop, scrollHeight, clientHeight } = element;
- setShowTopFade(scrollTop > 0);
- setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
- };
-
- useEffect(() => {
- const element = scrollRef.current;
- if (!element) return;
-
- checkScrollPosition();
- element.addEventListener("scroll", checkScrollPosition);
-
- const resizeObserver = new ResizeObserver(checkScrollPosition);
- resizeObserver.observe(element);
-
- return () => {
- element.removeEventListener("scroll", checkScrollPosition);
- resizeObserver.disconnect();
- };
- }, []);
-
- return (
- <div className="flex relative">
- <div
- ref={scrollRef}
- className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-y-auto scrollbar-hidden relative w-full py-4"
- >
- {(Object.keys(tabs) as Tab[]).map((tabKey) => {
- const tab = tabs[tabKey];
- return (
- <div
- className={cn(
- "flex z-[100] flex-col gap-0.5 items-center cursor-pointer",
- activeTab === tabKey
- ? "text-primary !opacity-100"
- : "text-muted-foreground"
- )}
- onClick={() => setActiveTab(tabKey)}
- key={tabKey}
- >
- <Tooltip delayDuration={10}>
- <TooltipTrigger asChild>
- <tab.icon className="size-[1.1rem]! opacity-100 hover:opacity-75" />
- </TooltipTrigger>
- <TooltipContent
- side="right"
- align="center"
- variant="sidebar"
- sideOffset={8}
- >
- <div className="dark:text-base-gray-950 text-black text-sm font-medium leading-none dark:text-white">
- {tab.label}
- </div>
- </TooltipContent>
- </Tooltip>
- </div>
- );
- })}
- </div>
-
- <FadeOverlay direction="top" show={showTopFade} />
- <FadeOverlay direction="bottom" show={showBottomFade} />
- </div>
- );
-}
-
-function FadeOverlay({ direction, show }: { direction: "top" | "bottom", show: boolean }) {
- return (
- <div
- className={cn(
- "absolute left-0 right-0 h-6 pointer-events-none z-[101] transition-opacity duration-200",
- direction === "top" && show
- ? "top-0 bg-gradient-to-b from-panel to-transparent"
- : "bottom-0 bg-gradient-to-t from-panel to-transparent"
- )}
- />
- );
-} \ No newline at end of file