67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Pencil, Trash2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { IconButton } from "@/components/ui/IconButton";
|
|
import type { Experience } from "@/lib/types/cv";
|
|
|
|
interface ExperienceItemProps {
|
|
index: number;
|
|
experience: Experience;
|
|
onEdit: () => void;
|
|
onRemove: () => void;
|
|
}
|
|
|
|
export function ExperienceItem({
|
|
index,
|
|
experience,
|
|
onEdit,
|
|
onRemove,
|
|
}: ExperienceItemProps) {
|
|
const [confirming, setConfirming] = useState(false);
|
|
|
|
if (confirming) {
|
|
return (
|
|
<li className="flex items-center justify-between gap-2 rounded-md border border-danger/40 bg-red-50 px-3 py-2">
|
|
<span className="text-sm text-ink">Supprimer cette expérience ?</span>
|
|
<div className="flex shrink-0 gap-1.5">
|
|
<Button
|
|
variant="danger"
|
|
size="sm"
|
|
onClick={() => {
|
|
setConfirming(false);
|
|
onRemove();
|
|
}}
|
|
>
|
|
Oui
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => setConfirming(false)}>
|
|
Non
|
|
</Button>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li className="flex items-center justify-between gap-2 rounded-md border border-border bg-white px-3 py-2">
|
|
<span className="truncate text-sm text-ink">
|
|
<span className="mr-1.5 text-muted">{index + 1}.</span>
|
|
{experience.titre}
|
|
</span>
|
|
<div className="flex shrink-0 gap-0.5">
|
|
<IconButton aria-label="Modifier l'expérience" onClick={onEdit}>
|
|
<Pencil size={14} />
|
|
</IconButton>
|
|
<IconButton
|
|
danger
|
|
aria-label="Supprimer l'expérience"
|
|
onClick={() => setConfirming(true)}
|
|
>
|
|
<Trash2 size={14} />
|
|
</IconButton>
|
|
</div>
|
|
</li>
|
|
);
|
|
} |