Upload 84 files

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vercel
+.config

CHANGELOG.md

@@ -0,0 +1,94 @@
+# video-editor
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @designcombo/[email protected]
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [9439fb3]
+- Updated dependencies [9439fb3]
+  - @designcombo/[email protected]
+  - @designcombo/[email protected]

README.md

@@ -1,12 +1,46 @@
----
-title: RAI
-emoji: 📉
-colorFrom: blue
-colorTo: pink
-sdk: docker
-pinned: false
-license: unlicense
-app_port: 6001
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<p align="center">
+  <a href="https://github.com/lh-sn/react-video-editor">
+    <img width="150px" height="150px" src="https://ik.imagekit.io/snapmotion/logo-preview-public.svg"/>
+  </a>
+</p>
+<h1 align="center">React Video Editor</h1>
+
+<div align="center">
+  
+Video Editor application using React and TypeScript.
+
+<p align="center">
+    <a href="https://github.com/lh-sn/react-video-editor">Wombo</a>
+    ·  
+    <a href="https://discord.gg/jrZs3wZyM5">Discord</a>
+    ·  
+    <a href="https://github.com/lh-sn/react-video-editor">X</a>
+</p>
+</div>
+
+[![](https://ik.imagekit.io/snapmotion/preview-editor-2.png)](https://github.com/lh-sn/react-video-editor)
+
+## ✨ Features
+
+- 🎬 Timeline Editing: Arrange and trim media on a visual timeline.
+- 🌟 Effects and Transitions: Apply visual effects, filters, and transitions.
+- 🔀 Multi-track Support: Edit multiple video and audio tracks simultaneously.
+- 📤 Export Options: Save videos in various resolutions and formats.
+- 👀 Real-time Preview: See immediate previews of edits.
+
+## ⌨️ Development
+
+Clone locally:
+
+```bash
+$ git clone [email protected]:designcombo/react-video-editor.git
+$ cd react-video-editor
+$ pnpm install
+$ pnpm dev
+```
+
+Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/lh-sn/react-video-editor/react-video-editor).
+
+## 📝 License
+
+Copyright © 2023 [DesignCombo](https://github.com/lh-sn/react-video-editor).

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
+      rel="stylesheet"
+    />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Reddit+Mono:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "video-editor",
+  "private": true,
+  "version": "0.0.13",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@designcombo/core": "0.7.0",
+    "@hookform/resolvers": "^3.6.0",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "hotkeys-js": "^3.13.7",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.378.0",
+    "nanoid": "^5.0.7",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.5",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.5",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import useDataState from './store/use-data-state';
+import { getCompactFontData } from './utils/fonts';
+import { FONTS } from './data/fonts';
+import { Editor } from './components/editor';
+
+export const theme = {
+  colors: {
+    gray: {
+      50: '#fafafa',
+      100: '#f4f4f5',
+      200: '#e4e4e7',
+      300: '#d4d4d8',
+      400: '#a1a1aa',
+      500: '#71717a',
+      600: '#52525b',
+      700: '#3f3f46',
+      800: '#27272a',
+      900: '#18181b',
+      950: '#09090b',
+      1000: '#040405',
+      1100: '#010101',
+    },
+  },
+};
+
+function App() {
+  const { setCompactFonts, setFonts } = useDataState();
+
+  useEffect(() => {
+    setCompactFonts(getCompactFontData(FONTS));
+    setFonts(FONTS);
+  }, []);
+
+  return <Editor />;
+}
+
+export default App;

src/components/editor/control-item/animations.tsx

@@ -0,0 +1,76 @@
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  ANIMATIONS,
+  EDIT_OBJECT,
+  IAnimate,
+  dispatcher,
+  useEditorState,
+} from '@designcombo/core';
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+const Animations = () => {
+  const handleOnClick = (animation: any) => {
+    dispatcher.dispatch(EDIT_OBJECT, {
+      payload: {
+        animation: {
+          [animation.type]: {
+            name: animation.name,
+          },
+        },
+      },
+    });
+  };
+  const { trackItemsMap, activeIds } = useEditorState();
+  const targetType = trackItemsMap[activeIds[0]]?.type;
+  const filteredAnimations =
+    targetType === 'text'
+      ? ANIMATIONS
+      : ANIMATIONS.filter((animation) => animation.category === 'element');
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Animations
+      </div>
+      <div className="px-4">
+        <Tabs defaultValue="in" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="in">In</TabsTrigger>
+            <TabsTrigger value="out">Out</TabsTrigger>
+          </TabsList>
+          <TabsContent value="in">
+            {filteredAnimations
+              .filter((i) => i.type === 'in')
+              .map((animation, index) => (
+                <div
+                  onClick={() => handleOnClick(animation)}
+                  key={index}
+                  className="flex items-center gap-2 cursor-pointer"
+                >
+                  <div className="w-8 h-8 bg-zinc-600"></div>
+                  <div> {animation.name || animation.type}</div>
+                </div>
+              ))}
+          </TabsContent>
+          <TabsContent value="out">
+            {' '}
+            {filteredAnimations
+              .filter((i) => i.type === 'out')
+              .map((animation, index) => (
+                <div
+                  onClick={() => handleOnClick(animation)}
+                  key={index}
+                  className="flex items-center gap-2 cursor-pointer"
+                >
+                  <div className="w-8 h-8 bg-zinc-600"></div>
+                  <div> {animation.name || animation.type}</div>
+                </div>
+              ))}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default Animations;

src/components/editor/control-item/basic-audio.tsx

@@ -0,0 +1,11 @@
+const BasicAudio = () => {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        BasicAudio
+      </div>
+    </div>
+  );
+};
+
+export default BasicAudio;

src/components/editor/control-item/basic-image.tsx

@@ -0,0 +1,11 @@
+const BasicImage = () => {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        BasicImage
+      </div>
+    </div>
+  );
+};
+
+export default BasicImage;

src/components/editor/control-item/basic-text.tsx

