connection base prisma + postgres + login ok

2026-02-26 21:58:16 +01:00
parent 78dc8813f1
commit 56b5615abf
1462 changed files with 429582 additions and 2546 deletions
--- a/src/components/Checkout.tsx
+++ b/src/components/Checkout.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+
+import React, { useState } from 'react';
+import { CreditCard, Shield, Lock, ArrowRight, Loader2 } from 'lucide-react';
+
+interface CheckoutProps {
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+const Checkout: React.FC<CheckoutProps> = ({ onComplete, onCancel }) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setTimeout(() => {
+        onComplete();
+    }, 2000);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#eef2ff] flex items-center justify-center p-8">
+      <div className="bg-white rounded-3xl shadow-2xl flex flex-col md:flex-row max-w-4xl w-full overflow-hidden animate-in fade-in slide-in-from-bottom-10 duration-500">
+        <div className="w-full md:w-1/3 bg-slate-900 text-white p-8">
+            <h3 className="text-xl font-bold mb-8 flex items-center gap-2"><Lock size={18} className="text-blue-400" /> Commande</h3>
+            <div className="space-y-4">
+                <div className="flex justify-between text-sm"><span>Auteur Pro</span><span>12.00€</span></div>
+                <div className="flex justify-between text-sm"><span>TVA (20%)</span><span>2.40€</span></div>
+                <div className="h-px bg-slate-800 my-4" />
+                <div className="flex justify-between text-xl font-black"><span>Total</span><span className="text-blue-400">14.40€</span></div>
+            </div>
+        </div>
+        <div className="flex-1 p-8 md:p-12">
+            <h2 className="text-2xl font-black text-slate-900 mb-8 text-center">Paiement Sécurisé</h2>
+            <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                    <label className="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Numéro de carte</label>
+                    <div className="relative">
+                        <input type="text" placeholder="4242 4242 4242 4242" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
+                        <CreditCard className="absolute right-4 top-4 text-slate-400" />
+                    </div>
+                </div>
+                <div className="grid grid-cols-2 gap-6">
+                    <input type="text" placeholder="MM / YY" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
+                    <input type="text" placeholder="CVC" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
+                </div>
+                <button 
+                    disabled={loading}
+                    className="w-full bg-blue-600 text-white py-5 rounded-2xl font-black text-lg hover:bg-blue-700 transition-all shadow-xl shadow-blue-200 flex items-center justify-center gap-3"
+                >
+                    {loading ? <Loader2 className="animate-spin" /> : <>Confirmer le paiement <ArrowRight size={20} /></>}
+                </button>
+                <div className="flex items-center justify-center gap-2 text-[10px] text-slate-400 font-bold uppercase">
+                    <Shield size={12} /> Traitement chiffré SSL 256-bits
+                </div>
+            </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Checkout;