committed by
GitHub
1 changed files with 0 additions and 81 deletions
@ -1,81 +0,0 @@ |
|||||
import React from "react"; |
|
||||
import { Button } from "@components/UI/Button.tsx"; |
|
||||
import type { LucideIcon } from "lucide-react"; |
|
||||
import { cn } from "@core/utils/cn.ts"; |
|
||||
import { useSidebar } from "@core/stores/sidebarStore.tsx"; |
|
||||
|
|
||||
export interface SidebarButtonProps { |
|
||||
label: string; |
|
||||
count?: number; |
|
||||
active?: boolean; |
|
||||
Icon?: LucideIcon; |
|
||||
children?: React.ReactNode; |
|
||||
onClick?: () => void; |
|
||||
disabled?: boolean; |
|
||||
preventCollapse?: boolean; |
|
||||
} |
|
||||
|
|
||||
export const SidebarButton = ({ |
|
||||
label, |
|
||||
active, |
|
||||
Icon, |
|
||||
count, |
|
||||
children, |
|
||||
onClick, |
|
||||
disabled = false, |
|
||||
preventCollapse = false, |
|
||||
}: SidebarButtonProps) => { |
|
||||
const { isCollapsed: isSidebarCollapsed } = useSidebar(); |
|
||||
const isButtonCollapsed = isSidebarCollapsed && !preventCollapse; |
|
||||
|
|
||||
return ( |
|
||||
<Button |
|
||||
onClick={onClick} |
|
||||
variant={active ? "subtle" : "ghost"} |
|
||||
size="sm" |
|
||||
className={cn( |
|
||||
"flex w-full items-center text-wrap", |
|
||||
isButtonCollapsed |
|
||||
? "justify-center gap-0 px-2 h-9" |
|
||||
: "justify-start gap-2 min-h-9", |
|
||||
)} |
|
||||
disabled={disabled} |
|
||||
> |
|
||||
{Icon && ( |
|
||||
<Icon |
|
||||
size={isButtonCollapsed ? 20 : 18} |
|
||||
className="flex-shrink-0" |
|
||||
/> |
|
||||
)} |
|
||||
|
|
||||
{children} |
|
||||
|
|
||||
<span |
|
||||
className={cn( |
|
||||
"flex flex-wrap justify-start text-left text-wrap break-all", |
|
||||
"min-w-0", |
|
||||
"px-1", |
|
||||
"transition-all duration-300 ease-in-out", |
|
||||
isButtonCollapsed |
|
||||
? "opacity-0 max-w-0 invisible w-0 overflow-hidden" |
|
||||
: "opacity-100 max-w-full visible flex-1 whitespace-normal", |
|
||||
)} |
|
||||
> |
|
||||
{label} |
|
||||
</span> |
|
||||
|
|
||||
{!isButtonCollapsed && !active && count && count > 0 && ( |
|
||||
<div |
|
||||
className={cn( |
|
||||
"ml-auto flex-shrink-0 justify-end text-white text-xs rounded-full px-1.5 py-0.5 bg-red-600", |
|
||||
"flex-shrink-0", |
|
||||
"transition-opacity duration-300 ease-in-out", |
|
||||
isButtonCollapsed ? "opacity-0 invisible" : "opacity-100 visible", |
|
||||
)} |
|
||||
> |
|
||||
{count} |
|
||||
</div> |
|
||||
)} |
|
||||
</Button> |
|
||||
); |
|
||||
}; |
|
||||
Loading…
Reference in new issue