@@ -0,0 +1,439 @@
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { DEFAULT_FONT } from '@/data/fonts';
+import { ICompactFont, IFont } from '@/interfaces/editor';
+import useDataState from '@/store/use-data-state';
+import { loadFonts } from '@/utils/fonts';
+import { EDIT_OBJECT, ITrackItem, dispatcher } from '@designcombo/core';
+import { ChevronDown, Ellipsis, Strikethrough, Underline } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import Opacity from './common/opacity';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import Transform from './common/transform';
+
+interface ITextControlProps {
+  color: string;
+  colorDisplay: string;
+  fontSize: number;
+  fontSizeDisplay: string;
+  fontFamily: string;
+  fontFamilyDisplay: string;
+  opacity: number;
+  opacityDisplay: string;
+  textAlign: string;
+  textDecoration: string;
+}
+
+const getStyleNameFromFontName = (fontName: string) => {
+  const fontFamilyEnd = fontName.lastIndexOf('-');
+  const styleName = fontName
+    .substring(fontFamilyEnd + 1)
+    .replace('Italic', ' Italic');
+  return styleName;
+};
+
+const BasicText = ({ trackItem }: { trackItem: ITrackItem }) => {
+  const [properties, setProperties] = useState<ITextControlProps>({
+    color: '#000000',
+    colorDisplay: '#000000',
+    fontSize: 12,
+    fontSizeDisplay: '12px',
+    fontFamily: 'Open Sans',
+    fontFamilyDisplay: 'Open Sans',
+    opacity: 1,
+    opacityDisplay: '100%',
+    textAlign: 'left',
+    textDecoration: 'none',
+  });
+
+  const [selectedFont, setSelectedFont] = useState<ICompactFont>({
+    family: 'Open Sans',
+    styles: [],
+    default: DEFAULT_FONT,
+    name: 'Regular',
+  });
+  const { compactFonts, fonts } = useDataState();
+
+  useEffect(() => {
+    const fontFamily =
+      trackItem.details.fontFamily || DEFAULT_FONT.postScriptName;
+    const currentFont = fonts.find(
+      (font) => font.postScriptName === fontFamily,
+    );
+    const selectedFont = compactFonts.find(
+      (font) => font.family === currentFont?.family,
+    );
+
+    setSelectedFont({
+      ...selectedFont,
+      name: getStyleNameFromFontName(currentFont.postScriptName),
+    });
+
+    if (trackItem.details.opacityDisplay == undefined) {
+      trackItem.details.opacityDisplay = '100';
+    }
+
+    if (trackItem.details.fontSizeDisplay == undefined) {
+      trackItem.details.fontSizeDisplay = '62';
+    }
+    setProperties({
+      color: trackItem.details.color || '#ffffff',
+      colorDisplay: trackItem.details.color || '#ffffff',
+      fontSize: trackItem.details.fontSize || 62,
+      fontSizeDisplay: (trackItem.details.fontSize || 62) + 'px',
+      fontFamily: selectedFont?.family || 'Open Sans',
+      fontFamilyDisplay: selectedFont?.family || 'Open Sans',
+      opacity: trackItem.details.opacity || 1,
+      opacityDisplay: (trackItem.details.opacityDisplay || '100') + '%',
+      textAlign: trackItem.details.textAlign || 'left',
+      textDecoration: trackItem.details.textDecoration || 'none',
+    });
+  }, [trackItem.id]);
+
+  const handleChangeFont = async (font: ICompactFont) => {
+    const fontName = font.default.postScriptName;
+    const fontUrl = font.default.url;
+
+    await loadFonts([
+      {
+        name: fontName,
+        url: fontUrl,
+      },
+    ]);
+    setSelectedFont({ ...font, name: getStyleNameFromFontName(fontName) });
+    setProperties({
+      ...properties,
+      fontFamily: font.default.family,
+      fontFamilyDisplay: font.default.family,
+    });
+
+    dispatcher.dispatch(EDIT_OBJECT, {
+      payload: {
+        details: {
+          fontFamily: fontName,
+          fontUrl: fontUrl,
+        },
+      },
+    });
+  };
+
+  const handleChangeFontStyle = async (font: IFont) => {
+    const fontName = font.postScriptName;
+    const fontUrl = font.url;
+    const styleName = getStyleNameFromFontName(fontName);
+    await loadFonts([
+      {
+        name: fontName,
+        url: fontUrl,
+      },
+    ]);
+    setSelectedFont({ ...selectedFont, name: styleName });
+    dispatcher.dispatch(EDIT_OBJECT, {
+      payload: {
+        details: {
+          fontFamily: fontName,
+          fontUrl: fontUrl,
+        },
+      },
+    });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md text-text-primary font-medium h-12  flex items-center px-4 flex-none">
+        Text
+      </div>
+      <ScrollArea className="h-full">
+        <div className="px-4 flex flex-col gap-2">
+          <div className="flex flex-col gap-2">
+            <div className="flex gap-2">
+              <FontFamily
+                handleChangeFont={handleChangeFont}
+                fontFamilyDisplay={properties.fontFamilyDisplay}
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <FontStyle
+                selectedFont={selectedFont}
+                handleChangeFontStyle={handleChangeFontStyle}
+              />
+              <div className="relative">
+                <Input className="h-9" defaultValue={88} />
+                <div className="absolute top-1/2 transform -translate-y-1/2 right-2.5 text-sm text-zinc-200">
+                  px
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <Alignment />
+            <TextDecoration />
+          </div>
+        </div>
+        <div className="p-4 flex flex-col gap-2">
+          <div className="text-sm">Style</div>
+          <Fill />
+          <Stroke />
+          <Shadow />
+          <Background />
+        </div>
+
+        <div className="p-4">
+          <Opacity />
+        </div>
+        <div className="p-4">
+          <Transform />
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+const Fill = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px 24px',
+        gap: '4px',
+      }}
+    >
+      <div className="text-sm text-zinc-500  flex items-center">Fill</div>
+      <div>
+        <div className="w-6 h-6 rounded-sm border-2 border-zinc-800 bg-green-700"></div>
+      </div>
+      <div>
+        <Button size="icon" variant="ghost" className="h-6 w-6">
+          <Ellipsis size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const Stroke = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px 24px',
+        gap: '4px',
+      }}
+    >
+      <div className="text-sm text-zinc-500  flex items-center">Stroke</div>
+      <div>
+        <div className="w-6 h-6 rounded-sm border-2 border-zinc-800 bg-green-700"></div>
+      </div>
+      <div>
+        <Button size="icon" variant="ghost" className="h-6 w-6">
+          <Ellipsis size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+const Shadow = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px 24px',
+        gap: '4px',
+      }}
+    >
+      <div className="text-sm text-zinc-500  flex items-center">Shadow</div>
+      <div>
+        <div className="w-6 h-6 rounded-sm border-2 border-zinc-800 bg-green-700"></div>
+      </div>
+      <div>
+        <Button size="icon" variant="ghost" className="h-6 w-6">
+          <Ellipsis size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+const Background = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px 24px',
+        gap: '4px',
+      }}
+    >
+      <div className="text-sm text-zinc-500  flex items-center">Background</div>
+      <div>
+        <div className="w-6 h-6 rounded-sm border-2 border-zinc-800 bg-green-700"></div>
+      </div>
+      <div>
+        <Button size="icon" variant="ghost" className="h-6 w-6">
+          <Ellipsis size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const FontFamily = ({
+  handleChangeFont,
+  fontFamilyDisplay,
+}: {
+  handleChangeFont: (font: ICompactFont) => void;
+  fontFamilyDisplay: string;
+}) => {
+  const { compactFonts } = useDataState();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          size="sm"
+          className="flex items-center justify-between text-sm w-full"
+          variant="outline"
+        >
+          <div className="w-full text-left ">
+            <p className="truncate">{fontFamilyDisplay}</p>
+          </div>
+          <ChevronDown size={14} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0 w-56 z-[300]">
+        <ScrollArea className="h-[400px] w-full py-2">
+          {compactFonts.map((font, index) => (
+            <div
+              onClick={() => handleChangeFont(font)}
+              className="hover:bg-zinc-800/50 cursor-pointer px-2 py-1"
+              key={index}
+            >
+              <img
+                style={{
+                  filter: 'invert(100%)',
+                }}
+                src={font.default.preview}
+                alt={font.family}
+              />
+            </div>
+          ))}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const FontStyle = ({
+  selectedFont,
+  handleChangeFontStyle,
+}: {
+  selectedFont: ICompactFont;
+  handleChangeFontStyle: (font: IFont) => void;
+}) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          size="sm"
+          className="w-full flex items-center justify-between text-sm"
+          variant="outline"
+        >
+          <div className="w-full text-left overflow-hidden">
+            <p className="truncate"> {selectedFont.name}</p>
+          </div>
+          <ChevronDown size={14} />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="p-0 w-28 z-[300]">
+        {selectedFont.styles.map((style, index) => {
+          const fontFamilyEnd = style.postScriptName.lastIndexOf('-');
+          const styleName = style.postScriptName
+            .substring(fontFamilyEnd + 1)
+            .replace('Italic', ' Italic');
+          return (
+            <div
+              className="text-sm h-6 hover:bg-zinc-800 flex items-center px-2 py-3.5 cursor-pointer text-zinc-300 hover:text-zinc-100"
+              key={index}
+              onClick={() => handleChangeFontStyle(style)}
+            >
+              {styleName}
+            </div>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+};
+const TextDecoration = () => {
+  const [value, setValue] = useState(['left']);
+  const onChangeAligment = (value: string[]) => {
+    setValue(value);
+  };
+  return (
+    <ToggleGroup
+      value={value}
+      size="sm"
+      className="grid grid-cols-3"
+      type="multiple"
+      onValueChange={onChangeAligment}
+    >
+      <ToggleGroupItem size="sm" value="left" aria-label="Toggle left">
+        <Underline size={18} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle italic">
+        <Strikethrough size={18} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="overline" aria-label="Toggle strikethrough">
+        <div>
+          <svg
+            width={18}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M5.59996 1.75977C5.43022 1.75977 5.26744 1.82719 5.14741 1.94722C5.02739 2.06724 4.95996 2.23003 4.95996 2.39977C4.95996 2.5695 5.02739 2.73229 5.14741 2.85231C5.26744 2.97234 5.43022 3.03977 5.59996 3.03977H18.4C18.5697 3.03977 18.7325 2.97234 18.8525 2.85231C18.9725 2.73229 19.04 2.5695 19.04 2.39977C19.04 2.23003 18.9725 2.06724 18.8525 1.94722C18.7325 1.82719 18.5697 1.75977 18.4 1.75977H5.59996ZM7.99996 6.79977C7.99996 6.58759 7.91568 6.38411 7.76565 6.23408C7.61562 6.08405 7.41213 5.99977 7.19996 5.99977C6.98779 5.99977 6.7843 6.08405 6.63428 6.23408C6.48425 6.38411 6.39996 6.58759 6.39996 6.79977V15.2798C6.39996 16.765 6.98996 18.1894 8.04016 19.2396C9.09037 20.2898 10.5147 20.8798 12 20.8798C13.4852 20.8798 14.9096 20.2898 15.9598 19.2396C17.01 18.1894 17.6 16.765 17.6 15.2798V6.79977C17.6 6.58759 17.5157 6.38411 17.3656 6.23408C17.2156 6.08405 17.0121 5.99977 16.8 5.99977C16.5878 5.99977 16.3843 6.08405 16.2343 6.23408C16.0842 6.38411 16 6.58759 16 6.79977V15.2798C16 16.3406 15.5785 17.358 14.8284 18.1082C14.0782 18.8583 13.0608 19.2798 12 19.2798C10.9391 19.2798 9.92168 18.8583 9.17153 18.1082C8.42139 17.358 7.99996 16.3406 7.99996 15.2798V6.79977Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+const Alignment = () => {
+  const [value, setValue] = useState('left');
+  const onChangeAligment = (value: string) => {
+    setValue(value);
+  };
+  return (
+    <ToggleGroup
+      value={value}
+      size="sm"
+      className="grid grid-cols-3"
+      type="single"
+      onValueChange={onChangeAligment}
+    >
+      <ToggleGroupItem size="sm" value="left" aria-label="Toggle left">
+        <AlignLeft size={18} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <AlignCenter size={18} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <AlignRight size={18} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+export default BasicText;

src/components/editor/control-item/basic-video.tsx

@@ -0,0 +1,11 @@
+const BasicVideo = () => {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        BasicVideo
+      </div>
+    </div>
+  );
+};
+
+export default BasicVideo;

src/components/editor/control-item/common/opacity.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+import { Slider } from '@/components/ui/slider';
+import { Plus, RefreshCcw, RotateCw } from 'lucide-react';
+import { useState } from 'react';
+
+const Opacity = () => {
+  const [value, setValue] = useState([10]);
+
+  return (
+    <div>
+      <div className="grid gap-1.5">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="temperature">Opacity</Label>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 40px 24px',
+            gap: '4px',
+          }}
+        >
+          <Slider
+            id="opacity"
+            max={1}
+            step={0.1}
+            onValueChange={setValue}
+            aria-label="Temperature"
+          />
+          <Input className="w-11 px-2 text-sm text-center" defaultValue={100} />
+          <div className="flex items-center">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6 text-zinc-400"
+            >
+              <RotateCw size={14} />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Opacity;

src/components/editor/control-item/common/transform.tsx

@@ -0,0 +1,102 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Slider } from '@/components/ui/slider';
+import { RotateCw } from 'lucide-react';
+import { useState } from 'react';
+
+const Transform = () => {
+  const [value, setValue] = useState([10]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div>Transform</div>
+      <div className="flex flex-col gap-2">
+        <div className="text-sm text-zinc-400">Scale</div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 40px 24px',
+            gap: '4px',
+          }}
+        >
+          <Slider
+            id="opacity"
+            max={1}
+            step={0.1}
+            onValueChange={setValue}
+            aria-label="Temperature"
+          />
+          <Input className="w-11 px-2 text-sm text-center" defaultValue={100} />
+          <div className="flex items-center">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6 text-zinc-400"
+            >
+              <RotateCw size={14} />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <div className="text-sm text-zinc-400">Position</div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 24px',
+            gap: '4px',
+          }}
+        >
+          <div className="relative">
+            <Input className=" px-2 text-sm" defaultValue={100} />
+            <div className="absolute top-1/2 transform -translate-y-1/2 right-2.5 text-zinc-200">
+              x
+            </div>
+          </div>
+          <div className="relative">
+            <Input className=" px-2 text-sm" defaultValue={100} />
+            <div className="absolute top-1/2 transform -translate-y-1/2 right-2.5 text-zinc-200">
+              y
+            </div>
+          </div>
+
+          <div className="flex items-center">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6 text-zinc-400"
+            >
+              <RotateCw size={14} />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <div className="text-sm text-zinc-400">Rotate</div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 24px',
+            gap: '4px',
+          }}
+        >
+          <Input className="px-2 text-sm" defaultValue={100} />
+          <div></div>
+          <div className="flex items-center">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6 text-zinc-400"
+            >
+              <RotateCw size={14} />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Transform;

src/components/editor/control-item/control-item.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import useLayoutStore from '@/store/use-layout-store';
+import { ITrackItem, useEditorState } from '@designcombo/core';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { X } from 'lucide-react';
+import Presets from './presets';
+import Animations from './animations';
+import Smart from './smart';
+import BasicText from './basic-text';
+import BasicImage from './basic-image';
+import BasicVideo from './basic-video';
+import BasicAudio from './basic-audio';
+
+const Container = ({ children }: { children: React.ReactNode }) => {
+  const { activeToolboxItem } = useLayoutStore();
+  const { activeIds, trackItemsMap } = useEditorState();
+  const [trackItem, setTrackItem] = useState<ITrackItem | null>(null);
+  const [displayToolbox, setDisplayToolbox] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (activeIds.length === 1) {
+      const [id] = activeIds;
+      const trackItem = trackItemsMap[id];
+      setTrackItem(trackItem);
+    } else {
+      setTrackItem(null);
+      setDisplayToolbox(false);
+    }
+  }, [activeIds]);
+
+  useEffect(() => {
+    if (activeToolboxItem) {
+      setDisplayToolbox(true);
+    } else {
+      setDisplayToolbox(false);
+    }
+  }, [activeToolboxItem]);
+
+  if (!trackItem) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        right: activeToolboxItem && displayToolbox ? '0' : '-100%',
+        transition: 'right 0.25s ease-in-out',
+        zIndex: 200,
+      }}
+      className="w-[340px] h-[calc(100%-32px-64px)] mt-6 absolute top-1/2 -translate-y-1/2 rounded-lg shadow-lg flex"
+    >
+      <div className="w-[266px] h-full relative bg-zinc-950 flex">
+        <Button
+          variant="ghost"
+          className="absolute top-2 right-2 w-8 h-8 text-muted-foreground"
+          size="icon"
+        >
+          <X width={16} onClick={() => setDisplayToolbox(false)} />
+        </Button>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          trackItem,
+          activeToolboxItem,
+        })}
+      </div>
+      <div className="w-[74px]"></div>
+    </div>
+  );
+};
+
+const ActiveControlItem = ({
+  trackItem,
+  activeToolboxItem,
+}: {
+  trackItem?: ITrackItem;
+  activeToolboxItem?: string;
+}) => {
+  if (!trackItem || !activeToolboxItem) {
+    return null;
+  }
+  return (
+    <>
+      {
+        {
+          'basic-text': <BasicText trackItem={trackItem} />,
+          'basic-image': <BasicImage />,
+          'basic-video': <BasicVideo />,
+          'basic-audio': <BasicAudio />,
+          'preset-text': <Presets />,
+          animation: <Animations />,
+          smart: <Smart />,
+        }[activeToolboxItem]
+      }
+    </>
+  );
+};
+
+export const ControlItem = () => {
+  return (
+    <Container>
+      <ActiveControlItem />
+    </Container>
+  );
+};

