eai-frontend-components 2.0.4 → 2.0.6

package/src/components/ui/custom/header.tsx

@@ -1,128 +0,0 @@
-import { ReactNode, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import LoadingBar, { LoadingBarRef } from 'react-top-loading-bar';
-import { getTailwindColorShades, TailwindColorName } from '../../../lib/help/theme';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../breadcrumb';
-import { SidebarTrigger } from '../sidebar';
-import { Module, SidebarPage } from './sidebar/types/sidebar';
-import { DEFAULT_THEME_DATA, useTheme } from './theme-provider';
-
-const Header = ({
-	splittedPath,
-	modules,
-	pages,
-	isLoading,
-	combobox,
-}: { splittedPath: string[]; modules: Module[]; pages: SidebarPage[]; isLoading: boolean; combobox: ReactNode }) => {
-	const { portalDefinitions } = useTheme();
-	const navigate = useNavigate();
-	const refProgressLoading = useRef<LoadingBarRef>(null);
-	const lastPage = splittedPath[splittedPath.length - 1];
-
-	useEffect(() => {
-		isLoading ? refProgressLoading.current?.start() : refProgressLoading.current?.complete();
-	}, [isLoading]);
-
-	const setRouter = (path: string) => {
-		navigate(path);
-	};
-
-	const getPath = (index: number) => {
-		let path = '';
-
-		for (let i = 0; i <= index; i++) {
-			path += `/${splittedPath[i]}`;
-		}
-
-		return path;
-	};
-
-	const getLinkSidebar = (index: number) => {
-		return pages.find((item) => item.path === getPath(index));
-	};
-
-	const getSubMenuItem = (index: number) => {
-		return pages.flatMap((item) => item.subMenuItems || []).find((sub) => sub.path === getPath(index));
-	};
-
-	const getModule = (page: string) => {
-		const module = modules.find((mod) => mod.value === page);
-		if (!module) {
-			return page;
-		}
-
-		return module?.title;
-	};
-
-	const getTitle = (index: number) => {
-		const linkSidebar = getLinkSidebar(index);
-		const subMenuItem = getSubMenuItem(index);
-
-		if (subMenuItem) {
-			return subMenuItem.label;
-		}
-
-		return linkSidebar?.title;
-	};
-
-	const renderBreadcrumbPage = (index: number) => {
-		return <BreadcrumbPage>{getTitle(index)}</BreadcrumbPage>;
-	};
-
-	const renderBreadcrumbLink = (page: string, index: number) => {
-		const linkSidebar = getLinkSidebar(index);
-
-		return linkSidebar?.subMenuType ? (
-			renderBreadcrumbPage(index)
-		) : (
-			<BreadcrumbLink onClick={() => setRouter(getPath(index))} className='cursor-pointer'>
-				{index === 0 ? getModule(page) : getTitle(index)}
-			</BreadcrumbLink>
-		);
-	};
-
-	const renderBreadcrumbItens = () => {
-		const breadcrumbItems: JSX.Element[] = [];
-
-		splittedPath.map((page, index) => {
-			breadcrumbItems.push(
-				<BreadcrumbItem key={`breadcrumb-item-${index}`}>
-					{page === lastPage ? renderBreadcrumbPage(index) : renderBreadcrumbLink(page, index)}
-				</BreadcrumbItem>,
-			);
-			if (page !== lastPage) {
-				breadcrumbItems.push(<BreadcrumbSeparator key={`breadcrumb-separator-${index}`} className='mt-[1px]' />);
-			}
-		});
-
-		return breadcrumbItems;
-	};
-
-	const getColorLoadingBar = () => {
-		const colorShades = getTailwindColorShades();
-		const tailwindColor = portalDefinitions?.mvnoPrimaryColor || DEFAULT_THEME_DATA.mvnoPrimaryColor;
-		const isValidColor = (color: string): color is TailwindColorName => color in colorShades;
-		const colorPallete = isValidColor(tailwindColor) ? colorShades[tailwindColor] : colorShades.violet;
-		return colorPallete[900];
-	};
-
-	return (
-		<header className='flex flex-col justify-between items-center w-full'>
-			<div className='flex justify-between items-center py-3 px-5 w-full'>
-				<div className='flex items-center gap-x-2 h-[40px]'>
-					<SidebarTrigger className='p-5' />
-					<div className='p-2'>
-						<Breadcrumb>
-							<BreadcrumbList>{renderBreadcrumbItens()}</BreadcrumbList>
-						</Breadcrumb>
-					</div>
-				</div>
-
-				<div className='flex items-center'>{combobox}</div>
-			</div>
-			{<LoadingBar ref={refProgressLoading} color={getColorLoadingBar()} height={7} />}
-		</header>
-	);
-};
-
-export default Header;

package/src/components/ui/custom/label.tsx

@@ -1,79 +0,0 @@
-import { Copy } from 'lucide-react';
-import React from 'react';
-import { cn } from '../../../lib/utils';
-import { Button } from '../button';
-import { Skeleton } from '../skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
-import { toast } from '../use-toast';
-
-interface LabelWithTitleProps {
-	title: string;
-	value: string;
-	value2?: string;
-	required?: boolean;
-	showCopyIcon?: boolean;
-	className?: string;
-	isLoading?: boolean;
-}
-
-const LabelWithTitle: React.FC<LabelWithTitleProps> = ({ title, value, value2, required, showCopyIcon = false, className, isLoading }) => {
-	const handleCopy = () => {
-		if (showCopyIcon && value) {
-			navigator.clipboard.writeText(`${value}${value2 ?? ''}`);
-			toast({
-				title: `"${value}${value2 ?? ''}" foi copiado para a área de transferência.`,
-				variant: 'success',
-			});
-		}
-	};
-
-	return (
-		<div className={cn('flex group', className)}>
-			<div
-				className={cn(
-					'flex flex-col text-sm w-full',
-					showCopyIcon ? 'p-1 rounded-md transition-colors group-hover:bg-sidebar-accent' : 'p-1',
-				)}
-			>
-				<div className='relative'>
-					<div className='flex items-center text-sm font-medium gap-0.5'>
-						<label className='text-default truncate'>{title}</label>
-						{required && <div className='text-red-500 truncate'>*</div>}
-					</div>
-					<div className='grid flex-1 items-center pt-1'>
-						{isLoading ? <Skeleton className='h-5 w-full rounded-lg' /> : <div className='text-zinc-500 truncate'>{value}</div>}
-					</div>
-					{value2 && (
-						<div className='grid flex-1 items-center pt-1'>
-							{isLoading ? <Skeleton className='h-5 w-full rounded-lg' /> : <div className='text-zinc-500 truncate'>{value2}</div>}
-						</div>
-					)}
-					<div
-						className={cn(
-							'pr-1 absolute top-1/2 right-0 -translate-y-1/2 opacity-0 transition-opacity',
-							showCopyIcon && 'group-hover:opacity-100',
-						)}
-					>
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant='ghost'
-										type='button'
-										className={cn('p-1 h-8', !showCopyIcon && 'cursor-default')}
-										onClick={handleCopy}
-									>
-										<Copy size={16} />
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>Copiar</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default LabelWithTitle;

package/src/components/ui/custom/not-found.tsx

@@ -1,30 +0,0 @@
-import { BarChart2 } from 'lucide-react';
-import { Button } from '../button';
-
-const NotFound = () => {
-	return (
-		<div className="flex flex-col items-center justify-center h-screen bg-[url('/imgs/404.png')] bg-cover bg-no-repeat bg-center">
-			<div className='flex flex-col items-center justify-center gap-8 w-[424px]'>
-				<div className='flex flex-col items-center w-full'>
-					<div className='text-5xl font-extrabold'>404</div>
-					<div className='text-3xl font-semibold'>Página Indisponível</div>
-				</div>
-				<div className='flex text-center text-xl font-semibold text-zinc-500'>
-					A página que você está tentando acessar se encontra indisponível no momento, tente novamente mais tarde
-				</div>
-				<div className='flex justify-center w-full'>
-					<Button
-						onClick={() => {
-							window.location.href = '/';
-						}}
-						className='[&_svg]:size-5'
-					>
-						<BarChart2 />
-						Voltar Para Inicial
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-};
-export default NotFound;

package/src/components/ui/custom/sidebar/module-switcher.tsx

@@ -1,58 +0,0 @@
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '../../sidebar';
-import SidebarItemTwoLines from './sidebar-item-two-lines';
-import { Module } from './types/sidebar';
-
-interface ModuleSwitcherProps {
-	modules: Module[];
-	activeModule: Module | undefined;
-	onModuleChange: (module: Module) => void;
-}
-
-const ModuleSwitcher = ({
-	modules,
-	activeModule,
-	onModuleChange,
-}: ModuleSwitcherProps) => {
-	const { isMobile } = useSidebar();
-
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<SidebarMenuButton size='lg' className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'>
-							<SidebarItemTwoLines
-								item={{
-									iconLeft: (
-										<div className='flex p-[7.6px] items-center rounded-md bg-background-primary'>{activeModule?.icon}</div>
-									),
-									title: activeModule?.title ?? '',
-									subTitle: activeModule?.subTitle ?? '',
-									iconRight: <ChevronsUpDown size={16} />,
-								}}
-							/>
-						</SidebarMenuButton>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent className='w-[250px] rounded-lg' align='start' side={isMobile ? 'bottom' : 'right'} sideOffset={4}>
-						{modules.map((module) => (
-							<DropdownMenuItem key={`module-switcher-${module.value}`} onClick={() => onModuleChange?.(module)} className='gap-2 p-2'>
-								<SidebarItemTwoLines
-									item={{
-										iconLeft: <div className='flex p-[7.6px] items-center rounded-md bg-background-primary'>{module.icon}</div>,
-										title: module.title,
-										subTitle: module.subTitle,
-										iconRight: activeModule?.value === module.value ? <Check size={16} /> : null,
-									}}
-								/>
-							</DropdownMenuItem>
-						))}
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
-
-export default ModuleSwitcher;

package/src/components/ui/custom/sidebar/nav-footer.tsx

@@ -1,35 +0,0 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-import { SidebarGroup, SidebarGroupContent, SidebarMenu } from '../../sidebar';
-import SidebarItem from './sidebar-item';
-import { SidebarPage } from './types/sidebar';
-
-interface NavFooterProps {
-	pages: SidebarPage[];
-}
-
-const NavFooter = ({pages}: NavFooterProps) => {
-	const navigate = useNavigate();
-	const location = useLocation();
-	const selectedRoutePath = location.pathname;
-
-	return (
-		<SidebarGroup className='p-0'>
-			<SidebarGroupContent>
-				<SidebarMenu>
-					{pages.map((item) => {
-						return (
-							<SidebarItem
-								key={`sidebar-menu-main-${item.path}`}
-								item={item}
-								selectedRoute={selectedRoutePath}
-								onClick={() => navigate(item.path)}
-							/>
-						);
-					})}
-				</SidebarMenu>
-			</SidebarGroupContent>
-		</SidebarGroup>
-	);
-};
-
-export default NavFooter;

package/src/components/ui/custom/sidebar/nav-main.tsx

@@ -1,64 +0,0 @@
-import { useIsMobile } from '@/hooks/use-mobile';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { SidebarGroup, SidebarGroupContent, SidebarMenu } from '../../sidebar';
-import NavSubmenuCollapsible from './nav-submenu-collapsible';
-import NavSubmenuDropdown from './nav-submenu-dropdown';
-import SidebarItem from './sidebar-item';
-import { SidebarPage, SidebarSubmenuType } from './types/sidebar';
-
-interface NavMainProps {
-	pages: SidebarPage[];
-}
-
-const NavMain = ({pages}: NavMainProps) => {
-	const navigate = useNavigate();
-	const location = useLocation();
-	const isMobile = useIsMobile();
-	const selectedRoutePath = location.pathname;
-
-	return (
-		<SidebarGroup>
-			<SidebarGroupContent>
-				<SidebarMenu>
-					{pages.map((item) => {
-						if (item.subMenuType) {
-							if (item.subMenuType === SidebarSubmenuType.COLLAPSIBLE || isMobile) {
-								return (
-									<NavSubmenuCollapsible
-										key={`sidebar-submenu-collapsible-${item.path}`}
-										item={item}
-										selectedRoute={selectedRoutePath}
-										onClick={(path) => navigate(path)}
-									/>
-								);
-							}
-
-							// Deprecated: Use COLLAPSIBLE instead
-							if (item.subMenuType === SidebarSubmenuType.DROPDOWN) {
-								return (
-									<NavSubmenuDropdown
-										key={`sidebar-submenu-dropdown-${item.path}`}
-										item={item}
-										selectedRoute={selectedRoutePath}
-										onClick={(path) => navigate(path)}
-										cols={3}
-									/>
-								);
-							}
-						}
-						return (
-							<SidebarItem
-								key={`sidebar-menu-main-${item.path}`}
-								item={item}
-								selectedRoute={selectedRoutePath}
-								onClick={() => navigate(item.path)}
-							/>
-						);
-					})}
-				</SidebarMenu>
-			</SidebarGroupContent>
-		</SidebarGroup>
-	);
-};
-
-export default NavMain;

package/src/components/ui/custom/sidebar/nav-submenu-collapsible.tsx

@@ -1,60 +0,0 @@
-import { ChevronRight } from 'lucide-react';
-import { cn } from '../../../../lib/utils';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../collapsible';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from '../../sidebar';
-import { SidebarPage } from './types/sidebar';
-
-interface NavSubmenuCollapsibleProps {
-	item: SidebarPage;
-	selectedRoute: string | null;
-	onClick: (path: string) => void;
-}
-
-const NavSubmenuCollapsible = ({ item, selectedRoute, onClick }: NavSubmenuCollapsibleProps) => {
-	const { open, toggleSidebar } = useSidebar();
-
-	const isOpen = (): boolean => {
-		return selectedRoute?.includes(item.path) ?? false;
-	};
-
-	const handleToggleSidebar = () => {
-		if (!open) toggleSidebar();
-	};
-
-	return (
-		<SidebarMenu>
-			<Collapsible key={item.title} asChild defaultOpen={isOpen()}>
-				<SidebarMenuItem>
-					<CollapsibleTrigger asChild className='group/collapsible'>
-						<SidebarMenuButton tooltip={item.title} className='px-2 py-5 gap-3' onClick={() => handleToggleSidebar()}>
-							{item.icon}
-							<span>{item.title}</span>
-							<ChevronRight className='ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
-						</SidebarMenuButton>
-					</CollapsibleTrigger>
-					<CollapsibleContent>
-						<SidebarMenuSub>
-							{item.subMenuItems
-								?.map((subItem) => (
-									<SidebarMenuSubItem key={subItem.label}>
-										<SidebarMenuSubButton asChild onClick={() => onClick(subItem.path)} aria-disabled={subItem.disabled}>
-											<div
-												className={cn(
-													'cursor-pointer px-2 py-1 items-center self-stretch',
-													selectedRoute === subItem.path ? 'bg-sidebar-accent' : '',
-												)}
-											>
-												<span>{subItem.label}</span>
-											</div>
-										</SidebarMenuSubButton>
-									</SidebarMenuSubItem>
-								))}
-						</SidebarMenuSub>
-					</CollapsibleContent>
-				</SidebarMenuItem>
-			</Collapsible>
-		</SidebarMenu>
-	);
-};
-
-export default NavSubmenuCollapsible;

package/src/components/ui/custom/sidebar/nav-submenu-dropdown.tsx

@@ -1,56 +0,0 @@
-import { ChevronRight } from 'lucide-react';
-import { cn } from '../../../../lib/utils';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../dropdown-menu';
-import { SidebarMenuButton, SidebarMenuItem } from '../../sidebar';
-import { SidebarPage } from './types/sidebar';
-
-interface NavSubmenuDropdownProps {
-	cols?: number;
-	item: SidebarPage;
-	selectedRoute: string | null;
-	onClick: (path: string) => void;
-}
-
-const NavSubmenuDropdown = ({ cols, item, selectedRoute, onClick }: NavSubmenuDropdownProps) => {
-	return (
-		<SidebarMenuItem>
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<SidebarMenuButton
-						asChild
-						className={cn(
-							'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-sidebar-accent px-2 py-5 gap-3 cursor-pointer',
-							selectedRoute?.includes(item.path) ? 'bg-sidebar-accent' : '',
-						)}
-						tooltip={item.title}
-					>
-						<div>
-							{item.icon}
-							<span>{item.title}</span>
-							{<ChevronRight className='ml-auto' />}
-						</div>
-					</SidebarMenuButton>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent className={`grid grid-cols-${cols ?? '1'} gap-4 p-4`} align='start' side='right' sideOffset={4}>
-					{item.subMenuItems
-						?.map((subItem, index) => (
-							<DropdownMenuItem
-								key={`${index}`}
-								className={cn(
-									'flex flex-col items-start text-left max-w-[220px] gap-1 cursor-pointer',
-									selectedRoute === subItem.path ? 'bg-sidebar-accent' : '',
-								)}
-								onClick={() => onClick(subItem.path)}
-								disabled={subItem.disabled}
-							>
-								<div className='text-sm font-semibold'>{subItem.label}</div>
-								<div className='text-sm text-muted-foreground'>{subItem.description}</div>
-							</DropdownMenuItem>
-						))}
-				</DropdownMenuContent>
-			</DropdownMenu>
-		</SidebarMenuItem>
-	);
-};
-
-export default NavSubmenuDropdown;

package/src/components/ui/custom/sidebar/nav-user.tsx

@@ -1,77 +0,0 @@
-import { LoaderCircle, LogOut } from 'lucide-react';
-import { useState } from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '../../avatar';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../../dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '../../sidebar';
-import SidebarItemTwoLines from './sidebar-item-two-lines';
-
-interface NavUserProps {
-  userName: string;
-  userEmail: string;
-  userInitials: string;
-  callbackLogout: () => void;
-}
-
-const NavUser = ({userName, userEmail, userInitials, callbackLogout}: NavUserProps) => {
-	const [isLoggingOut, setIsLoggingOut] = useState(false);
-	const { isMobile } = useSidebar();
-
-	const handleLogout = () => {
-		setIsLoggingOut(true);
-		setTimeout(() => {
-			callbackLogout();
-		}, 1000);
-	};
-
-	return (
-		<SidebarMenu>
-			<SidebarMenuItem>
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<SidebarMenuButton size='lg' className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'>
-							<SidebarItemTwoLines
-								item={{
-									iconLeft: (
-										<Avatar className='h-[31px] w-[31px] rounded-md'>
-											<AvatarImage src={userInitials} alt={userName} />
-											<AvatarFallback className='rounded-md bg-background-primary text-white'>{userInitials}</AvatarFallback>
-										</Avatar>
-									),
-									title: isLoggingOut ? 'Saindo...' : userName,
-									subTitle: isLoggingOut ? '' : userEmail,
-									iconRight: isLoggingOut ? (
-										<LoaderCircle size={16} className='text-sidebar-foreground animate-spin mr-2' />
-									) : (
-										<LogOut size={16} className='text-sidebar-foreground' />
-									),
-								}}
-							/>
-						</SidebarMenuButton>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent className='w-[250px] rounded-lg' side={isMobile ? 'bottom' : 'right'} align='end' sideOffset={4}>
-						<DropdownMenuLabel className='p-0 font-normal'>
-							<div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
-								<Avatar className='h-8 w-8 rounded-lg'>
-									<AvatarImage src={userInitials} alt={userName} />
-									<AvatarFallback className='rounded-lg bg-background-primary text-white'>{userInitials}</AvatarFallback>
-								</Avatar>
-								<div className='grid flex-1 text-left text-sm leading-tight'>
-									<span className='truncate font-semibold'>{userName}</span>
-									<span className='truncate text-xs'>{userEmail}</span>
-								</div>
-							</div>
-						</DropdownMenuLabel>
-						<DropdownMenuItem className='p-0 font-normal cursor-pointer' onClick={() => handleLogout()}>
-							<div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
-								<div className='flex w-8 h-8 p-2 items-center rounded-md'>{<LogOut size={16} />}</div>
-								Log out
-							</div>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</SidebarMenuItem>
-		</SidebarMenu>
-	);
-};
-
-export default NavUser;

package/src/components/ui/custom/sidebar/sidebar-button.tsx

@@ -1,30 +0,0 @@
-import { cn } from '../../../../lib/utils';
-import { SidebarMenuButton } from '../../sidebar';
-import { Module, SidebarPage } from './types/sidebar';
-
-interface SidebarItemProps {
-	item: SidebarPage;
-	selectedRoute: string | null;
-	onClick?: (module: Module | null, path: string) => void;
-}
-
-const SidebarButton = ({ item, selectedRoute, onClick }: SidebarItemProps) => {
-	return (
-		<SidebarMenuButton
-			asChild
-			className={cn(
-				'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-sidebar-accent px-2 py-5 gap-3 cursor-pointer',
-				selectedRoute?.includes(item.path) ? 'bg-sidebar-accent' : '',
-			)}
-			tooltip={item.title}
-			onClick={() => onClick?.(item.module ?? null, item.path)}
-		>
-			<div>
-				<div className='[&_svg]:size-4 text-sidebar-foreground'>{item.icon}</div>
-				<span>{item.title}</span>
-			</div>
-		</SidebarMenuButton>
-	);
-};
-
-export default SidebarButton;

package/src/components/ui/custom/sidebar/sidebar-item-two-lines.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-interface SidebarItemTwoLinesProps {
-	item: {
-		iconLeft: React.ReactNode;
-		title: string;
-		subTitle: string;
-		iconRight?: React.ReactNode | null;
-	};
-}
-
-const SidebarItemTwoLines = ({ item }: SidebarItemTwoLinesProps) => {
-	return (
-		<>
-			<div className='[&_svg]:size-4 text-white'>{item.iconLeft}</div>
-			<div className='grid flex-1 text-left text-sm leading-tight'>
-				<span className='truncate font-semibold'>{item.title}</span>
-				<span className='truncate text-xs text-foreground'>{item.subTitle}</span>
-			</div>
-			{item.iconRight}
-		</>
-	);
-};
-
-export default SidebarItemTwoLines;

package/src/components/ui/custom/sidebar/sidebar-item.tsx

@@ -1,19 +0,0 @@
-import { SidebarMenuItem } from '../../sidebar';
-import SidebarButton from './sidebar-button';
-import { Module, SidebarPage } from './types/sidebar';
-
-interface SidebarItemProps {
-	item: SidebarPage;
-	selectedRoute: string | null;
-	onClick?: (module: Module | null, path: string) => void;
-}
-
-const SidebarItem = ({ item, selectedRoute, onClick }: SidebarItemProps) => {
-	return (
-		<SidebarMenuItem>
-			<SidebarButton item={item} selectedRoute={selectedRoute} onClick={onClick} />
-		</SidebarMenuItem>
-	);
-};
-
-export default SidebarItem;