René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"20 question","articleBody":"// Made by Mehdi IbnHfid\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\nexport default function SignInForm() {\n  const [submitted, setSubmitted] = useState(false);\n  const [name, setName] = useState('');\n  const [answers, setAnswers] = useState(Array(20).fill(''));\n\n  const handleSubmit = (e) =\u003e {\n    e.preventDefault();\n    setSubmitted(true);\n  };\n\n  const questions = [\n    \"Quel est ton nom complet ?\",\n    \"Quel est ton pays préféré ?\",\n    \"Quel âge as-tu ?\",\n    \"Quelle est ta passion ?\",\n    \"As-tu un animal préféré ?\",\n    \"Quelle est ta couleur préférée ?\",\n    \"Quel est ton rêve ?\",\n    \"Aimes-tu la science ?\",\n    \"Quelle langue parles-tu ?\",\n    \"Quel est ton plat préféré ?\",\n    \"Quel sport pratiques-tu ?\",\n    \"Quel est ton chanteur préféré ?\",\n    \"Quel est ton film préféré ?\",\n    \"Aimes-tu l’intelligence artificielle ?\",\n    \"Quel est ton métier de rêve ?\",\n    \"Quelle saison préfères-tu ?\",\n    \"Que fais-tu pendant ton temps libre ?\",\n    \"Aimes-tu lire des livres ?\",\n    \"Quel est ton super héros préféré ?\",\n    \"Quel pays veux-tu visiter ?\"\n  ];\n\n  return (\n    \u003cdiv className=\"min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex flex-col justify-center items-center p-6\"\u003e\n      \u003cmotion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}\n        className=\"text-white text-4xl font-bold mb-8 text-center\"\u003e\n        Made by Mehdi IbnHfid\n      \u003c/motion.h1\u003e\n\n      {!submitted ? (\n        \u003cmotion.form onSubmit={handleSubmit} className=\"bg-white rounded-2xl shadow-2xl p-8 w-full max-w-3xl\"\n          initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}\u003e\n          \u003cdiv className=\"mb-4\"\u003e\n            \u003clabel className=\"block font-semibold text-gray-700 mb-2\"\u003eTon nom\u003c/label\u003e\n            \u003cinput type=\"text\" value={name} onChange={(e) =\u003e setName(e.target.value)}\n              className=\"w-full p-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500\" /\u003e\n          \u003c/div\u003e\n          {questions.map((q, i) =\u003e (\n            \u003cdiv className=\"mb-4\" key={i}\u003e\n              \u003clabel className=\"block font-medium text-gray-700 mb-1\"\u003e{q}\u003c/label\u003e\n              \u003cinput type=\"text\" value={answers[i]} onChange={(e) =\u003e {\n                const newAnswers = [...answers];\n                newAnswers[i] = e.target.value;\n                setAnswers(newAnswers);\n              }} className=\"w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-400\" /\u003e\n            \u003c/div\u003e\n          ))}\n          \u003cmotion.button whileHover={{ scale: 1.05 }} type=\"submit\"\n            className=\"mt-6 w-full bg-purple-600 text-white p-3 rounded-xl font-semibold hover:bg-purple-700 transition\"\u003e\n            Soumettre\n          \u003c/motion.button\u003e\n        \u003c/motion.form\u003e\n      ) : (\n        \u003cmotion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}\n          className=\"bg-white p-8 rounded-2xl shadow-xl text-center max-w-xl\"\u003e\n          \u003ch2 className=\"text-2xl font-bold text-gray-800 mb-4\"\u003eMerci, {name} 🌟\u003c/h2\u003e\n          \u003cp className=\"text-gray-600\"\u003eTu as rempli les 20 questions. Bien joué !\u003c/p\u003e\n        \u003c/motion.div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}","author":{"url":"https://github.com/ibnhfidmehdi","@type":"Person","name":"ibnhfidmehdi"},"datePublished":"2025-07-23T21:31:56.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/2/coding/issues/2"}