first commit

components/infos/LexiqueSection.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { LexiqueItem } from "@/app/api/infos/route";
+
+export default function LexiqueSection() {
+  const [lexiqueItems, setLexiqueItems] = useState<LexiqueItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchLexique = async () => {
+      try {
+        const response = await fetch("/api/infos?type=lexique");
+        const data = await response.json();
+        setLexiqueItems(data);
+      } catch (error) {
+        console.error("Erreur lors du chargement du lexique:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchLexique();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-gray-600">Chargement...</p>
+      </div>
+    );
+  }
+
+  return (
+    <Card className="bg-secondary">
+      <CardHeader>
+        <CardTitle>Lexique Tahitien</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {lexiqueItems.map((item) => (
+            <div
+              key={item.id}
+              className="border-b border-primary/20 pb-4 last:border-0 last:pb-0"
+            >
+              <div className="flex items-start justify-between mb-2">
+                <h3 className="text-lg font-semibold text-primary">
+                  {item.mot}
+                </h3>
+                <span className="text-sm font-medium text-gray-600">
+                  {item.traduction}
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+