Untitled
unknown
plain_text
a month ago
2.0 kB
4
Indexable
import React, { useState } from "react"; import { Check, Copy, Pencil, Save, X } from "lucide-react"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; const IconToggleButtons = () => { const [activeToggle, setActiveToggle] = useState(""); const handleToggle = (value) => { if (activeToggle === value) { setActiveToggle(""); // Deselect if clicked again } else { setActiveToggle(value); // Set the active toggle } }; return ( <div className="p-4 bg-gray-100 rounded-lg shadow-md flex items-center justify-center"> <ToggleGroup type="single" className="flex space-x-4" value={activeToggle} onValueChange={handleToggle} > {/* Copy Toggle */} <ToggleGroupItem value="copy" className="flex items-center justify-center w-10 h-10 border rounded-full hover:bg-gray-200 transition" > {activeToggle === "copy" ? ( <Check className="w-5 h-5 text-green-500" /> ) : ( <Copy className="w-5 h-5 text-gray-600" /> )} </ToggleGroupItem> {/* Edit/Save Toggle */} <ToggleGroupItem value="edit" className="flex items-center justify-center w-10 h-10 border rounded-full hover:bg-gray-200 transition" > {activeToggle === "edit" ? ( <Save className="w-5 h-5 text-blue-500" /> ) : ( <Pencil className="w-5 h-5 text-gray-600" /> )} </ToggleGroupItem> {/* Cancel Toggle */} {activeToggle === "edit" && ( <ToggleGroupItem value="cancel" className="flex items-center justify-center w-10 h-10 border rounded-full hover:bg-gray-200 transition" onClick={() => setActiveToggle("")} // Reset to default > <X className="w-5 h-5 text-red-500" /> </ToggleGroupItem> )} </ToggleGroup> </div> ); }; export default IconToggleButtons;
Editor is loading...
Leave a Comment