76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
// SortableMiniCard.tsx
|
|
'use client'
|
|
|
|
import { useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable'
|
|
import { CSS } from '@dnd-kit/utilities'
|
|
import MiniCard from './MiniCard'
|
|
import { Player } from '../types/team'
|
|
|
|
type Props = {
|
|
player: Player
|
|
currentUserSteamId: string
|
|
teamLeaderSteamId: string | null | undefined
|
|
isAdmin?: boolean
|
|
onKick?: (player: Player) => void
|
|
onPromote?: (steamId: string) => void
|
|
hideOverlay?: boolean
|
|
isDraggingGlobal?: boolean
|
|
matchParentBg?: boolean
|
|
}
|
|
|
|
export default function SortableMiniCard({
|
|
player,
|
|
currentUserSteamId,
|
|
teamLeaderSteamId,
|
|
isAdmin = false,
|
|
onKick,
|
|
onPromote,
|
|
hideOverlay = false,
|
|
}: Props) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
} = useSortable({
|
|
id: player.steamId,
|
|
animateLayoutChanges: defaultAnimateLayoutChanges,
|
|
})
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
}
|
|
|
|
/* Drag-Berechtigung: Leader **oder** Admin */
|
|
const isDraggable = isAdmin || currentUserSteamId === teamLeaderSteamId
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
{...attributes}
|
|
className="transition-transform duration-300 ease-in-out"
|
|
>
|
|
<MiniCard
|
|
steamId={player.steamId}
|
|
title={player.name}
|
|
avatar={player.avatar}
|
|
rank={player.premierRank}
|
|
location={player.location}
|
|
isLeader={player.steamId === teamLeaderSteamId}
|
|
draggable={isDraggable}
|
|
onKick={() => onKick?.(player)}
|
|
onPromote={onPromote}
|
|
currentUserSteamId={currentUserSteamId}
|
|
teamLeaderSteamId={teamLeaderSteamId ?? ''}
|
|
isAdmin={isAdmin}
|
|
dragListeners={isDraggable ? listeners : undefined}
|
|
hoverEffect={isDraggable}
|
|
hideOverlay={hideOverlay}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|