81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useDroppable } from "@dnd-kit/core";
|
|
import { Box, Typography, Chip } from "@mui/material";
|
|
import { DroppableColumnProps } from "../types";
|
|
import { DraggableItem } from "./DraggableItem";
|
|
|
|
export function DroppableColumn({
|
|
id,
|
|
title,
|
|
items,
|
|
activeId,
|
|
}: DroppableColumnProps) {
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id,
|
|
});
|
|
|
|
return (
|
|
<Box
|
|
ref={setNodeRef}
|
|
className="matcher-board__column"
|
|
sx={{
|
|
flex: 1,
|
|
minWidth: 300,
|
|
maxWidth: 400,
|
|
bgcolor: isOver ? "action.hover" : "background.paper",
|
|
borderRadius: 2,
|
|
p: 2,
|
|
border: "2px solid",
|
|
borderColor: isOver ? "primary.main" : "divider",
|
|
transition: "all 0.2s ease",
|
|
}}
|
|
>
|
|
<Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
|
|
{title}
|
|
</Typography>
|
|
<Box
|
|
className="matcher-board__column-content"
|
|
sx={{
|
|
minHeight: 400,
|
|
maxHeight: 600,
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
{items.map(item => (
|
|
<DraggableItem
|
|
key={item.id}
|
|
item={item}
|
|
isDragging={activeId === item.id}
|
|
/>
|
|
))}
|
|
{items.length === 0 && (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minHeight: 200,
|
|
border: "2px dashed",
|
|
borderColor: "divider",
|
|
borderRadius: 1,
|
|
}}
|
|
>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Drop items here
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Chip
|
|
label={`${items.length} items`}
|
|
size="small"
|
|
sx={{ mt: 2 }}
|
|
color="primary"
|
|
variant="outlined"
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|