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

@ -263,11 +263,12 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
);
}
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
function SidebarRail({ className, ...props }: React.ComponentProps<typeof Button>) {
const { toggleSidebar } = useSidebar();
return (
<button
<Button
variant="ghost"
data-sidebar="rail"
data-slot="sidebar-rail"
aria-label="Toggle Sidebar"
@ -275,7 +276,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden h-auto w-4 -translate-x-1/2 rounded-none p-0 transition-all ease-linear hover:bg-transparent group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",