|
|
|
@ -61,70 +61,75 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="flex"> |
|
|
|
|
<div className="space-y-4 bg-gray-100 w-1/2 p-2"> |
|
|
|
|
{/* add link button */} |
|
|
|
|
<button |
|
|
|
|
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full" |
|
|
|
|
onClick={handleOnClickAdd} |
|
|
|
|
> |
|
|
|
|
Add New Link |
|
|
|
|
</button> |
|
|
|
|
{displayDragDrop && ( |
|
|
|
|
<DragDropContext onDragEnd={handleOnDragEnd}> |
|
|
|
|
<Droppable droppableId="links"> |
|
|
|
|
{(provided) => ( |
|
|
|
|
<div |
|
|
|
|
className="links" |
|
|
|
|
{...provided.droppableProps} |
|
|
|
|
ref={provided.innerRef} |
|
|
|
|
> |
|
|
|
|
{editableLinks.map((link, index) => ( |
|
|
|
|
<Link |
|
|
|
|
key={index} |
|
|
|
|
index={index} |
|
|
|
|
link={link} |
|
|
|
|
onChange={(newLink: EditableLink) => |
|
|
|
|
setEditableLinks([ |
|
|
|
|
...editableLinks.slice(0, index), |
|
|
|
|
newLink, |
|
|
|
|
...editableLinks.slice(index + 1), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
onDelete={() => |
|
|
|
|
setEditableLinks([ |
|
|
|
|
...editableLinks.slice(0, index), |
|
|
|
|
...editableLinks.slice(index + 1), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
))} |
|
|
|
|
{provided.placeholder} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</Droppable> |
|
|
|
|
</DragDropContext> |
|
|
|
|
)} |
|
|
|
|
<div className="mb-16" /> |
|
|
|
|
<div className="flex"> |
|
|
|
|
<div className="flex flex-col bg-gray-100 md:h-full md:flex-row"> |
|
|
|
|
<div className="space-y-4 md:w-3/5 md:border-r md:border-gray-300 md:overflow-y-scroll"> |
|
|
|
|
<div className="m-8"> |
|
|
|
|
<button |
|
|
|
|
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50" |
|
|
|
|
onClick={onSubmit} |
|
|
|
|
disabled={equal(editableLinks, links)} |
|
|
|
|
className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full" |
|
|
|
|
onClick={handleOnClickAdd} |
|
|
|
|
> |
|
|
|
|
Submit |
|
|
|
|
</button> |
|
|
|
|
<div className="mr-4" /> |
|
|
|
|
<button |
|
|
|
|
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50" |
|
|
|
|
onClick={onCancel} |
|
|
|
|
disabled={equal(editableLinks, links)} |
|
|
|
|
> |
|
|
|
|
Cancel |
|
|
|
|
Add New Link |
|
|
|
|
</button> |
|
|
|
|
<div className="mb-8" /> |
|
|
|
|
{displayDragDrop && ( |
|
|
|
|
<DragDropContext onDragEnd={handleOnDragEnd}> |
|
|
|
|
<Droppable droppableId="links"> |
|
|
|
|
{(provided) => ( |
|
|
|
|
<div |
|
|
|
|
className="links" |
|
|
|
|
{...provided.droppableProps} |
|
|
|
|
ref={provided.innerRef} |
|
|
|
|
> |
|
|
|
|
{editableLinks.map((link, index) => ( |
|
|
|
|
<Link |
|
|
|
|
key={index} |
|
|
|
|
index={index} |
|
|
|
|
link={link} |
|
|
|
|
onChange={(newLink: EditableLink) => |
|
|
|
|
setEditableLinks([ |
|
|
|
|
...editableLinks.slice(0, index), |
|
|
|
|
newLink, |
|
|
|
|
...editableLinks.slice(index + 1), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
onDelete={() => |
|
|
|
|
setEditableLinks([ |
|
|
|
|
...editableLinks.slice(0, index), |
|
|
|
|
...editableLinks.slice(index + 1), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
))} |
|
|
|
|
{provided.placeholder} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</Droppable> |
|
|
|
|
</DragDropContext> |
|
|
|
|
)} |
|
|
|
|
<div className="mb-8" /> |
|
|
|
|
<div className="flex"> |
|
|
|
|
<button |
|
|
|
|
className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50" |
|
|
|
|
onClick={onSubmit} |
|
|
|
|
disabled={equal(editableLinks, links)} |
|
|
|
|
> |
|
|
|
|
Submit |
|
|
|
|
</button> |
|
|
|
|
<div className="mr-4" /> |
|
|
|
|
<button |
|
|
|
|
className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50" |
|
|
|
|
onClick={onCancel} |
|
|
|
|
disabled={equal(editableLinks, links)} |
|
|
|
|
> |
|
|
|
|
Cancel |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Preview links={editableLinks.filter((link) => link.active)} /> |
|
|
|
|
<div className="mb-8 md:none" /> |
|
|
|
|
<div className="flex items-center justify-center md:w-2/5"> |
|
|
|
|
<Preview links={editableLinks.filter((link) => link.active)} /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|