src/components/editor/control-item/index.tsx

@@ -0,0 +1 @@
+export { ControlItem } from './control-item';

src/components/editor/control-item/presets.tsx

@@ -0,0 +1,11 @@
+const Presets = () => {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Presets
+      </div>
+    </div>
+  );
+};
+
+export default Presets;

src/components/editor/control-item/smart.tsx

@@ -0,0 +1,11 @@
+const Smart = () => {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Ai things
+      </div>
+    </div>
+  );
+};
+
+export default Smart;

src/components/editor/control-list.tsx

@@ -0,0 +1,237 @@
+import { ItemType, useEditorState } from '@designcombo/core';
+import { useCallback, useEffect, useState } from 'react';
+import { Icons } from '@/components/shared/icons';
+import { Button } from '@/components/ui/button';
+import useLayoutStore from '@/store/use-layout-store';
+
+export default function ControlList() {
+  const { activeIds, trackItemsMap } = useEditorState();
+  const [controlType, setControlType] = useState<ItemType | null>(null);
+
+  useEffect(() => {
+    if (activeIds.length === 1) {
+      const [id] = activeIds;
+      const trackItem = trackItemsMap[id];
+      setControlType(trackItem.type);
+    } else {
+      setControlType(null);
+    }
+  }, [activeIds, trackItemsMap]);
+
+  return <>{controlType && <ControlMenu controlType={controlType} />}</>;
+}
+
+function ControlMenu({ controlType }: { controlType: ItemType }) {
+  const { setShowToolboxItem, setActiveToolboxItem, activeToolboxItem } =
+    useLayoutStore();
+
+  const openToolboxItem = useCallback(
+    (type: string) => {
+      if (type === activeToolboxItem) {
+        setShowToolboxItem(false);
+        setActiveToolboxItem(null);
+      } else {
+        setShowToolboxItem(true);
+        setActiveToolboxItem(type);
+      }
+    },
+    [activeToolboxItem],
+  );
+
+  return (
+    <div
+      style={{ zIndex: 201 }}
+      className="w-14 py-2 absolute top-1/2 -translate-y-1/2 right-2.5 bg-zinc-950 rounded-lg shadow-lg flex flex-col   items-center"
+    >
+      {
+        {
+          image: (
+            <ImageMenuList
+              type={controlType}
+              openToolboxItem={openToolboxItem}
+            />
+          ),
+          video: (
+            <VideoMenuList
+              type={controlType}
+              openToolboxItem={openToolboxItem}
+            />
+          ),
+          audio: (
+            <AudioMenuList
+              type={controlType}
+              openToolboxItem={openToolboxItem}
+            />
+          ),
+          text: (
+            <TextMenuList
+              type={controlType}
+              openToolboxItem={openToolboxItem}
+            />
+          ),
+        }[controlType]
+      }
+    </div>
+  );
+}
+
+const ImageMenuList = ({
+  openToolboxItem,
+  type,
+}: {
+  openToolboxItem: (type: string) => void;
+  type: ItemType;
+}) => {
+  return (
+    <div className="flex flex-col items-center">
+      <BasicMenuListItem openToolboxItem={openToolboxItem} type={type} />
+      <AnimationMenuListItem openToolboxItem={openToolboxItem} />
+      <SmartMenuListItem openToolboxItem={openToolboxItem} />
+    </div>
+  );
+};
+
+const TextMenuList = ({
+  openToolboxItem,
+  type,
+}: {
+  openToolboxItem: (type: string) => void;
+  type: ItemType;
+}) => {
+  return (
+    <div className="flex flex-col items-center">
+      <PresetsMenuListItem type={type} openToolboxItem={openToolboxItem} />
+
+      <BasicMenuListItem openToolboxItem={openToolboxItem} type={type} />
+      <AnimationMenuListItem openToolboxItem={openToolboxItem} />
+      <SmartMenuListItem openToolboxItem={openToolboxItem} />
+    </div>
+  );
+};
+
+const VideoMenuList = ({
+  openToolboxItem,
+  type,
+}: {
+  openToolboxItem: (type: string) => void;
+  type: ItemType;
+}) => {
+  return (
+    <div className="flex flex-col items-center">
+      <BasicMenuListItem openToolboxItem={openToolboxItem} type={type} />
+      <AnimationMenuListItem openToolboxItem={openToolboxItem} />
+    </div>
+  );
+};
+
+const AudioMenuList = ({
+  openToolboxItem,
+  type,
+}: {
+  openToolboxItem: (type: string) => void;
+  type: ItemType;
+}) => {
+  return (
+    <div className="flex flex-col items-center">
+      <BasicMenuListItem openToolboxItem={openToolboxItem} type={type} />
+      <SmartMenuListItem openToolboxItem={openToolboxItem} />
+    </div>
+  );
+};
+
+const PresetsMenuListItem = ({
+  openToolboxItem,
+  type,
+}: {
+  openToolboxItem: (type: string) => void;
+  type: ItemType;
+}) => {
+  return (
+    <Button
+      size="icon"
+      onClick={() => openToolboxItem(`preset-${type}`)}
+      variant="ghost"
+    >
+      <Icons.preset size={20} className="text-white" />
+    </Button>
+  );
+};
+
+const BasicMenuListItem = ({
+  openToolboxItem,
+  type,
+}: {
+  openToolboxItem: (type: string) => void;
+  type: string;
+}) => {
+  const Icon = Icons[type];
+  return (
+    <Button
+      size="icon"
+      onClick={() => openToolboxItem(`basic-${type}`)}
+      variant="ghost"
+    >
+      <Icon size={20} className="text-white" />
+    </Button>
+  );
+};
+
+const SmartMenuListItem = ({
+  openToolboxItem,
+}: {
+  openToolboxItem: (type: string) => void;
+}) => {
+  return (
+    <Button
+      size="icon"
+      onClick={() => openToolboxItem('smart')}
+      variant="ghost"
+    >
+      <Icons.smart size={20} className="text-white" />
+    </Button>
+  );
+};
+
+const AnimationMenuListItem = ({
+  openToolboxItem,
+}: {
+  openToolboxItem: (type: string) => void;
+}) => {
+  return (
+    <Button
+      size="icon"
+      onClick={() => openToolboxItem('animation')}
+      variant="ghost"
+    >
+      <svg
+        width={20}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.77329 21.1395C6.2479 21.3357 5.67727 21.3772 5.12902 21.2591C4.58077 21.1409 4.07788 20.8681 3.67995 20.4729C3.40573 20.202 3.18839 19.879 3.0407 19.523C2.89302 19.1669 2.81797 18.785 2.81995 18.3995C2.82282 18.1286 2.8632 17.8594 2.93995 17.5995C2.65089 17.0591 2.42709 16.4861 2.27329 15.8929C1.66062 16.7379 1.37897 17.7782 1.48164 18.8169C1.5843 19.8557 2.06417 20.8207 2.83041 21.5295C3.59666 22.2382 4.59613 22.6415 5.63969 22.663C6.68325 22.6845 7.69849 22.3228 8.49329 21.6462C7.90225 21.5446 7.32504 21.3745 6.77329 21.1395ZM12.2733 18.4529C11.3101 18.9897 10.1982 19.1982 9.10595 19.0466C8.0137 18.895 7.00057 18.3917 6.21995 17.6129C5.44017 16.8357 4.93549 15.8252 4.78266 14.735C4.62984 13.6447 4.83722 12.5344 5.37329 11.5729C5.22747 10.9494 5.14483 10.3129 5.12662 9.67285C3.99221 10.8831 3.3732 12.4873 3.40057 14.1459C3.42794 15.8045 4.09956 17.3873 5.27329 18.5595C6.4502 19.7295 8.03445 20.3983 9.69374 20.4257C11.353 20.453 12.9585 19.8368 14.1733 18.7062C13.5331 18.6849 12.8967 18.6 12.2733 18.4529Z"
+          fill="currentColor"
+          fillOpacity="0.5"
+        />
+        <path
+          d="M2.31998 18.3942H2.31998L2.31996 18.3969C2.31763 18.849 2.40565 19.297 2.57886 19.7145C2.75198 20.1319 3.00671 20.5105 3.3281 20.8281C3.79378 21.2904 4.3822 21.6096 5.02368 21.7478C5.59915 21.8719 6.19568 21.8456 6.7562 21.6732C6.91495 21.7365 7.07554 21.7947 7.23776 21.848C6.74151 22.0651 6.20021 22.1745 5.64999 22.1631C4.72873 22.1441 3.84638 21.7881 3.16993 21.1624C2.49348 20.5367 2.06985 19.6847 1.97921 18.7678C1.92477 18.217 1.99273 17.6657 2.17288 17.1516C2.2453 17.3233 2.32356 17.4926 2.40755 17.6592C2.352 17.9001 2.3226 18.1466 2.31998 18.3942ZM9.03722 19.5418C10.1726 19.6994 11.3273 19.5029 12.3446 18.9816C12.5134 19.0181 12.683 19.0503 12.8533 19.0782C11.9099 19.6462 10.8192 19.9442 9.70198 19.9257C8.1721 19.9005 6.7114 19.284 5.62619 18.2053C4.54461 17.1249 3.92573 15.6662 3.9005 14.1376C3.8821 13.0223 4.18082 11.9336 4.74979 10.9932C4.7771 11.1632 4.80878 11.3325 4.84483 11.5009C4.32414 12.517 4.12857 13.6706 4.2875 14.8044C4.45544 16.0024 5.00998 17.1128 5.8668 17.9668C6.72435 18.8224 7.83733 19.3753 9.03722 19.5418Z"
+          stroke="currentColor"
+          strokeOpacity="0.5"
+        />
+        <mask id="path-3-inside-1_4741_350" fill="white">
+          <path d="M14.4394 17.4732C12.5735 17.4704 10.7663 16.8208 9.32553 15.6352C7.88477 14.4495 6.89961 12.801 6.53784 10.9705C6.17608 9.13998 6.46008 7.24067 7.34149 5.59605C8.22289 3.95144 9.64718 2.66324 11.3718 1.95087C13.0963 1.2385 15.0145 1.14602 16.7996 1.68919C18.5847 2.23235 20.1263 3.37756 21.1619 4.92976C22.1974 6.48196 22.6628 8.34514 22.4788 10.202C22.2948 12.0588 21.4728 13.7944 20.1528 15.1132C19.4024 15.8629 18.5115 16.4572 17.5311 16.8622C16.5508 17.2671 15.5002 17.4747 14.4394 17.4732ZM14.4394 2.6665C13.5538 2.66563 12.6766 2.83932 11.8581 3.17764C11.0396 3.51597 10.2958 4.01229 9.66923 4.63825C9.04266 5.2642 8.5456 6.00751 8.20646 6.82568C7.86733 7.64385 7.69277 8.52083 7.69278 9.4065C7.6929 10.293 7.86985 11.1707 8.21326 11.988C8.55668 12.8053 9.05966 13.5459 9.69278 14.1665C10.958 15.4314 12.6737 16.1419 14.4628 16.1419C16.2518 16.1419 17.9676 15.4314 19.2328 14.1665C20.175 13.2219 20.8157 12.019 21.0738 10.71C21.3318 9.401 21.1955 8.04488 20.6822 6.81339C20.1689 5.58191 19.3017 4.53047 18.1904 3.79224C17.079 3.05402 15.7736 2.66223 14.4394 2.6665Z" />
+        </mask>
+        <path
+          d="M14.4394 17.4732C12.5735 17.4704 10.7663 16.8208 9.32553 15.6352C7.88477 14.4495 6.89961 12.801 6.53784 10.9705C6.17608 9.13998 6.46008 7.24067 7.34149 5.59605C8.22289 3.95144 9.64718 2.66324 11.3718 1.95087C13.0963 1.2385 15.0145 1.14602 16.7996 1.68919C18.5847 2.23235 20.1263 3.37756 21.1619 4.92976C22.1974 6.48196 22.6628 8.34514 22.4788 10.202C22.2948 12.0588 21.4728 13.7944 20.1528 15.1132C19.4024 15.8629 18.5115 16.4572 17.5311 16.8622C16.5508 17.2671 15.5002 17.4747 14.4394 17.4732ZM14.4394 2.6665C13.5538 2.66563 12.6766 2.83932 11.8581 3.17764C11.0396 3.51597 10.2958 4.01229 9.66923 4.63825C9.04266 5.2642 8.5456 6.00751 8.20646 6.82568C7.86733 7.64385 7.69277 8.52083 7.69278 9.4065C7.6929 10.293 7.86985 11.1707 8.21326 11.988C8.55668 12.8053 9.05966 13.5459 9.69278 14.1665C10.958 15.4314 12.6737 16.1419 14.4628 16.1419C16.2518 16.1419 17.9676 15.4314 19.2328 14.1665C20.175 13.2219 20.8157 12.019 21.0738 10.71C21.3318 9.401 21.1955 8.04488 20.6822 6.81339C20.1689 5.58191 19.3017 4.53047 18.1904 3.79224C17.079 3.05402 15.7736 2.66223 14.4394 2.6665Z"
+          fill="currentColor"
+        />
+        <path
+          d="M14.4394 17.4732L14.435 20.4732L14.4394 17.4732ZM22.4788 10.202L19.4934 9.90613L22.4788 10.202ZM20.1528 15.1132L22.2731 17.2355L20.1528 15.1132ZM14.4394 2.6665L14.4365 5.66653L14.449 5.66649L14.4394 2.6665ZM7.69278 9.4065L4.69278 9.4065L4.69278 9.40693L7.69278 9.4065ZM9.69278 14.1665L11.8138 12.0449L11.8034 12.0344L11.7928 12.0241L9.69278 14.1665ZM14.4628 16.1419L14.4628 19.1419L14.4628 16.1419ZM19.2328 14.1665L21.3538 16.2881L21.3567 16.2852L19.2328 14.1665ZM14.4439 14.4732C13.2719 14.4714 12.1368 14.0635 11.2319 13.3187L7.4192 17.9516C9.39577 19.5782 11.8751 20.4694 14.435 20.4732L14.4439 14.4732ZM11.2319 13.3187C10.3269 12.574 9.70814 11.5386 9.48092 10.3888L3.59477 11.5521C4.09107 14.0634 5.44262 16.325 7.4192 17.9516L11.2319 13.3187ZM9.48092 10.3888C9.25369 9.2391 9.43208 8.04615 9.98569 7.01317L4.69729 4.17894C3.48809 6.43519 3.09846 9.04086 3.59477 11.5521L9.48092 10.3888ZM9.98569 7.01317C10.5393 5.98018 11.4339 5.17107 12.5171 4.72363L10.2264 -0.821889C7.86046 0.15541 5.90649 1.92269 4.69729 4.17894L9.98569 7.01317ZM12.5171 4.72363C13.6003 4.27619 14.8051 4.21811 15.9263 4.55927L17.6729 -1.18089C15.2239 -1.92606 12.5924 -1.79919 10.2264 -0.821889L12.5171 4.72363ZM15.9263 4.55927C17.0476 4.90043 18.0158 5.61973 18.6663 6.59467L23.6575 3.26485C22.2368 1.13539 20.1219 -0.435727 17.6729 -1.18089L15.9263 4.55927ZM18.6663 6.59467C19.3167 7.5696 19.609 8.73986 19.4934 9.90613L25.4642 10.4978C25.7166 7.95041 25.0781 5.39431 23.6575 3.26485L18.6663 6.59467ZM19.4934 9.90613C19.3779 11.0724 18.8615 12.1625 18.0324 12.9909L22.2731 17.2355C24.084 15.4262 25.2118 13.0452 25.4642 10.4978L19.4934 9.90613ZM18.0324 12.9909C17.5611 13.4617 17.0016 13.835 16.3858 14.0894L18.6765 19.6349C20.0214 19.0793 21.2436 18.264 22.2731 17.2355L18.0324 12.9909ZM16.3858 14.0894C15.77 14.3438 15.1101 14.4742 14.4439 14.4732L14.435 20.4732C15.8902 20.4753 17.3315 20.1905 18.6765 19.6349L16.3858 14.0894ZM14.4424 -0.333495C13.1625 -0.334761 11.8949 -0.0837622 10.7121 0.405152L13.0041 5.95013C13.4583 5.7624 13.945 5.66602 14.4365 5.6665L14.4424 -0.333495ZM10.7121 0.405152C9.52929 0.894066 8.45442 1.61131 7.54896 2.51588L11.7895 6.76061C12.1372 6.41327 12.5499 6.13787 13.0041 5.95013L10.7121 0.405152ZM7.54896 2.51588C6.6435 3.42044 5.92519 4.4946 5.43511 5.67694L10.9778 7.97441C11.166 7.52041 11.4418 7.10795 11.7895 6.76061L7.54896 2.51588ZM5.43511 5.67694C4.94503 6.85928 4.69277 8.12662 4.69278 9.4065L10.6928 9.4065C10.6928 8.91505 10.7896 8.42841 10.9778 7.97441L5.43511 5.67694ZM4.69278 9.40693C4.69296 10.6924 4.94953 11.965 5.44748 13.1501L10.979 10.8259C10.7902 10.3764 10.6928 9.89367 10.6928 9.40607L4.69278 9.40693ZM5.44748 13.1501C5.94543 14.3352 6.67476 15.4091 7.59278 16.3089L11.7928 12.0241C11.4446 11.6828 11.1679 11.2754 10.979 10.8259L5.44748 13.1501ZM7.57173 16.2881C9.39951 18.1154 11.8782 19.1419 14.4628 19.1419L14.4628 13.1419C13.4693 13.1419 12.5164 12.7473 11.8138 12.0449L7.57173 16.2881ZM14.4628 19.1419C17.0473 19.1419 19.526 18.1154 21.3538 16.2881L17.1117 12.0449C16.4091 12.7473 15.4563 13.1419 14.4628 13.1419L14.4628 19.1419ZM21.3567 16.2852C22.7183 14.9202 23.6442 13.1818 24.0171 11.2902L18.1304 10.1298C17.9872 10.8561 17.6317 11.5237 17.1088 12.0478L21.3567 16.2852ZM24.0171 11.2902C24.39 9.39856 24.1931 7.43883 23.4513 5.6592L17.9131 7.96758C18.198 8.65093 18.2736 9.40343 18.1304 10.1298L24.0171 11.2902ZM23.4513 5.6592C22.7096 3.87958 21.4563 2.36014 19.8503 1.29333L16.5304 6.29116C17.1471 6.70079 17.6283 7.28423 17.9131 7.96758L23.4513 5.6592ZM19.8503 1.29333C18.2443 0.226522 16.3579 -0.339653 14.4298 -0.333481L14.449 5.66649C15.1894 5.66412 15.9137 5.88152 16.5304 6.29116L19.8503 1.29333Z"
+          fill="currentColor"
+          mask="url(#path-3-inside-1_4741_350)"
+        />
+      </svg>
+    </Button>
+  );
+};

