Draggable
Descrição
Criei um novo componente "Draggable" que funciona como uma lista de componente arrastáveis
Motivação
Task de Criar componente Draggable (86a7w81pc), um de seus usos será para arrastar os gráficos na dashboard.
Mudanças Propostas
Importei diversas funcionalidades das bibliotecas dnd-kit e com elas fiz a implementação da lista de componentes arrastáveis
Como Testar
Segue abaixo um exemplo de teste
`import {createFileRoute, Link} from '@tanstack/react-router' import {DraggableList} from "@/components/DraggableList.tsx";
export const Route = createFileRoute('/revforce/dashboard/')({ component: RouteComponent, })
function RouteComponent() { const items = [ {id: '1', content:
GRÁFICO 1
},
{id: '2', content: GRÁFICO 1
},
{id: '3', content: GRÁFICO 1
},
{id: '4', content: GRÁFICO 1
},
{id: '5', content: GRÁFICO 1
},
{id: '6', content: GRÁFICO 1
},
{id: '7', content: GRÁFICO 1
},
{id: '8', content: GRÁFICO 1
},
{id: '9', content: GRÁFICO 1
},
{id: '10', content: GRÁFICO 1
},
];
return <Link to="/revforce/dashboard/newchart">
<div className="p-8 w-full">
<DraggableList
initialItems={items}
direction='horizontal'
className='pl-16'
itemClassName=""
/>
</div>
</Link>}`
Capturas de Tela (se aplicável)
Observações
Na dashboard, usar o direction horizontal para ficar do jeito certo