chore init

components/cv/ExperienceItem.tsx

@@ -0,0 +1,67 @@
+"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>
+  );
+}