Update

resources/js/modules/editor/partials/editor-controls.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { Play, Type, Edit3, Download } from "lucide-react"
+
+const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+      >
+        <Play className="h-8 w-8 " />
+      </Button>
+
+      <div className="w-12 h-12 rounded-full bg-white shadow-sm border border-gray-100 flex items-center justify-center">
+        <span className="text-md font-medium ">9:16</span>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+      >
+        <Type className="h-8 w-8 " />
+      </Button>
+
+      <Button
+        id="edit"
+        variant={isEditActive ? "default" : "ghost"}
+        size="icon"
+        className="w-12 h-12 rounded-full shadow-sm border"
+        onClick={onEditClick}
+      >
+        <Edit3 className={`h-8 w-8 ${isEditActive ? "text-white" : ""}`} />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+      >
+        <Download className="h-8 w-8 " />
+      </Button>
+    </div>
+  )
+}
+
+
+export default EditorControls;