change and add into components, widgets and pages

2026-07-30 14:08:49 +02:00
parent ec900efe3a
commit 057aa628a3
39 changed files with 1620 additions and 1062 deletions
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/utils/utils';
+import type { EvolutionOption } from '@/data/evolutionOptions';
+
+interface EvolutionOptionCardProps {
+  option: EvolutionOption;
+  isSubmitting: boolean;
+  isDisabled: boolean;
+  onSelect: (option: EvolutionOption) => void;
+}
+
+export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
+  option,
+  isSubmitting,
+  isDisabled,
+  onSelect
+}) => {
+  return (
+    <div
+      className={cn(
+        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
+        isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
+      )}
+    >
+      <div>
+        {/* En-tête de la carte */}
+        <div className="flex items-center justify-between gap-2 mb-3">
+          <span className="text-[11px] font-mono font-bold tracking-wider uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
+            {option.categoryLabel}
+          </span>
+          {option.badgeText && (
+            <span className="text-[10px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-100">
+              {option.badgeText}
+            </span>
+          )}
+        </div>
+
+        {/* Titre & Description */}
+        <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {option.title}
+        </h3>
+        <p className="text-xs text-slate-600 mt-2 leading-relaxed">
+          {option.description}
+        </p>
+      </div>
+
+      {/* Bouton d'action */}
+      <div className="mt-6 pt-4 border-t border-slate-100 flex justify-end">
+        <Button
+          size="sm"
+          isLoading={isSubmitting}
+          disabled={isDisabled}
+          onClick={() => onSelect(option)}
+          className="w-full sm:w-auto text-xs"
+        >
+          Engager cette initiative →
+        </Button>
+      </div>
+    </div>
+  );
+};