+ )
+})
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselNext.displayName = 'CarouselNext'
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext
+}
diff --git a/src/components/v-kanban/components/ui/dropdown-menu.tsx b/src/components/v-kanban/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..26ee53a
--- /dev/null
+++ b/src/components/v-kanban/components/ui/dropdown-menu.tsx
@@ -0,0 +1,197 @@
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { cn } from '@/lib/utils'
+import { Icons } from '../icons'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSubContent.displayName =
+ DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => {
+ return (
+
+ )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup
+}
diff --git a/src/components/v-kanban/components/ui/scroll-area.tsx b/src/components/v-kanban/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..ab822aa
--- /dev/null
+++ b/src/components/v-kanban/components/ui/scroll-area.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import { cn } from '../../lib/utils'
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/v-kanban/constants/defaults.ts b/src/components/v-kanban/constants/defaults.ts
new file mode 100644
index 0000000..294689c
--- /dev/null
+++ b/src/components/v-kanban/constants/defaults.ts
@@ -0,0 +1,90 @@
+import { Column } from '../components/BoardColumn/boardColumn.types'
+import { Task } from '../components/TaskCard/taskCard.types'
+
+export const defaultCols = [
+ {
+ id: 'todo' as const,
+ title: 'Todo',
+ color: 'bg-blue-500'
+ },
+ {
+ id: 'in-progress' as const,
+ title: 'In progress',
+ color: 'bg-yellow-500'
+ },
+ {
+ id: 'done' as const,
+ title: 'Done',
+ color: 'bg-green-500'
+ }
+] satisfies Column[]
+
+export type ColumnId = (typeof defaultCols)[number]['id'];
+
+export const initialTasks: Task[] = [
+ {
+ id: 'task1',
+ columnId: 'done',
+ content: 'Project initiation and planning'
+ },
+ {
+ id: 'task2',
+ columnId: 'done',
+ content: 'Gather requirements from stakeholders'
+ },
+ {
+ id: 'task3',
+ columnId: 'done',
+ content: 'Create wireframes and mockups'
+ },
+ {
+ id: 'task4',
+ columnId: 'in-progress',
+ content: 'Develop homepage layout'
+ },
+ {
+ id: 'task5',
+ columnId: 'in-progress',
+ content: 'Design color scheme and typography'
+ },
+ {
+ id: 'task6',
+ columnId: 'todo',
+ content: 'Implement user authentication'
+ },
+ {
+ id: 'task7',
+ columnId: 'todo',
+ content: 'Build contact us page'
+ },
+ {
+ id: 'task8',
+ columnId: 'todo',
+ content: 'Create product catalog'
+ },
+ {
+ id: 'task9',
+ columnId: 'todo',
+ content: 'Develop about us page'
+ },
+ {
+ id: 'task10',
+ columnId: 'todo',
+ content: 'Optimize website for mobile devices'
+ },
+ {
+ id: 'task11',
+ columnId: 'todo',
+ content: 'Integrate payment gateway'
+ },
+ {
+ id: 'task12',
+ columnId: 'todo',
+ content: 'Perform testing and bug fixing'
+ },
+ {
+ id: 'task13',
+ columnId: 'todo',
+ content: 'Launch website and deploy to server'
+ }
+]
diff --git a/src/components/v-kanban/hooks/index.js b/src/components/v-kanban/hooks/index.js
new file mode 100644
index 0000000..1b811b7
--- /dev/null
+++ b/src/components/v-kanban/hooks/index.js
@@ -0,0 +1,3 @@
+export { useIsClient } from './useIsClient'
+export { useWindowSize } from './useWindowSize'
+export { useScreenType } from './useScreenType'
diff --git a/src/components/v-kanban/hooks/useIsClient.ts b/src/components/v-kanban/hooks/useIsClient.ts
new file mode 100644
index 0000000..a9587e6
--- /dev/null
+++ b/src/components/v-kanban/hooks/useIsClient.ts
@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook de React para determinar si el entorno actual es del lado del cliente.
+ *
+ * En el contexto de aplicaciones de React, especialmente aquellas que utilizan
+ * renderización en el lado del servidor (SSR), es crucial identificar si el
+ * código se está ejecutando en el entorno del cliente (navegador) o del servidor.
+ * Este hook proporciona una manera confiable de determinar este contexto,
+ * permitiendo ejecutar código específico del lado del cliente de manera segura.
+ *
+ * El hook utiliza `useState` para establecer el estado inicial basado en la
+ * disponibilidad del objeto `window`, un indicativo claro del entorno del cliente.
+ * A través de `useEffect`, ajusta este estado solo cuando el componente se monta
+ * en el navegador, garantizando una detección precisa y evitando ejecuciones
+ * innecesarias en el lado del servidor.
+ *
+ * @returns {boolean} Retorna `true` si el código se está ejecutando en el entorno del cliente.
+ * De lo contrario, retorna `false`.
+ *
+ * @example
+ * import React from 'react';
+ * import useIsClient from './useIsClient';
+ *
+ * const MyComponent: React.FC = () => {
+ * const isClient = useIsClient();
+ *
+ * if (isClient) {
+ * // Ejemplo: Código seguro para ejecutar en el lado del cliente
+ * console.log('Ancho de la ventana:', window.innerWidth);
+ * }
+ *
+ * return
Contenido del componente
;
+ * };
+ *
+ * export default MyComponent;
+ */
+export const useIsClient = (): boolean => {
+ const [isClient, setIsClient] = useState(typeof window === 'object')
+
+ useEffect(() => {
+ // Este efecto no se ejecutará en el servidor, solo se activa en el entorno del cliente.
+ if (!isClient) {
+ setIsClient(true)
+ }
+ }, [isClient])
+
+ return isClient
+}
diff --git a/src/components/v-kanban/hooks/useScreenType.ts b/src/components/v-kanban/hooks/useScreenType.ts
new file mode 100644
index 0000000..21e3007
--- /dev/null
+++ b/src/components/v-kanban/hooks/useScreenType.ts
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useState } from 'react'
+
+interface ScreenType {
+ isLargeDesktop: boolean;
+ isDesktop: boolean;
+ isMobile: boolean;
+ isTablet: boolean;
+}
+
+/**
+ * Hook personalizado de React para determinar el tipo de pantalla basado en el ancho del viewport.
+ *
+ * Este hook es útil para el diseño responsivo, permitiendo ajustar la interfaz de usuario
+ * y la lógica del componente según el tamaño de la pantalla. Utiliza la API de `window` para
+ * escuchar cambios en el tamaño de la ventana y ajusta el estado del tipo de pantalla en consecuencia.
+ *
+ * Los breakpoints para mobile, tablet, desktop y large desktop son configurables según las necesidades
+ * del proyecto.
+ *
+ * @returns {ScreenType} Objeto que contiene booleanos para cada tipo de pantalla (mobile, tablet, desktop, largeDesktop).
+ *
+ * @example
+ * import React from 'react';
+ * import useScreenType from './useScreenType';
+ *
+ * const MyComponent: React.FC = () => {
+ * const screenType = useScreenType();
+ *
+ * return (
+ *