diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-07-03 20:43:23 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-07-03 20:43:23 +0200 |
| commit | 59a6c539a150adf9ff9ed3d91854b2bea6e7c517 (patch) | |
| tree | 6e3d5f2e5cad95d314709ff19991d14f557514a6 /apps/web/src/components/editor/media-panel/store.ts | |
| parent | ef0828a13d6160eaa9e72b7f00350d9cfaa388e1 (diff) | |
| download | opencut-59a6c539a150adf9ff9ed3d91854b2bea6e7c517.tar.gz | |
feat: implement media panel with tab navigation
Diffstat (limited to 'apps/web/src/components/editor/media-panel/store.ts')
| -rw-r--r-- | apps/web/src/components/editor/media-panel/store.ts | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts new file mode 100644 index 00000000..a9a1e688 --- /dev/null +++ b/apps/web/src/components/editor/media-panel/store.ts @@ -0,0 +1,73 @@ +import {
+ CaptionsIcon,
+ ArrowLeftRightIcon,
+ SparklesIcon,
+ StickerIcon,
+ TextIcon,
+ MusicIcon,
+ VideoIcon,
+ BlendIcon,
+ SlidersHorizontalIcon,
+ LucideIcon,
+} from "lucide-react";
+import { create } from "zustand";
+
+export type Tab =
+ | "media"
+ | "audio"
+ | "text"
+ | "stickers"
+ | "effects"
+ | "transitions"
+ | "captions"
+ | "filters"
+ | "adjustment";
+
+export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
+ media: {
+ icon: VideoIcon,
+ label: "Media",
+ },
+ audio: {
+ icon: MusicIcon,
+ label: "Audio",
+ },
+ text: {
+ icon: TextIcon,
+ label: "Text",
+ },
+ stickers: {
+ icon: StickerIcon,
+ label: "Stickers",
+ },
+ effects: {
+ icon: SparklesIcon,
+ label: "Effects",
+ },
+ transitions: {
+ icon: ArrowLeftRightIcon,
+ label: "Transitions",
+ },
+ captions: {
+ icon: CaptionsIcon,
+ label: "Captions",
+ },
+ filters: {
+ icon: BlendIcon,
+ label: "Filters",
+ },
+ adjustment: {
+ icon: SlidersHorizontalIcon,
+ label: "Adjustment",
+ },
+};
+
+interface MediaPanelStore {
+ activeTab: Tab;
+ setActiveTab: (tab: Tab) => void;
+}
+
+export const useMediaPanelStore = create<MediaPanelStore>((set) => ({
+ activeTab: "media",
+ setActiveTab: (tab) => set({ activeTab: tab }),
+}));
|