src/components/editor/editor.tsx

@@ -0,0 +1,63 @@
+import { Timeline, Provider, Scene } from '@designcombo/core';
+import Navbar from './navbar';
+import MenuList from './menu-list';
+import { MenuItem } from './menu-item';
+import ControlList from './control-list';
+import { ControlItem } from './control-item';
+
+import useHotkeys from './use-hotkeys';
+import { useEffect } from 'react';
+import { getCompactFontData } from '@/utils/fonts';
+import { FONTS } from '@/data/fonts';
+import useDataState from '@/store/use-data-state';
+
+export const theme = {
+  colors: {
+    gray: {
+      50: '#fafafa',
+      100: '#f4f4f5',
+      200: '#e4e4e7',
+      300: '#d4d4d8',
+      400: '#a1a1aa',
+      500: '#71717a',
+      600: '#52525b',
+      700: '#3f3f46',
+      800: '#27272a',
+      900: '#18181b',
+      950: '#09090b',
+      1000: '#040405',
+      1100: '#010101',
+    },
+  },
+};
+
+const Editor = () => {
+  const { setCompactFonts, setFonts } = useDataState();
+
+  useHotkeys();
+
+  useEffect(() => {
+    setCompactFonts(getCompactFontData(FONTS));
+    setFonts(FONTS);
+  }, []);
+
+  return (
+    <Provider theme={theme}>
+      <div className="h-screen w-screen flex flex-col">
+        <Navbar />
+        <div className="flex-1 relative overflow-hidden">
+          <MenuList />
+          <MenuItem />
+          <ControlList />
+          <ControlItem />
+          <Scene />
+        </div>
+        <div className="h-80 flex" style={{ zIndex: 201 }}>
+          <Timeline />
+        </div>
+      </div>
+    </Provider>
+  );
+};
+
+export default Editor;

