40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import type { Result } from "./person";
|
|
|
|
interface PersonItemProps extends Result {
|
|
remove: (uuid: string) => void;
|
|
}
|
|
|
|
const PersonItem = ({ remove, ...result }: PersonItemProps) => {
|
|
const { email, login, location, name, picture } = result;
|
|
|
|
return (
|
|
<div className="card bg-base-200 w-96 shadow-sm" key={login.uuid}>
|
|
<figure className="px-10 pt-10">
|
|
<img src={picture.medium} alt={name.last} className="rounded-sm" />
|
|
</figure>
|
|
<div className="card-body items-center text-center">
|
|
<h2 className="card-title sm:text-sm md:text-lg lg:text-xl">
|
|
{name.first} {name.last}
|
|
</h2>
|
|
<h4>{email}</h4>
|
|
<p className="sm:text-sm md:text-md lg:text-lg">
|
|
{location.city}, {location.country}
|
|
</p>
|
|
<div className="card-actions">
|
|
<button
|
|
className="btn btn-active btn-accent btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl"
|
|
onClick={() => remove(login.uuid)}
|
|
>
|
|
{" "}
|
|
remove{" "}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PersonItem;
|