60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React from 'react'
|
||
import { useDraggable } from '@dnd-kit/core'
|
||
import { Avatar } from '@/components/ui/Avatar'
|
||
import { Student, StudentListProps } from '@/proxy/classroom/planning'
|
||
|
||
const DraggableStudent: React.FC<{ student: Student }> = ({ student }) => {
|
||
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
||
id: student.id,
|
||
})
|
||
|
||
const style = transform
|
||
? {
|
||
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
||
}
|
||
: undefined
|
||
|
||
return (
|
||
<div
|
||
ref={setNodeRef}
|
||
style={style}
|
||
{...listeners}
|
||
{...attributes}
|
||
className={`transition-all duration-300 cursor-grab active:cursor-grabbing transform hover:scale-105 ${
|
||
isDragging ? 'opacity-30 scale-110 rotate-3 shadow-2xl z-50' : ''
|
||
}`}
|
||
>
|
||
<div className="flex flex-col items-center space-y-2 group">
|
||
<Avatar shape='circle' className="h-10 w-10" src={student.photoUrl || undefined}>
|
||
{student.fullName
|
||
.split(' ')
|
||
.map((n) => n[0])
|
||
.join('')}
|
||
</Avatar>
|
||
|
||
<div className="text-center">
|
||
<div className="font-medium text-xs text-gray-900 truncate w-full leading-tight">
|
||
{student.fullName}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export const StudentList: React.FC<StudentListProps> = ({ students }) => {
|
||
return (
|
||
<div className="flex-1 overflow-auto p-4">
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{students.length === 0 ? (
|
||
<div className="col-span-3 text-center py-8 text-gray-500">
|
||
<div className="text-sm">Öğrenci bulunamadı</div>
|
||
<div className="text-xs mt-1">Arama kriterlerinizi değiştirin</div>
|
||
</div>
|
||
) : (
|
||
students.map((student) => <DraggableStudent key={student.id} student={student} />)
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|