import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
import { ConnectTooltip } from "../tooltip/tooltip.js";
export const SidebarItem = function SidebarItem(props) {
    const { icon, title, description, containerClassName, active, onClick } = props;
    return (_jsx(ConnectTooltip, { content: title, side: "right", sideOffset: 12, className: "border-none bg-gray-800 px-3 py-2 text-sm text-white", children: _jsxs("div", { className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-black", containerClassName, active && "bg-white", onClick && "cursor-pointer"), onClick: onClick, children: [active ? (_jsx("div", { className: "absolute left-0 top-1/2 h-10 w-1 -translate-y-1/2 rounded-r-sm bg-violet-400" })) : (_jsx("div", { className: "absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-zinc-300 opacity-0 transition-opacity group-hover/sidebar-item:opacity-100" })), _jsx("div", { className: "mx-auto py-4", children: icon || (_jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-black", children: _jsx("span", { className: "text-sm font-medium text-white", children: title.slice(0, 1).toUpperCase() }) })) })] }) }));
};
//# sourceMappingURL=sidebar-item.js.map