57 lines
3.3 KiB
TypeScript
57 lines
3.3 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
|
|
interface Person {
|
|
id: number;
|
|
firstName: string;
|
|
middleName: string;
|
|
surname: string;
|
|
avatar: string;
|
|
}
|
|
|
|
const PersonSelections = () => {
|
|
|
|
const [selectedId, setSelectedId] = useState<number | null>(null);
|
|
|
|
const people: Person[] = [
|
|
{ id: 1, firstName: 'John', middleName: 'Michael', surname: 'Doe', avatar: 'https://placehold.co/100x100/4F46E5/FFFFFF?text=JD' },
|
|
{ id: 2, firstName: 'Jane', middleName: 'Elizabeth', surname: 'Smith', avatar: 'https://placehold.co/100x100/EC4899/FFFFFF?text=JS' },
|
|
{ id: 3, firstName: 'Robert', middleName: 'James', surname: 'Johnson', avatar: 'https://placehold.co/100x100/10B981/FFFFFF?text=RJ' },
|
|
{ id: 4, firstName: 'Emily', middleName: 'Rose', surname: 'Williams', avatar: 'https://placehold.co/100x100/F59E0B/FFFFFF?text=EW' },
|
|
{ id: 5, firstName: 'Michael', middleName: 'Thomas', surname: 'Brown', avatar: 'https://placehold.co/100x100/EF4444/FFFFFF?text=MB' },
|
|
{ id: 6, firstName: 'Sarah', middleName: 'Ann', surname: 'Davis', avatar: 'https://placehold.co/100x100/8B5CF6/FFFFFF?text=SD' },
|
|
{ id: 7, firstName: 'David', middleName: 'Charles', surname: 'Miller', avatar: 'https://placehold.co/100x100/06B6D4/FFFFFF?text=DM' },
|
|
{ id: 8, firstName: 'Lisa', middleName: 'Marie', surname: 'Wilson', avatar: 'https://placehold.co/100x100/84CC16/FFFFFF?text=LW' },
|
|
{ id: 9, firstName: 'James', middleName: 'Patrick', surname: 'Moore', avatar: 'https://placehold.co/100x100/F97316/FFFFFF?text=JM' },
|
|
{ id: 10, firstName: 'Jennifer', middleName: 'Lynn', surname: 'Taylor', avatar: 'https://placehold.co/100x100/6366F1/FFFFFF?text=JT' },
|
|
];
|
|
|
|
const handleSelect = (id: number) => { console.log('Selected row ID:', id); setSelectedId(id) };
|
|
|
|
return (
|
|
<div className="fixed top-30 w-1/2 h-1/3 bg-white border border-gray-300 shadow-lg overflow-hidden ml-5">
|
|
<div className="h-full overflow-y-auto">
|
|
{people.map((person) => (
|
|
<div key={person.id} className={`flex items-center p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors ${selectedId === person.id ? 'bg-blue-50' : ''}`}>
|
|
<div className="w-1/3 flex items-center justify-center">
|
|
<img src={person.avatar} alt={`${person.firstName} ${person.surname}`} className="w-16 h-16 rounded-full object-cover border-2 border-gray-300" />
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col justify-center space-y-1 ml-4">
|
|
<div className="font-semibold text-gray-800">{person.firstName}</div>
|
|
<div className="text-sm text-gray-600">{person.middleName}</div>
|
|
<div className="text-sm text-gray-600">{person.surname}</div>
|
|
</div>
|
|
|
|
<div className="w-24 flex justify-end">
|
|
<button onClick={() => handleSelect(person.id)} className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm font-medium">Select</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PersonSelections;
|