@create-lft-app/nextjs 3.1.0 → 3.2.0

package/template/src/components/layout/main-content.tsx

@@ -1,28 +1,28 @@
-'use client'
-
-import { cn } from '@/lib/utils'
-import { useSidebar } from './sidebar-context'
-import { ReactNode } from 'react'
-
-interface MainContentProps {
-	children: ReactNode
-	className?: string
-}
-
-export function MainContent({ children, className }: MainContentProps) {
-	const { isExpanded } = useSidebar()
-
-	return (
-		<main
-			className={cn(
-				'min-h-screen bg-background',
-				'transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]',
-				isExpanded ? 'md:ml-[240px] md:w-[calc(100%-240px)]' : 'md:ml-[70px] md:w-[calc(100%-70px)]',
-				'w-full',
-				className
-			)}
-		>
-			{children}
-		</main>
-	)
-}
+'use client'
+
+import { cn } from '@/lib/utils'
+import { useSidebar } from './sidebar-context'
+import { ReactNode } from 'react'
+
+interface MainContentProps {
+	children: ReactNode
+	className?: string
+}
+
+export function MainContent({ children, className }: MainContentProps) {
+	const { isExpanded } = useSidebar()
+
+	return (
+		<main
+			className={cn(
+				'min-h-screen bg-background',
+				'transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]',
+				isExpanded ? 'md:ml-[240px] md:w-[calc(100%-240px)]' : 'md:ml-[70px] md:w-[calc(100%-70px)]',
+				'w-full',
+				className
+			)}
+		>
+			{children}
+		</main>
+	)
+}

package/template/src/components/layout/sidebar-context.tsx

@@ -1,33 +1,33 @@
-'use client'
-
-import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
-
-interface SidebarContextType {
-	isExpanded: boolean
-	setIsExpanded: (value: boolean) => void
-	expand: () => void
-	collapse: () => void
-}
-
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined)
-
-export function SidebarProvider({ children }: { children: ReactNode }) {
-	const [isExpanded, setIsExpanded] = useState(false)
-
-	const expand = useCallback(() => setIsExpanded(true), [])
-	const collapse = useCallback(() => setIsExpanded(false), [])
-
-	return (
-		<SidebarContext.Provider value={{ isExpanded, setIsExpanded, expand, collapse }}>
-			{children}
-		</SidebarContext.Provider>
-	)
-}
-
-export function useSidebar() {
-	const context = useContext(SidebarContext)
-	if (context === undefined) {
-		throw new Error('useSidebar must be used within a SidebarProvider')
-	}
-	return context
-}
+'use client'
+
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
+
+interface SidebarContextType {
+	isExpanded: boolean
+	setIsExpanded: (value: boolean) => void
+	expand: () => void
+	collapse: () => void
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined)
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+	const [isExpanded, setIsExpanded] = useState(false)
+
+	const expand = useCallback(() => setIsExpanded(true), [])
+	const collapse = useCallback(() => setIsExpanded(false), [])
+
+	return (
+		<SidebarContext.Provider value={{ isExpanded, setIsExpanded, expand, collapse }}>
+			{children}
+		</SidebarContext.Provider>
+	)
+}
+
+export function useSidebar() {
+	const context = useContext(SidebarContext)
+	if (context === undefined) {
+		throw new Error('useSidebar must be used within a SidebarProvider')
+	}
+	return context
+}

package/template/src/components/layout/sidebar.tsx

