56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useDraggable } from "@dnd-kit/core";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { Card, CardContent, Typography } from "@mui/material";
|
|
import { DraggableItemProps } from "../types";
|
|
|
|
export function DraggableItem({ item, isDragging }: DraggableItemProps) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
isDragging: isItemDragging,
|
|
} = useDraggable({
|
|
id: item.id,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Translate.toString(transform),
|
|
opacity: isItemDragging || isDragging ? 0.5 : 1,
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
ref={setNodeRef}
|
|
style={style}
|
|
{...attributes}
|
|
{...listeners}
|
|
className="matcher-board__item"
|
|
sx={{
|
|
mb: 1,
|
|
cursor: "grab",
|
|
"&:active": {
|
|
cursor: "grabbing",
|
|
},
|
|
"&:hover": {
|
|
boxShadow: 3,
|
|
},
|
|
}}
|
|
>
|
|
<CardContent sx={{ p: 1.5, "&:last-child": { pb: 1.5 } }}>
|
|
<Typography variant="body2" fontWeight={500}>
|
|
{item.name}
|
|
</Typography>
|
|
{item.id && (
|
|
<Typography variant="caption" color="text.secondary">
|
|
ID: {item.id}
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|