diff options
| author | Maze <167211895+mazeincoding@users.noreply.github.com> | 2026-01-31 00:20:04 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-01-31 00:20:04 +0100 |
| commit | 7bf0984698e43b9aa2dd879f65951318ed410390 (patch) | |
| tree | ccf2cd590a47d550152afc07129cb55c71a9ec35 /apps/web/src/components/editor/media-panel/tabbar.tsx | |
| parent | 0173db99448d1c4c6415dcf15272e17551b48b04 (diff) | |
| download | opencut-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.tsx | 99 |
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 |
