import clsx from 'clsx' import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd' import { MenuIcon } from '@heroicons/react/solid' import { Col } from 'web/components/layout/col' import { Row } from 'web/components/layout/row' import { Subtitle } from 'web/components/subtitle' import { keyBy } from 'lodash' export function ArrangeHome(props: { sections: { label: string; id: string }[] setSectionIds: (sections: string[]) => void }) { const { sections, setSectionIds } = props const sectionsById = keyBy(sections, 'id') return ( { const { destination, source, draggableId } = e if (!destination) return const section = sectionsById[draggableId] const newSectionIds = sections.map((section) => section.id) newSectionIds.splice(source.index, 1) newSectionIds.splice(destination.index, 0, section.id) setSectionIds(newSectionIds) }} > ) } function DraggableList(props: { title: string items: { id: string; label: string }[] }) { const { title, items } = props return ( {(provided) => ( {items.map((item, index) => ( {(provided, snapshot) => (
)}
))} {provided.placeholder} )}
) } const SectionItem = (props: { item: { id: string; label: string } className?: string }) => { const { item, className } = props return (
) }