src/components/editor/index.ts

@@ -0,0 +1 @@
+export { default as Editor } from './editor';

src/components/editor/menu-item/audios.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { AUDIOS } from '@/data/audio';
+import { ADD_AUDIO, dispatcher } from '@designcombo/core';
+import { Music } from 'lucide-react';
+import { nanoid } from 'nanoid';
+
+export const Audios = () => {
+  const handleAddAudio = (src: string) => {
+    dispatcher?.dispatch(ADD_AUDIO, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: 'https://ik.imagekit.io/snapmotion/timer-voice.mp3',
+        },
+      },
+      options: {},
+    });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Audios
+      </div>
+      <ScrollArea>
+        <div className="px-2 flex flex-col">
+          {AUDIOS.map((audio, index) => {
+            return (
+              <AudioItem
+                handleAddAudio={handleAddAudio}
+                audio={audio}
+                key={index}
+              />
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+const AudioItem = ({
+  audio,
+  handleAddAudio,
+}: {
+  audio: any;
+  handleAddAudio: (src: string) => void;
+}) => {
+  return (
+    <div
+      onClick={() => handleAddAudio(audio.src)}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '48px 1fr',
+      }}
+      className="flex px-2 py-1 gap-4 text-sm hover:bg-zinc-800/70 cursor-pointer"
+    >
+      <div className="bg-zinc-800 flex items-center justify-center h-12">
+        <Music width={16} />
+      </div>
+      <div className="flex  flex-col justify-center">
+        <div>{audio.name}</div>
+        <div className="text-zinc-400">{audio.author}</div>
+      </div>
+    </div>
+  );
+};

src/components/editor/menu-item/elements.tsx

@@ -0,0 +1,9 @@
+export const Elements = () => {
+  return (
+    <div className="flex-1">
+      <div className="text-md text-text-primary font-medium h-12  flex items-center px-4">
+        Shapes
+      </div>
+    </div>
+  );
+};

src/components/editor/menu-item/images.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { IMAGES } from '@/data/images';
+import { ADD_IMAGE, dispatcher } from '@designcombo/core';
+import { nanoid } from 'nanoid';
+
+export const Images = () => {
+  const handleAddImage = (src: string) => {
+    dispatcher?.dispatch(ADD_IMAGE, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: src,
+        },
+      },
+      options: {
+        trackId: 'main',
+      },
+    });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Photos
+      </div>
+      <ScrollArea>
+        <div className="px-4 masonry-sm">
+          {IMAGES.map((image, index) => {
+            return (
+              <div
+                onClick={() => handleAddImage(image.src)}
+                key={index}
+                className="flex items-center justify-center w-full  bg-zinc-950 pb-2 overflow-hidden cursor-pointer"
+              >
+                <img
+                  src={image.src}
+                  className="w-full h-full object-cover rounded-md"
+                  alt="image"
+                />
+              </div>
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+function modifyImageUrl(url: string): string {
+  const uploadIndex = url.indexOf('/upload');
+  if (uploadIndex === -1) {
+    throw new Error('Invalid URL: /upload not found');
+  }
+
+  const modifiedUrl =
+    url.slice(0, uploadIndex + 7) +
+    '/w_0.05,c_scale' +
+    url.slice(uploadIndex + 7);
+  return modifiedUrl;
+}

src/components/editor/menu-item/index.tsx

@@ -0,0 +1 @@
+export { MenuItem } from './menu-item';

src/components/editor/menu-item/menu-item.tsx

@@ -0,0 +1,72 @@
+import useLayoutStore from '@/store/use-layout-store';
+import { Transitions } from './transitions';
+import { Texts } from './texts';
+import { Uploads } from './uploads';
+import { Audios } from './audios';
+import { Elements } from './elements';
+import { Images } from './images';
+import { Videos } from './videos';
+import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const Container = ({ children }: { children: React.ReactNode }) => {
+  const { showMenuItem, setShowMenuItem } = useLayoutStore();
+  return (
+    <div
+      style={{
+        left: showMenuItem ? '0' : '-100%',
+        transition: 'left 0.25s ease-in-out',
+        zIndex: 200,
+      }}
+      className="w-[340px] h-[calc(100%-32px-64px)] mt-6 absolute top-1/2 -translate-y-1/2 rounded-lg shadow-lg flex"
+    >
+      <div className="w-[74px]"></div>
+      <div className="flex-1 relative bg-zinc-950 flex">
+        <Button
+          variant="ghost"
+          className="absolute top-2 right-2 w-8 h-8 text-muted-foreground"
+          size="icon"
+        >
+          <X width={16} onClick={() => setShowMenuItem(false)} />
+        </Button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const ActiveMenuItem = () => {
+  const { activeMenuItem } = useLayoutStore();
+  if (activeMenuItem === 'transitions') {
+    return <Transitions />;
+  }
+  if (activeMenuItem === 'texts') {
+    return <Texts />;
+  }
+  if (activeMenuItem === 'shapes') {
+    return <Elements />;
+  }
+  if (activeMenuItem === 'videos') {
+    return <Videos />;
+  }
+
+  if (activeMenuItem === 'audios') {
+    return <Audios />;
+  }
+
+  if (activeMenuItem === 'images') {
+    return <Images />;
+  }
+  if (activeMenuItem === 'uploads') {
+    return <Uploads />;
+  }
+  return null;
+};
+
+export const MenuItem = () => {
+  return (
+    <Container>
+      <ActiveMenuItem />
+    </Container>
+  );
+};

src/components/editor/menu-item/texts.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@/components/ui/button';
+import { DEFAULT_FONT } from '@/data/fonts';
+import { ADD_TEXT, dispatcher } from '@designcombo/core';
+import { nanoid } from 'nanoid';
+
+export const Texts = () => {
+  const handleAddText = () => {
+    dispatcher?.dispatch(ADD_TEXT, {
+      payload: {
+        id: nanoid(),
+        details: {
+          text: 'Heading',
+          fontSize: 120,
+          width: 600,
+          fontUrl: DEFAULT_FONT.url,
+          fontFamily: DEFAULT_FONT.postScriptName,
+          color: '#ffffff',
+          wordWrap: 'break-word',
+          wordBreak: 'break-all',
+          textAlign: 'center',
+        },
+      },
+      options: {},
+    });
+  };
+
+  return (
+    <div className="flex-1">
+      <div className="text-md text-text-primary font-medium h-12  flex items-center px-4">
+        Text
+      </div>
+      <div className="px-4">
+        <Button
+          onClick={handleAddText}
+          size="sm"
+          variant="secondary"
+          className="w-full"
+        >
+          Add text
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/editor/menu-item/transitions.tsx

@@ -0,0 +1,90 @@
+import {
+  DRAG_END,
+  DRAG_PREFIX,
+  DRAG_START,
+  ITransition,
+  TRANSITIONS,
+  dispatcher,
+  filter,
+} from '@designcombo/core';
+import React, { useEffect, useState } from 'react';
+import Draggable from '@/components/shared/draggable';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+export const Transitions = () => {
+  const [shouldDisplayPreview, setShouldDisplayPreview] = useState(true);
+  //   handle track and track item events - updates
+  useEffect(() => {
+    const dragEvents = dispatcher.bus.pipe(
+      filter(({ key }) => key.startsWith(DRAG_PREFIX)),
+    );
+
+    const dragEventsSubscription = dragEvents.subscribe((obj) => {
+      if (obj.key === DRAG_START) {
+        setShouldDisplayPreview(false);
+      } else if (obj.key === DRAG_END) {
+        setShouldDisplayPreview(true);
+      }
+    });
+    return () => dragEventsSubscription.unsubscribe();
+  }, []);
+  return (
+    <div className="flex-1 overflow-auto flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Transitions
+      </div>
+      <ScrollArea>
+        <div className="grid grid-cols-3 gap-2 px-4">
+          {TRANSITIONS.map((transition, index) => (
+            <TransitionsMenuItem
+              key={index}
+              transition={transition}
+              shouldDisplayPreview={shouldDisplayPreview}
+            />
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+const TransitionsMenuItem = ({
+  transition,
+  shouldDisplayPreview,
+}: {
+  transition: Partial<ITransition>;
+  shouldDisplayPreview: boolean;
+}) => {
+  const style = React.useMemo(
+    () => ({
+      backgroundImage: `url(${transition.preview})`,
+      backgroundSize: 'cover',
+      width: '70px',
+      height: '70px',
+    }),
+    [transition.preview],
+  );
+
+  return (
+    <Draggable
+      data={transition}
+      renderCustomPreview={<div style={style} className="draggable" />}
+      shouldDisplayPreview={shouldDisplayPreview}
+    >
+      <div>
+        <div>
+          <div
+            //  ref={divRef}
+            style={style}
+            className="draggable"
+          />
+        </div>
+        <div className="text-muted-foreground text-[12px] text-nowrap overflow-ellipsis h-6 flex items-center capitalize">
+          {transition.name || transition.type}
+        </div>
+      </div>
+    </Draggable>
+  );
+};
+
+export default TransitionsMenuItem;

src/components/editor/menu-item/uploads.tsx

@@ -0,0 +1,132 @@
+import { Button } from '@/components/ui/button';
+import {
+  ADD_AUDIO,
+  ADD_IMAGE,
+  ADD_TEXT,
+  ADD_VIDEO,
+  dispatcher,
+} from '@designcombo/core';
+import { nanoid } from 'nanoid';
+import { IMAGES } from '@/data/images';
+import { DEFAULT_FONT } from '@/data/fonts';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { UploadIcon } from 'lucide-react';
+
+export const Uploads = () => {
+  const handleAddImage = () => {
+    dispatcher?.dispatch(ADD_IMAGE, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: IMAGES[4].src,
+        },
+      },
+      options: {
+        trackId: 'main',
+      },
+    });
+  };
+
+  const handleAddText = () => {
+    dispatcher?.dispatch(ADD_TEXT, {
+      payload: {
+        id: nanoid(),
+        details: {
+          text: 'Heading',
+          fontSize: 200,
+          width: 900,
+          fontUrl: DEFAULT_FONT.url,
+          fontFamily: DEFAULT_FONT.postScriptName,
+          color: '#ffffff',
+          WebkitTextStrokeColor: 'green',
+          WebkitTextStrokeWidth: '20px',
+          textShadow: '30px 30px 100px rgba(255, 255, 0, 1)',
+          wordWrap: 'break-word',
+          wordBreak: 'break-all',
+        },
+      },
+      options: {},
+    });
+  };
+
+  const handleAddAudio = () => {
+    dispatcher?.dispatch(ADD_AUDIO, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: 'https://ik.imagekit.io/snapmotion/timer-voice.mp3',
+        },
+      },
+      options: {},
+    });
+  };
+
+  const handleAddVideo = () => {
+    dispatcher?.dispatch(ADD_VIDEO, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: 'https://ik.imagekit.io/snapmotion/75475-556034323_medium.mp4',
+        },
+        metadata: {
+          resourceId: '7415538a-5d61-4a81-ad79-c00689b6cc10',
+        },
+      },
+      options: {
+        trackId: 'main',
+      },
+    });
+  };
+
+  const handleAddVideo2 = () => {
+    dispatcher?.dispatch(ADD_VIDEO, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: 'https://ik.imagekit.io/snapmotion/flat.mp4',
+        },
+        metadata: {
+          resourceId: '7415538a-5do1-4m81-a279-c00689b6cc10',
+        },
+      },
+    });
+  };
+  return (
+    <div className="flex-1">
+      <div className="text-md text-text-primary font-medium h-12  flex items-center px-4">
+        Your media
+      </div>
+      <div className="px-4">
+        <div>
+          <Tabs defaultValue="projects" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="projects">Project</TabsTrigger>
+              <TabsTrigger value="workspace">Workspace</TabsTrigger>
+            </TabsList>
+            <TabsContent value="projects">
+              <Button
+                onClick={handleAddAudio}
+                className="flex gap-2 w-full"
+                size="sm"
+                variant="secondary"
+              >
+                <UploadIcon size={16} /> Upload
+              </Button>
+              <div></div>
+            </TabsContent>
+            <TabsContent value="workspace">
+              <Button
+                className="flex gap-2 w-full"
+                size="sm"
+                variant="secondary"
+              >
+                <UploadIcon size={16} /> Upload
+              </Button>
+              <div>Some assets</div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/editor/menu-item/videos.tsx

@@ -0,0 +1,50 @@
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { VIDEOS } from '@/data/video';
+import { ADD_VIDEO, dispatcher } from '@designcombo/core';
+import { nanoid } from 'nanoid';
+
+export const Videos = () => {
+  const handleAddVideo = (src: string) => {
+    dispatcher?.dispatch(ADD_VIDEO, {
+      payload: {
+        id: nanoid(),
+        details: {
+          src: src,
+        },
+        metadata: {
+          resourceId: src,
+        },
+      },
+      options: {
+        trackId: 'main',
+      },
+    });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="text-md flex-none text-text-primary font-medium h-12  flex items-center px-4">
+        Videos
+      </div>
+      <ScrollArea>
+        <div className="px-4 masonry-sm">
+          {VIDEOS.map((image, index) => {
+            return (
+              <div
+                onClick={() => handleAddVideo(image.src)}
+                key={index}
+                className="flex items-center justify-center w-full  bg-zinc-950 pb-2 overflow-hidden cursor-pointer"
+              >
+                <img
+                  src={image.preview}
+                  className="w-full h-full object-cover rounded-md"
+                  alt="image"
+                />
+              </div>
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};

src/components/editor/menu-list.tsx

@@ -0,0 +1,132 @@
+import useLayoutStore from '@/store/use-layout-store';
+import { Icons } from '@/components/shared/icons';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export default function MenuList() {
+  const { setActiveMenuItem, setShowMenuItem, activeMenuItem, showMenuItem } =
+    useLayoutStore();
+  return (
+    <div
+      style={{ zIndex: 201 }}
+      className="w-14 py-2 absolute top-1/2 -translate-y-1/2 mt-6 left-2.5 bg-zinc-950 rounded-lg shadow-lg flex flex-col   items-center"
+    >
+      <Button
+        onClick={() => {
+          setActiveMenuItem('uploads');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'uploads'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <Icons.upload width={20} />
+      </Button>
+      <Button
+        onClick={() => {
+          setActiveMenuItem('texts');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'texts'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <Icons.type width={20} />
+      </Button>
+      <Button
+        onClick={() => {
+          setActiveMenuItem('videos');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'videos'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <Icons.video width={20} />
+      </Button>
+      <Button
+        onClick={() => {
+          setActiveMenuItem('images');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'images'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <Icons.image width={20} />
+      </Button>
+      <Button
+        onClick={() => {
+          setActiveMenuItem('shapes');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'shapes'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <Icons.shapes width={20} />
+      </Button>
+      <Button
+        onClick={() => {
+          setActiveMenuItem('audios');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'audios'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <Icons.audio width={20} />
+      </Button>
+
+      <Button
+        onClick={() => {
+          setActiveMenuItem('transitions');
+          setShowMenuItem(true);
+        }}
+        className={cn(
+          showMenuItem && activeMenuItem === 'transitions'
+            ? 'bg-grey-900'
+            : 'text-muted-foreground',
+        )}
+        variant={'ghost'}
+        size={'icon'}
+      >
+        <svg
+          width={20}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 5.30359C3 3.93159 4.659 3.24359 5.629 4.21359L11.997 10.5826L10.583 11.9966L5 6.41359V17.5856L10.586 11.9996L10.583 11.9966L11.997 10.5826L12 10.5856L18.371 4.21459C19.341 3.24459 21 3.93159 21 5.30359V18.6956C21 20.0676 19.341 20.7556 18.371 19.7856L12 13.5L13.414 11.9996L19 17.5866V6.41359L13.414 11.9996L13.421 12.0056L12.006 13.4206L12 13.4136L5.629 19.7846C4.659 20.7546 3 20.0676 3 18.6956V5.30359Z"
+            fill="currentColor"
+          />
+        </svg>
+      </Button>
+    </div>
+  );
+}

src/components/editor/navbar.tsx

@@ -0,0 +1,336 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DESIGN_RESIZE,
+  HISTORY_UNDO,
+  HISTORY_REDO,
+  dispatcher,
+  useEditorState,
+} from '@designcombo/core';
+import logoDark from '@/assets/logo-dark.png';
+import { Icons } from '../shared/icons';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { ChevronDown, Download } from 'lucide-react';
+import { Label } from '../ui/label';
+import { Progress } from '../ui/progress';
+import { download } from '@/utils/download';
+
+const baseUrl = 'https://renderer.designcombo.dev';
+//  https://renderer.designcombo.dev/status/{id}
+export default function Navbar() {
+  const handleUndo = () => {
+    dispatcher.dispatch(HISTORY_UNDO);
+  };
+
+  const handleRedo = () => {
+    dispatcher.dispatch(HISTORY_REDO);
+  };
+
+  const openLink = (url: string) => {
+    window.open(url, '_blank'); // '_blank' will open the link in a new tab
+  };
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '320px 1fr 320px',
+      }}
+      className="h-[72px] absolute top-0 left-0 right-0  px-2 z-[205] pointer-events-none flex items-center"
+    >
+      <div className="flex items-center gap-2 pointer-events-auto h-14">
+        <div className="bg-zinc-950 h-12 w-12 flex items-center justify-center rounded-md">
+          <img src={logoDark} alt="logo" className="h-5 w-5" />
+        </div>
+        <div className="bg-zinc-950 px-1.5 h-12 flex  items-center">
+          <Button
+            onClick={handleUndo}
+            className="text-muted-foreground"
+            variant="ghost"
+            size="icon"
+          >
+            <Icons.undo width={20} />
+          </Button>
+          <Button
+            onClick={handleRedo}
+            className="text-muted-foreground"
+            variant="ghost"
+            size="icon"
+          >
+            <Icons.redo width={20} />
+          </Button>
+        </div>
+      </div>
+
+      <div className="pointer-events-auto  h-14 flex items-center gap-2 justify-center">
+        <div className="bg-zinc-950 px-2.5 rounded-md h-12 gap-4 flex items-center">
+          <div className="font-medium text-sm px-1">Untitled video</div>
+          <ResizeVideo />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 pointer-events-auto h-14 justify-end">
+        <div className="flex items-center gap-2 bg-zinc-950 px-2.5 rounded-md h-12">
+          <Button
+            className="border border-white/10 flex gap-2"
+            onClick={() => openLink('https://discord.gg/jrZs3wZyM5')}
+            size="xs"
+            variant="secondary"
+          >
+            <svg
+              stroke="currentColor"
+              fill="currentColor"
+              strokeWidth="0"
+              viewBox="0 0 640 512"
+              height={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
+            </svg>
+            Discord
+          </Button>
+          <DownloadPopover />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface IDownloadState {
+  renderId: string;
+  progress: number;
+  isDownloading: boolean;
+}
+const DownloadPopover = () => {
+  const [open, setOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [downloadState, setDownloadState] = useState<IDownloadState>({
+    progress: 0,
+    isDownloading: false,
+    renderId: '',
+  });
+  const {
+    trackItemIds,
+    trackItemsMap,
+    transitionIds,
+    transitionsMap,
+    tracks,
+    duration,
+    size,
+  } = useEditorState();
+
+  const handleExport = () => {
+    const payload = {
+      trackItemIds,
+      trackItemsMap,
+      transitionIds,
+      transitionsMap,
+      tracks,
+      size: size,
+      duration: duration - 750,
+      fps: 30,
+      projectId: 'main',
+    };
+
+    setDownloadState({
+      ...downloadState,
+      isDownloading: true,
+    });
+    fetch(`${baseUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+      .then((res) => res.json())
+      .then(({ render }) => {
+        setDownloadState({
+          ...downloadState,
+          renderId: render.id,
+          isDownloading: true,
+        });
+      });
+  };
+
+  useEffect(() => {
+    console.log('renderId', downloadState.renderId);
+
+    let interval: NodeJS.Timeout;
+    if (downloadState.renderId) {
+      interval = setInterval(() => {
+        fetch(`${baseUrl}/status/${downloadState.renderId}`)
+          .then((res) => res.json())
+          .then(({ render: { progress, output } }) => {
+            if (progress === 100) {
+              clearInterval(interval);
+              setDownloadState({
+                ...downloadState,
+                renderId: '',
+                progress: 0,
+                isDownloading: false,
+              });
+              download(output, `${downloadState.renderId}`);
+              setOpen(false);
+            } else {
+              setDownloadState({
+                ...downloadState,
+                progress,
+                isDownloading: true,
+              });
+            }
+          });
+      }, 1000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [downloadState.renderId]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button className="flex gap-1 h-8 w-8" size="icon" variant="default">
+          <Download width={18} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-60 z-[250] flex flex-col gap-4">
+        {downloadState.isDownloading ? (
+          <>
+            <Label>Downloading</Label>
+            <div className="flex items-center gap-2">
+              <Progress
+                className="h-2 rounded-sm"
+                value={downloadState.progress}
+              />
+              <div className="text-zinc-400 text-sm border border-border p-1 rounded-sm">
+                {parseInt(downloadState.progress.toString())}%
+              </div>
+            </div>
+            <div>
+              <Button className="w-full" size="xs">
+                Copy link
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            <Label>Export settings</Label>
+            <Button className="w-full justify-between" variant="outline">
+              <div>MP4</div>
+              <ChevronDown width={16} />
+            </Button>
+            <div>
+              <Button onClick={handleExport} className="w-full" size="xs">
+                Export
+              </Button>
+            </div>
+          </>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+interface ResizeOptionProps {
+  label: string;
+  icon: string;
+  value: ResizeValue;
+}
+
+interface ResizeValue {
+  width: number;
+  height: number;
+  name: string;
+}
+
+const RESIZE_OPTIONS: ResizeOptionProps[] = [
+  {
+    label: '16:9',
+    icon: 'landscape',
+    value: {
+      width: 1920,
+      height: 1080,
+      name: '16:9',
+    },
+  },
+  {
+    label: '9:16',
+    icon: 'portrait',
+    value: {
+      width: 1080,
+      height: 1920,
+      name: '9:16',
+    },
+  },
+  {
+    label: '1:1',
+    icon: 'square',
+    value: {
+      width: 1080,
+      height: 1080,
+      name: '1:1',
+    },
+  },
+];
+
+const ResizeVideo = () => {
+  const handleResize = (payload: ResizeValue) => {
+    dispatcher.dispatch(DESIGN_RESIZE, {
+      payload,
+    });
+  };
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          className="border border-white/10"
+          size="xs"
+          variant="secondary"
+        >
+          Resize
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-60 z-[250]">
+        <div className="grid gap-4 text-sm">
+          {RESIZE_OPTIONS.map((option, index) => (
+            <ResizeOption
+              key={index}
+              label={option.label}
+              icon={option.icon}
+              value={option.value}
+              handleResize={handleResize}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const ResizeOption = ({
+  label,
+  icon,
+  value,
+  handleResize,
+}: ResizeOptionProps & { handleResize: (payload: ResizeValue) => void }) => {
+  const Icon = Icons[icon];
+  return (
+    <div
+      onClick={() => handleResize(value)}
+      className="flex items-center gap-4 hover:bg-zinc-50/10 cursor-pointer"
+    >
+      <div className="text-muted-foreground">
+        <Icon />
+      </div>
+      <div>
+        <div>{label}</div>
+        <div className="text-muted-foreground">Tiktok, Instagram</div>
+      </div>
+    </div>
+  );
+};

src/components/editor/resize-video.tsx

@@ -0,0 +1,3 @@
+const ResizeVideo = () => {
+  return <div>ResizeVideo</div>;
+};

src/components/editor/use-hotkeys.ts

@@ -0,0 +1,105 @@
+import { DEFAULT_FONT } from '@/data/fonts';
+import {
+  ACTIVE_CLONE,
+  ACTIVE_DELETE,
+  ADD_TEXT,
+  HISTORY_REDO,
+  HISTORY_UNDO,
+  LAYER_SELECT,
+  PLAYER_SEEK_BY,
+  PLAYER_TOGGLE_PLAY,
+  dispatcher,
+} from '@designcombo/core';
+import hotkeys from 'hotkeys-js';
+import { nanoid } from 'nanoid';
+import { useEffect } from 'react';
+
+const useHotkeys = () => {
+  useEffect(() => {
+    const dispatch = dispatcher.dispatch;
+    // handle undo
+    hotkeys('ctrl+z,command+z', (event) => {
+      event.preventDefault(); // Prevent the default action
+      dispatch(HISTORY_UNDO);
+      // dispatch(UNDO);
+    });
+
+    // handle redo: ctrl+shift+z
+    hotkeys('ctrl+shift+z,command+shift+z', (event) => {
+      event.preventDefault(); // Prevent the default action
+      //   redo();
+      dispatch(HISTORY_REDO);
+    });
+
+    // Define the shortcut and corresponding action
+    hotkeys('ctrl+s,command+s', (event) => {
+      event.preventDefault(); // Prevent the default action
+      console.log('split action');
+      //   dispatch(ACTIVE_SPLIT);
+    });
+
+    // duplicate item
+    hotkeys('ctrl+d,command+d', (event) => {
+      event.preventDefault(); // Prevent the default action
+      dispatch(ACTIVE_CLONE);
+    });
+
+    hotkeys('backspace,delete', (event) => {
+      event.preventDefault(); // Prevent the default action
+      dispatch(ACTIVE_DELETE);
+    });
+
+    hotkeys('esc', (event) => {
+      event.preventDefault(); // Prevent the default action
+      dispatcher.dispatch(LAYER_SELECT, { payload: { activeIds: [] } });
+    });
+
+    hotkeys('space', (event) => {
+      event.preventDefault();
+      dispatch(PLAYER_TOGGLE_PLAY);
+    });
+
+    hotkeys('down', (event) => {
+      event.preventDefault();
+      dispatch(PLAYER_SEEK_BY, { payload: { frames: 1 } });
+    });
+
+    hotkeys('up', (event) => {
+      event.preventDefault();
+      dispatch(PLAYER_SEEK_BY, { payload: { frames: -1 } });
+    });
+
+    // New shortcut for the 'T' key
+    hotkeys('t', (event) => {
+      dispatcher.dispatch(ADD_TEXT, {
+        payload: {
+          id: nanoid(),
+          details: {
+            text: 'Add text',
+            fontSize: 62,
+            fontFamily: DEFAULT_FONT.postScriptName,
+            fontUrl: DEFAULT_FONT.url,
+            width: 400,
+            textAlign: 'left',
+            color: '#ffffff',
+          },
+        },
+      });
+    });
+
+    return () => {
+      hotkeys.unbind('ctrl+shift+z,command+shift+z');
+      hotkeys.unbind('ctrl+z,command+z');
+      hotkeys.unbind('ctrl+s,command+s');
+      hotkeys.unbind('ctrl+d,command+d');
+      hotkeys.unbind('backspace,delete');
+      hotkeys.unbind('escape');
+      hotkeys.unbind('down');
+      hotkeys.unbind('up');
+      hotkeys.unbind('space');
+      hotkeys.unbind('t');
+    };
+  }, []);
+};
+
+export default useHotkeys;

src/components/shared/draggable.tsx

@@ -0,0 +1,81 @@
+import { useEditorState } from '@designcombo/core';
+import React, { useState, cloneElement, ReactElement, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+interface DraggableProps {
+  children: ReactElement;
+  shouldDisplayPreview?: boolean;
+  renderCustomPreview?: ReactElement;
+  data?: Record<string, any>;
+}
+
+const Draggable: React.FC<DraggableProps> = ({
+  children,
+  renderCustomPreview,
+  data = {},
+  shouldDisplayPreview = true,
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const previewRef = useRef<HTMLDivElement>(null);
+  const handleDragStart = (e: React.DragEvent<HTMLElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(new Image(), 0, 0); // Hides default preview
+    // set drag data
+    e.dataTransfer.setData('transition', JSON.stringify(data));
+    setPosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrag = (e: React.DragEvent<HTMLElement>) => {
+    if (isDragging) {
+      setPosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
+    }
+  };
+
+  const childWithProps = cloneElement(children, {
+    draggable: true,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDrag: handleDrag,
+    style: {
+      ...children.props.style,
+      cursor: 'grab',
+    },
+  });
+
+  return (
+    <>
+      {childWithProps}
+      {isDragging && shouldDisplayPreview && renderCustomPreview
+        ? createPortal(
+            <div
+              ref={previewRef}
+              style={{
+                position: 'fixed',
+                left: position.x,
+                top: position.y,
+                pointerEvents: 'none',
+                zIndex: 9999,
+                transform: 'translate(-50%, -50%)', // Center the preview
+              }}
+            >
+              {renderCustomPreview}
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+};
+
+export default Draggable;

src/components/shared/icons.tsx

@@ -0,0 +1,253 @@
+import {
+  AlertTriangle,
+  ArrowRight,
+  ArrowUpRight,
+  BookOpen,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  CreditCard,
+  File,
+  FileText,
+  FolderClosed,
+  HelpCircle,
+  Home,
+  Image,
+  Laptop,
+  LayoutPanelLeft,
+  LineChart,
+  Loader2,
+  LucideIcon,
+  LucideProps,
+  MessagesSquare,
+  Moon,
+  MoreVertical,
+  Package,
+  Plus,
+  Puzzle,
+  Search,
+  Settings,
+  SunMedium,
+  Trash,
+  Text,
+  Type,
+  User,
+  X,
+  Square,
+  RectangleVertical,
+  RectangleHorizontal,
+  WandSparkles,
+  Zap,
+  Music,
+  VideoIcon,
+} from 'lucide-react';
+
+export type Icon = LucideIcon;
+
+export const Icons = {
+  add: Plus,
+  audio: Music,
+  arrowRight: ArrowRight,
+  arrowUpRight: ArrowUpRight,
+  billing: CreditCard,
+  bookOpen: BookOpen,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  check: Check,
+  close: X,
+  copy: Copy,
+  dashboard: LayoutPanelLeft,
+  ellipsis: MoreVertical,
+  folder: FolderClosed,
+  gitHub: ({ ...props }: LucideProps) => (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="github"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 496 512"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      ></path>
+    </svg>
+  ),
+  google: ({ ...props }: LucideProps) => (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="google"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 488 512"
+      {...props}
+    >
+      <path
+        d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  nextjs: ({ ...props }: LucideProps) => (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="nextjs"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 15 15"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="m4.5 4.5l.405-.293A.5.5 0 0 0 4 4.5zm3 9.5A6.5 6.5 0 0 1 1 7.5H0A7.5 7.5 0 0 0 7.5 15zM14 7.5A6.5 6.5 0 0 1 7.5 14v1A7.5 7.5 0 0 0 15 7.5zM7.5 1A6.5 6.5 0 0 1 14 7.5h1A7.5 7.5 0 0 0 7.5 0zm0-1A7.5 7.5 0 0 0 0 7.5h1A6.5 6.5 0 0 1 7.5 1zM5 12V4.5H4V12zm-.905-7.207l6.5 9l.81-.586l-6.5-9zM10 4v6h1V4z"
+      ></path>
+    </svg>
+  ),
+  help: HelpCircle,
+  home: Home,
+  image: Image,
+  landscape: RectangleHorizontal,
+  laptop: Laptop,
+  lineChart: LineChart,
+  logo: Puzzle,
+  media: Image,
+  messages: MessagesSquare,
+  moon: Moon,
+  package: Package,
+  page: File,
+  portrait: RectangleVertical,
+  post: FileText,
+  preset: Zap,
+  search: Search,
+  square: Square,
+  redo: ({ ...props }: LucideProps) => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.2957 4.15721C13.9052 3.76669 13.9052 3.13352 14.2957 2.743C14.6862 2.35247 15.3194 2.35247 15.7099 2.743L20.953 7.98603C21.1387 8.16758 21.2539 8.42087 21.2539 8.70108C21.2539 8.70111 21.2539 8.70114 21.2539 8.70117C21.2539 8.70431 21.2539 8.70744 21.2539 8.71057C21.2518 8.93273 21.1773 9.13757 21.0528 9.30262C21.0249 9.33973 20.9942 9.37505 20.961 9.40828L15.7099 14.6593C15.3194 15.0499 14.6862 15.0499 14.2957 14.6593C13.9052 14.2688 13.9052 13.6357 14.2957 13.2451L17.8398 9.70108H9.22665C8.59943 9.70108 7.97836 9.82462 7.39888 10.0646C6.81941 10.3047 6.29289 10.6565 5.84938 11.1C5.40587 11.5435 5.05406 12.07 4.81403 12.6495C4.57401 13.229 4.45047 13.85 4.45047 14.4773C4.45047 15.1045 4.57401 15.7256 4.81403 16.305C5.05406 16.8845 5.40587 17.411 5.84938 17.8545C6.29289 18.298 6.81941 18.6498 7.39888 18.8899C7.97836 19.1299 8.59943 19.2534 9.22665 19.2534H12.9024C13.4547 19.2534 13.9024 19.7012 13.9024 20.2534C13.9024 20.8057 13.4547 21.2534 12.9024 21.2534H9.22665C8.33679 21.2534 7.45564 21.0782 6.63352 20.7376C5.81139 20.3971 5.06439 19.898 4.43517 19.2687C3.80594 18.6395 3.30681 17.8925 2.96627 17.0704C2.62574 16.2483 2.45047 15.3671 2.45047 14.4773C2.45047 13.5874 2.62574 12.7063 2.96627 11.8841C3.30681 11.062 3.80594 10.315 4.43517 9.68578C5.06439 9.05655 5.81139 8.55742 6.63352 8.21689C7.45564 7.87635 8.33679 7.70108 9.22665 7.70108H17.8396L14.2957 4.15721Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  shapes: ({ ...props }: LucideProps) => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_2077_2705)">
+        <path
+          d="M3.75 12H2.25V20.25C2.25 20.6478 2.40804 21.0294 2.68934 21.3107C2.97064 21.592 3.35218 21.75 3.75 21.75H9.75V20.25H3.75V12ZM21 21.75H12.75C12.6197 21.75 12.4916 21.716 12.3784 21.6514C12.2652 21.5868 12.1708 21.4938 12.1045 21.3816C12.0382 21.2694 12.0022 21.1419 12.0002 21.0116C11.9982 20.8813 12.0302 20.7527 12.093 20.6385L16.218 13.1385C16.2821 13.0203 16.377 12.9218 16.4928 12.8534C16.6085 12.7849 16.7406 12.7492 16.875 12.75C17.1322 12.75 17.3895 12.879 17.532 13.1385L21.657 20.6385C21.7198 20.7527 21.7518 20.8813 21.7498 21.0116C21.7478 21.1419 21.7118 21.2694 21.6455 21.3816C21.5792 21.4938 21.4848 21.5868 21.3716 21.6514C21.2584 21.716 21.1303 21.75 21 21.75ZM14.0182 20.25H19.7318L16.875 15.0563L14.0182 20.25ZM20.25 2.25H12V3.75H20.25V14.244H21.75V3.75C21.75 3.35218 21.592 2.97064 21.3107 2.68934C21.0294 2.40804 20.6478 2.25 20.25 2.25ZM8.25 2.25H3.75C3.35218 2.25 2.97064 2.40804 2.68934 2.68934C2.40804 2.97064 2.25 3.35218 2.25 3.75V8.25C2.25 8.64782 2.40804 9.02936 2.68934 9.31066C2.97064 9.59196 3.35218 9.75 3.75 9.75H8.25C8.64782 9.75 9.02936 9.59196 9.31066 9.31066C9.59196 9.02936 9.75 8.64782 9.75 8.25V3.75C9.75 3.35218 9.59196 2.97064 9.31066 2.68934C9.02936 2.40804 8.64782 2.25 8.25 2.25ZM8.25 8.25H3.75V3.75H8.25V8.25Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2077_2705">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
+  settings: Settings,
+  smart: WandSparkles,
+  spinner: Loader2,
+  sun: SunMedium,
+  templates: ({ ...props }: LucideProps) => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_2077_2714)">
+        <path
+          d="M19.5 4.5V7.5H4.5V4.5H19.5ZM19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V7.5C3 7.89782 3.15804 8.27936 3.43934 8.56066C3.72064 8.84196 4.10218 9 4.5 9H19.5C19.8978 9 20.2794 8.84196 20.5607 8.56066C20.842 8.27936 21 7.89782 21 7.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM7.5 12V19.5H4.5V12H7.5ZM7.5 10.5H4.5C4.10218 10.5 3.72064 10.658 3.43934 10.9393C3.15804 11.2206 3 11.6022 3 12V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H7.5C7.89782 21 8.27936 20.842 8.56066 20.5607C8.84196 20.2794 9 19.8978 9 19.5V12C9 11.6022 8.84196 11.2206 8.56066 10.9393C8.27936 10.658 7.89782 10.5 7.5 10.5ZM19.5 12V19.5H12V12H19.5ZM19.5 10.5H12C11.6022 10.5 11.2206 10.658 10.9393 10.9393C10.658 11.2206 10.5 11.6022 10.5 12V19.5C10.5 19.8978 10.658 20.2794 10.9393 20.5607C11.2206 20.842 11.6022 21 12 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V12C21 11.6022 20.842 11.2206 20.5607 10.9393C20.2794 10.658 19.8978 10.5 19.5 10.5Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2077_2714">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
+  text: Type,
+
+  trash: Trash,
+  twitter: ({ ...props }: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="twitter"
+      role="img"
+      {...props}
+    >
+      <path
+        d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  type: Type,
+  undo: ({ ...props }: LucideProps) => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.60387 4.30711C9.99439 3.91659 9.99439 3.28342 9.60387 2.8929C9.21334 2.50238 8.58018 2.50237 8.18965 2.8929L2.8925 8.19004C2.70497 8.37758 2.59961 8.63193 2.59961 8.89715C2.59961 9.16237 2.70497 9.41672 2.8925 9.60426L8.18965 14.9014C8.58018 15.2919 9.21334 15.2919 9.60387 14.9014C9.99439 14.5109 9.99439 13.8777 9.60387 13.4872L5.86478 9.7481H15.1044C15.7383 9.7481 16.366 9.87295 16.9516 10.1155C17.5372 10.3581 18.0693 10.7136 18.5176 11.1619C18.9658 11.6101 19.3213 12.1422 19.5639 12.7278C19.8065 13.3134 19.9313 13.9411 19.9313 14.575C19.9313 15.2088 19.8065 15.8365 19.5639 16.4221C19.3213 17.0077 18.9658 17.5398 18.5176 17.9881C18.0693 18.4363 17.5372 18.7918 16.9516 19.0344C16.366 19.277 15.7383 19.4018 15.1044 19.4018H11.3964C10.8442 19.4018 10.3964 19.8495 10.3964 20.4018C10.3964 20.9541 10.8442 21.4018 11.3964 21.4018H15.1044C16.001 21.4018 16.8887 21.2252 17.717 20.8822C18.5452 20.5391 19.2978 20.0362 19.9318 19.4023C20.5657 18.7683 21.0686 18.0158 21.4116 17.1875C21.7547 16.3592 21.9313 15.4715 21.9313 14.575C21.9313 13.6784 21.7547 12.7907 21.4116 11.9624C21.0686 11.1342 20.5657 10.3816 19.9318 9.74764C19.2978 9.11371 18.5452 8.61085 17.717 8.26777C16.8887 7.92469 16.001 7.7481 15.1044 7.7481H6.16287L9.60387 4.30711Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  upload: ({ ...props }: LucideProps) => (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_2077_2699)">
+        <path
+          d="M8.25 13.5L9.3075 14.5575L11.25 12.6225V21.75H12.75V12.6225L14.6925 14.5575L15.75 13.5L12 9.75L8.25 13.5Z"
+          fill="currentColor"
+        />
+        <path
+          d="M17.6249 16.5004H17.2499V15.0004H17.6249C18.52 15.0362 19.3927 14.715 20.0509 14.1074C20.7092 13.4997 21.0991 12.6555 21.1349 11.7604C21.1707 10.8653 20.8495 9.99264 20.2418 9.33438C19.6342 8.67613 18.79 8.28621 17.8949 8.25041H17.2499L17.1749 7.63541C17.0085 6.37275 16.3888 5.21362 15.4312 4.37395C14.4736 3.53428 13.2435 3.07132 11.9699 3.07132C10.6963 3.07132 9.46616 3.53428 8.50857 4.37395C7.55099 5.21362 6.93129 6.37275 6.76489 7.63541L6.74989 8.25041H6.10489C5.20979 8.28621 4.36557 8.67613 3.75795 9.33438C3.15033 9.99264 2.82909 10.8653 2.86489 11.7604C2.9007 12.6555 3.29062 13.4997 3.94887 14.1074C4.60712 14.715 5.47979 15.0362 6.37489 15.0004H6.74989V16.5004H6.37489C5.1722 16.4928 4.01477 16.0409 3.12513 15.2315C2.2355 14.4221 1.67646 13.3124 1.55549 12.1158C1.43453 10.9192 1.76018 9.72009 2.46983 8.74905C3.17949 7.77801 4.22305 7.10357 5.39989 6.85541C5.72367 5.3453 6.55552 3.99189 7.75663 3.02101C8.95774 2.05013 10.4555 1.52051 11.9999 1.52051C13.5443 1.52051 15.042 2.05013 16.2432 3.02101C17.4443 3.99189 18.2761 5.3453 18.5999 6.85541C19.7767 7.10357 20.8203 7.77801 21.53 8.74905C22.2396 9.72009 22.5653 10.9192 22.4443 12.1158C22.3233 13.3124 21.7643 14.4221 20.8747 15.2315C19.985 16.0409 18.8276 16.4928 17.6249 16.5004Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2077_2699">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
+  user: User,
+  video: VideoIcon,
+  warning: AlertTriangle,
+};

src/components/theme-provider.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+        .matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

src/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-8 rounded-md px-3',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/components/ui/command.tsx

@@ -0,0 +1,153 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}