first commit

2026-06-16 00:02:49 +02:00 · 2026-03-30 19:30:30 +02:00
commit a0d952ae0f
42 changed files with 9896 additions and 0 deletions
@@ -0,0 +1,83 @@
+'use client';
+
+import { Clock, Trash2, RotateCcw } from 'lucide-react';
+import Image from 'next/image';
+import type { HistoryItem } from '../lib/types';
+import { CONTENT_TYPE_LABELS } from '../lib/types';
+
+interface QRHistoryProps {
+  history: HistoryItem[];
+  onSelect: (item: HistoryItem) => void;
+  onClear: () => void;
+}
+
+export default function QRHistory({ history, onSelect, onClear }: QRHistoryProps) {
+  if (history.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-400 dark:text-gray-600">
+        <Clock size={32} className="mx-auto mb-2 opacity-40" />
+        <p className="text-sm">Aucun historique</p>
+        <p className="text-xs mt-1">Vos QR Codes récents apparaîtront ici</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          {history.length} QR Code{history.length > 1 ? 's' : ''} récent{history.length > 1 ? 's' : ''}
+        </h3>
+        <button
+          onClick={onClear}
+          className="flex items-center gap-1 text-xs text-red-500 hover:text-red-600 transition-colors"
+        >
+          <Trash2 size={12} />
+          Vider
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
+        {history.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => onSelect(item)}
+            className="group relative bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-3 hover:border-violet-400 dark:hover:border-violet-500 hover:shadow-lg hover:shadow-violet-500/10 transition-all duration-200"
+          >
+            <Image
+              src={item.dataUrl}
+              alt="QR Code"
+              width={200}
+              height={200}
+              unoptimized
+              className="w-full aspect-square rounded-lg mb-2"
+            />
+            <div className="text-left">
+              <span className="inline-block px-1.5 py-0.5 text-[10px] font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 rounded-md">
+                {CONTENT_TYPE_LABELS[item.contentType]}
+              </span>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
+                {item.rawContent.substring(0, 30)}
+                {item.rawContent.length > 30 ? '...' : ''}
+              </p>
+              <p className="text-[10px] text-gray-400 dark:text-gray-600 mt-0.5">
+                {new Date(item.timestamp).toLocaleDateString('fr-FR', {
+                  day: '2-digit',
+                  month: '2-digit',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </p>
+            </div>
+            <div className="absolute inset-0 flex items-center justify-center bg-violet-600/0 group-hover:bg-violet-600/10 rounded-xl transition-all">
+              <RotateCcw
+                size={20}
+                className="text-violet-600 opacity-0 group-hover:opacity-100 transition-opacity"
+              />
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}