@@ -1,146 +1,141 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { useRef, useCallback } from 'react'
-import { cn } from '@/lib/utils'
-import { Icons } from '@/components/ui/icons'
-import { useSidebar } from './sidebar-context'
-
-interface NavItem {
-	path: string
-	name: string
-	icon: keyof typeof Icons
-}
-
-const navItems: NavItem[] = [
-	{
-		path: '/dashboard',
-		name: 'Dashboard',
-		icon: 'Dashboard',
-	},
-	{
-		path: '/users',
-		name: 'Usuarios',
-		icon: 'Users',
-	},
-	{
-		path: '/settings',
-		name: 'Configuración',
-		icon: 'Settings',
-	},
-]
-
-function MenuItem({
-	item,
-	isExpanded,
-	pathname,
-}: {
-	item: NavItem
-	isExpanded: boolean
-	pathname: string
-}) {
-	const IconComponent = Icons[item.icon]
-	const isActive = pathname === item.path || pathname.startsWith(item.path + '/')
-
-	return (
-		<li className="relative">
-			<Link
-				href={item.path}
-				className={cn(
-					'h-[40px] flex items-center gap-3',
-					'mx-[10px] px-[10px]',
-					'rounded-md',
-					'transition-all duration-150',
-					!isActive && 'hover:bg-[#f7f7f7] dark:hover:bg-[#1a1a1a]',
-					isActive && [
-						'bg-[#f7f7f7] dark:bg-[#131313]',
-						'border border-border',
-					]
-				)}
-			>
-				<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
-					<IconComponent
-						size={20}
-						className={cn(
-							'transition-colors',
-							isActive ? 'text-foreground' : 'text-[#878787]'
-						)}
-					/>
-				</div>
-				{isExpanded && (
-					<span
-						className={cn(
-							'text-sm whitespace-nowrap',
-							'transition-all duration-150',
-							isActive ? 'font-medium text-foreground' : 'text-[#878787]'
-						)}
-					>
-						{item.name}
-					</span>
-				)}
-			</Link>
-		</li>
-	)
-}
-
-export function Sidebar() {
-	const { isExpanded, setIsExpanded } = useSidebar()
-	const pathname = usePathname()
-	const sidebarRef = useRef<HTMLDivElement>(null)
-	const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-	const handleMouseEnter = useCallback(() => {
-		if (hoverTimeoutRef.current) {
-			clearTimeout(hoverTimeoutRef.current)
-		}
-		setIsExpanded(true)
-	}, [setIsExpanded])
-
-	const handleMouseLeave = useCallback(() => {
-		hoverTimeoutRef.current = setTimeout(() => {
-			setIsExpanded(false)
-		}, 100)
-	}, [setIsExpanded])
-
-	return (
-		<aside
-			ref={sidebarRef}
-			className={cn(
-				'h-screen flex-shrink-0 flex-col justify-between fixed top-0 left-0 hidden md:flex z-50',
-				'bg-background border-r border-border',
-				'transition-[width] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]',
-				isExpanded ? 'w-[240px]' : 'w-[70px]'
-			)}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			{/* Header / Logo */}
-			<div
-				className={cn(
-					"absolute top-0 left-0 h-[70px] flex items-center justify-center bg-background border-b border-border transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]",
-					isExpanded ? "w-full" : "w-[69px]"
-				)}
-			>
-				<Link href="/dashboard" className="absolute left-[22px] transition-none">
-					{/* eslint-disable-next-line @next/next/no-img-element */}
-					<img src="/logolft.svg" alt="Logo" className="h-7 w-7" />
-				</Link>
-			</div>
-
-			{/* Navigation */}
-			<nav className="flex-1 pt-[70px] pb-4 overflow-y-auto scrollbar-hide">
-				<ul className="space-y-1">
-					{navItems.map((item) => (
-						<MenuItem
-							key={item.path}
-							item={item}
-							isExpanded={isExpanded}
-							pathname={pathname}
-						/>
-					))}
-				</ul>
-			</nav>
-		</aside>
-	)
-}
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useRef, useCallback } from 'react'
+import { cn } from '@/lib/utils'
+import { Icons } from '@/components/ui/icons'
+import { useSidebar } from './sidebar-context'
+
+interface NavItem {
+	path: string
+	name: string
+	icon: keyof typeof Icons
+}
+
+const navItems: NavItem[] = [
+	{
+		path: '/dashboard',
+		name: 'Dashboard',
+		icon: 'Dashboard',
+	},
+	{
+		path: '/users',
+		name: 'Usuarios',
+		icon: 'Users',
+	},
+]
+
+function MenuItem({
+	item,
+	isExpanded,
+	pathname,
+}: {
+	item: NavItem
+	isExpanded: boolean
+	pathname: string
+}) {
+	const IconComponent = Icons[item.icon]
+	const isActive = pathname === item.path || pathname.startsWith(item.path + '/')
+
+	return (
+		<li className="relative">
+			<Link
+				href={item.path}
+				className={cn(
+					'h-[40px] flex items-center gap-3',
+					'mx-[10px] px-[10px]',
+					'rounded-md',
+					'transition-all duration-150',
+					!isActive && 'hover:bg-accent',
+					isActive && [
+						'bg-accent',
+						'border border-border',
+					]
+				)}
+			>
+				<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
+					<IconComponent
+						size={20}
+						className={cn(
+							'transition-colors',
+							isActive ? 'text-foreground' : 'text-muted-foreground'
+						)}
+					/>
+				</div>
+				{isExpanded && (
+					<span
+						className={cn(
+							'text-sm whitespace-nowrap',
+							'transition-all duration-150',
+							isActive ? 'font-medium text-foreground' : 'text-muted-foreground'
+						)}
+					>
+						{item.name}
+					</span>
+				)}
+			</Link>
+		</li>
+	)
+}
+
+export function Sidebar() {
+	const { isExpanded, setIsExpanded } = useSidebar()
+	const pathname = usePathname()
+	const sidebarRef = useRef<HTMLDivElement>(null)
+	const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+	const handleMouseEnter = useCallback(() => {
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current)
+		}
+		setIsExpanded(true)
+	}, [setIsExpanded])
+
+	const handleMouseLeave = useCallback(() => {
+		hoverTimeoutRef.current = setTimeout(() => {
+			setIsExpanded(false)
+		}, 100)
+	}, [setIsExpanded])
+
+	return (
+		<aside
+			ref={sidebarRef}
+			className={cn(
+				'h-screen flex-shrink-0 flex-col justify-between fixed top-0 left-0 hidden md:flex z-50',
+				'bg-background border-r border-border',
+				'transition-[width] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]',
+				isExpanded ? 'w-[240px]' : 'w-[70px]'
+			)}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			{/* Header / Logo */}
+			<div
+				className={cn(
+					"absolute top-0 left-0 h-[70px] flex items-center justify-center bg-background border-b border-border transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]",
+					isExpanded ? "w-full" : "w-[69px]"
+				)}
+			>
+				<Link href="/dashboard" className="absolute left-[22px] transition-none">
+					{/* eslint-disable-next-line @next/next/no-img-element */}
+					<img src="/logolft.svg" alt="Logo" className="h-7 w-7" />
+				</Link>
+			</div>
+
+			{/* Navigation */}
+			<nav className="flex-1 pt-[70px] pb-4 overflow-y-auto scrollbar-hide">
+				<ul className="space-y-1">
+					{navItems.map((item) => (
+						<MenuItem
+							key={item.path}
+							item={item}
+							isExpanded={isExpanded}
+							pathname={pathname}
+						/>
+					))}
+				</ul>
+			</nav>
+		</aside>
+	)
+}

package/template/src/components/tables/data-table-column-header.tsx

@@ -1,68 +1,68 @@
-'use client'
-
-import { Column } from '@tanstack/react-table'
-import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>
-  title: string
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{title}</div>
-  }
-
-  return (
-    <div className={cn('flex items-center space-x-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent"
-          >
-            <span>{title}</span>
-            {column.getIsSorted() === 'desc' ? (
-              <ArrowDown className="ml-2 h-4 w-4" />
-            ) : column.getIsSorted() === 'asc' ? (
-              <ArrowUp className="ml-2 h-4 w-4" />
-            ) : (
-              <ChevronsUpDown className="ml-2 h-4 w-4" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Ascendente
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Descendente
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Ocultar
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}
+'use client'
+
+import { Column } from '@tanstack/react-table'
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn('flex items-center space-x-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Ascendente
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Descendente
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Ocultar
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}