53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"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;
|