You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

99 lines
2.6 KiB

import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import "./App.css";
const finalSpaceCharacters = [
{
id: "gary",
name: "Gary Goodspeed",
thumb: "/images/kvn.png",
test: "mahdi",
},
{
id: "cato",
name: "Little Cato",
thumb: "/images/kvn.png",
test: "mahdi",
},
{
id: "kvn",
name: "KVN",
thumb: "/images/kvn.png",
test: "mahdi",
},
{
id: "mooncake",
name: "Mooncake",
thumb: "/images/kvn.png",
test: "mahdi",
},
{
id: "quinn",
name: "Quinn Ergon",
thumb: "/images/kvn.png",
test: "mahdi",
},
];
function Testt() {
const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) {
if (!result.destination) return;
const items = Array.from(characters);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
updateCharacters(items);
}
return (
<div className="App">
<header className="App-header">
<h1>Final Space Characters</h1>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<ul
className="characters"
{...provided.droppableProps}
ref={provided.innerRef}
>
{characters.map(({ id, name, thumb, test }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{(provided) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className="characters-thumb">
<img src={thumb} alt={`${name} Thumb`} />
</div>
<p>{name}</p>
<span className="p-10 bg-red-600">{test}</span>
</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
</header>
<p>
Images from{" "}
<a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
Final Space Wiki
</a>
</p>
</div>
);
}
export default Testt;