mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
108 lines
2.5 KiB
TypeScript
108 lines
2.5 KiB
TypeScript
import type { ElementType } from "react";
|
|
import { create } from "zustand";
|
|
import {
|
|
ArrowRightDoubleIcon,
|
|
ClosedCaptionIcon,
|
|
Folder03Icon,
|
|
Happy01Icon,
|
|
HeadphonesIcon,
|
|
MagicWand05Icon,
|
|
TextIcon,
|
|
Settings01Icon,
|
|
SlidersHorizontalIcon,
|
|
ColorsIcon,
|
|
} from "@hugeicons/core-free-icons";
|
|
import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
|
|
|
|
export const TAB_KEYS = [
|
|
"media",
|
|
"sounds",
|
|
"text",
|
|
"stickers",
|
|
"effects",
|
|
"transitions",
|
|
"captions",
|
|
"filters",
|
|
"adjustment",
|
|
"settings",
|
|
] as const;
|
|
|
|
export type Tab = (typeof TAB_KEYS)[number];
|
|
|
|
const createHugeiconsIcon =
|
|
({ icon }: { icon: IconSvgElement }) =>
|
|
({ className }: { className?: string }) => (
|
|
<HugeiconsIcon icon={icon} className={className} />
|
|
);
|
|
|
|
export const tabs = {
|
|
media: {
|
|
icon: createHugeiconsIcon({ icon: Folder03Icon }),
|
|
label: "Media",
|
|
},
|
|
sounds: {
|
|
icon: createHugeiconsIcon({ icon: HeadphonesIcon }),
|
|
label: "Sounds",
|
|
},
|
|
text: {
|
|
icon: createHugeiconsIcon({ icon: TextIcon }),
|
|
label: "Text",
|
|
},
|
|
stickers: {
|
|
icon: createHugeiconsIcon({ icon: Happy01Icon }),
|
|
label: "Stickers",
|
|
},
|
|
effects: {
|
|
icon: createHugeiconsIcon({ icon: MagicWand05Icon }),
|
|
label: "Effects",
|
|
},
|
|
transitions: {
|
|
icon: createHugeiconsIcon({ icon: ArrowRightDoubleIcon }),
|
|
label: "Transitions",
|
|
},
|
|
captions: {
|
|
icon: createHugeiconsIcon({ icon: ClosedCaptionIcon }),
|
|
label: "Captions",
|
|
},
|
|
filters: {
|
|
icon: createHugeiconsIcon({ icon: ColorsIcon }),
|
|
label: "Filters",
|
|
},
|
|
adjustment: {
|
|
icon: createHugeiconsIcon({ icon: SlidersHorizontalIcon }),
|
|
label: "Adjustment",
|
|
},
|
|
settings: {
|
|
icon: createHugeiconsIcon({ icon: Settings01Icon }),
|
|
label: "Settings",
|
|
},
|
|
} satisfies Record<
|
|
Tab,
|
|
{ icon: ElementType<{ className?: string }>; label: string }
|
|
>;
|
|
|
|
type MediaViewMode = "grid" | "list";
|
|
|
|
interface AssetsPanelStore {
|
|
activeTab: Tab;
|
|
setActiveTab: (tab: Tab) => void;
|
|
highlightMediaId: string | null;
|
|
requestRevealMedia: (mediaId: string) => void;
|
|
clearHighlight: () => void;
|
|
|
|
/* Media */
|
|
mediaViewMode: MediaViewMode;
|
|
setMediaViewMode: (mode: MediaViewMode) => void;
|
|
}
|
|
|
|
export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
|
|
activeTab: "media",
|
|
setActiveTab: (tab) => set({ activeTab: tab }),
|
|
highlightMediaId: null,
|
|
requestRevealMedia: (mediaId) =>
|
|
set({ activeTab: "media", highlightMediaId: mediaId }),
|
|
clearHighlight: () => set({ highlightMediaId: null }),
|
|
mediaViewMode: "grid",
|
|
setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
|
|
}));
|