53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
// MiniCardDummy.tsx
|
|
'use client'
|
|
|
|
import { useDroppable } from "@dnd-kit/core"
|
|
|
|
type MiniCardDummyProps = {
|
|
title: string
|
|
onClick?: () => void
|
|
children?: React.ReactNode
|
|
zoneId?: string
|
|
}
|
|
|
|
export default function MiniCardDummy({ title, onClick, children, zoneId }: MiniCardDummyProps) {
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id: `${zoneId ?? 'dummy'}-drop`,
|
|
data: { containerId: zoneId, role: 'dummy' }, // ⬅️ wichtig für Zone-Highlight
|
|
})
|
|
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
onClick={onClick}
|
|
className={`
|
|
relative flex flex-col h-full max-h-[200px] max-w-[160px] items-center p-4 border border-dashed rounded-lg transition
|
|
hover:border-blue-400 dark:hover:border-blue-400 hover:cursor-pointer
|
|
border-gray-300 dark:border-neutral-700
|
|
`}
|
|
>
|
|
<div className="flex flex-col items-center">
|
|
<div className="relative w-16 h-16 mb-2 flex items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-neutral-800">
|
|
{children ? (
|
|
children
|
|
) : (
|
|
<img
|
|
src="https://via.placeholder.com/64x64.png?text=+"
|
|
alt="Dummy Avatar"
|
|
className="w-16 h-16 object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<span className="text-sm text-blue-600 dark:text-blue-400 underline text-center mt-1 truncate max-w-[100px] w-full block">
|
|
{title}
|
|
</span>
|
|
</div>
|
|
|
|
{/* reserviere Platz für Flagge oder Button, auch wenn leer */}
|
|
<div className="mt-2 w-full flex justify-center min-h-[16px] relative" />
|
|
</div>
|
|
)
|
|
}
|