refactor: replace button elements with Button component for improved consistency and styling across additional UI components

This commit is contained in:
Anish Sarkar 2026-05-14 15:02:46 +05:30
parent 13b2e874f6
commit c77babf39b
25 changed files with 148 additions and 92 deletions

View file

@ -3,8 +3,8 @@
import { useToggleButton, useToggleButtonState } from "@platejs/toggle/react";
import { ChevronRightIcon } from "lucide-react";
import { PlateElement, type PlateElementProps } from "platejs/react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
export function ToggleElement({ children, ...props }: PlateElementProps) {
@ -14,7 +14,9 @@ export function ToggleElement({ children, ...props }: PlateElementProps) {
return (
<PlateElement {...props} className="relative py-1 pl-6">
<button
<Button
variant="ghost"
size="icon"
className={cn(
"absolute top-1.5 left-0 flex size-6 cursor-pointer select-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
)}
@ -25,7 +27,7 @@ export function ToggleElement({ children, ...props }: PlateElementProps) {
<ChevronRightIcon
className={cn("size-4 transition-transform duration-200", open && "rotate-90")}
/>
</button>
</Button>
<div>{children}</div>
</PlateElement>
);