function MainComponent() { const [names, setNames] = useState([]); const [selectedName, setSelectedName] = useState(""); const [showModal, setShowModal] = useState(false); const [inputNames, setInputNames] = useState(""); const [isAnimating, setIsAnimating] = useState(false); const [animatingNames, setAnimatingNames] = useState([]); const [showSelectedText, setShowSelectedText] = useState(false); useEffect(()=>{ document.title = "Willekeurige namenkiezer"; }, []); const selectRandomName = ()=>{ if (names.length > 0) { setShowModal(true); setIsAnimating(true); setShowSelectedText(false); const cycleNames = ()=>{ const randomNames = [ ...names ].sort(()=>Math.random() - 0.5).slice(0, 20); setAnimatingNames(randomNames); }; let cycles = 0; const interval = setInterval(()=>{ cycleNames(); cycles++; if (cycles >= 15) { clearInterval(interval); const random = Math.floor(Math.random() * names.length); const chosen = names[random]; setSelectedName(chosen); setAnimatingNames([]); setIsAnimating(false); setShowSelectedText(true); } }, 200); } }; const addName = ()=>{ if (inputNames.trim()) { const newNames = inputNames.split("\n").map((name)=>name.trim()).filter((name)=>name.length > 0); setNames([ ...names, ...newNames ]); setInputNames(""); } }; const handleDeleteName = (index)=>{ const newNames = [ ...names ]; newNames.splice(index, 1); setNames(newNames); }; const clearAll = ()=>{ setNames([]); setInputNames(""); setSelectedName(""); setShowModal(false); setShowSelectedText(false); }; const loadDemo = ()=>{ setNames([ "Aisha Khan", "Fatima El Amrani", "Zara Patel", "Hassan Mahmoud", "Alejandro García", "Mei Lin", "Youssef El Haddad", "Amara Okafor", "Priya Sharma", "Diego Morales", "Chen Wei", "Rania Abid", "Tarek Hassan", "Aya Nakamura", "Sofia Ivanova", "Arjun Reddy", "Isabella Costa", "Jamal Ahmed", "Kavita Patel", "Leila Habibi", "Mohamed El Sayed", "Akira Takahashi", "Lucia Fernández", "Ebrahim Al-Farsi", "Nina Popov" ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-8", style: { backgroundColor: "#143d2f" }, __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto rounded-lg shadow-lg p-6", style: { backgroundColor: "#1d4a3c" }, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-left mb-8 text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Willekeurige namenkiezer"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-white mb-8", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold underline", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Data verantwoording:"), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }), "1. De data is altijd tijdelijk. Wanneer je de pagina ververst of de browser sluit zijn alle namen verdwenen.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }), "2. De data verlaat nooit jouw apparaat. Namen worden niet naar een server of database gestuurd.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }), "3. De data is privé. Andere websites kunnen deze informatie niet bekijken.", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }), "4. De data is veilig. De data staat alleen in het tijdelijke geheugen van je apparaat."), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-3 border rounded-lg resize-none", placeholder: "Voer namen in (één naam per regel)", value: inputNames, onChange: (e)=>setInputNames(e.target.value), __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addName, className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "Toevoegen"), /*#__PURE__*/ React.createElement("button", { onClick: loadDemo, className: "bg-purple-300 text-white px-4 py-2 rounded hover:bg-purple-400", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Demo"), /*#__PURE__*/ React.createElement("button", { onClick: clearAll, className: "bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Alles wissen")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, "Namenlijst (", names.length, " namen)")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: selectRandomName, className: "bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600", disabled: names.length === 0, __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "Kies willekeurige naam")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 border border-white/20 rounded-lg p-4", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, names.map((name, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between py-1 text-white", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, name), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteName(index), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 173, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 177, columnNumber: 23 }, __self: this }))))))))), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", onClick: ()=>setShowModal(false), __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: (e)=>e.stopPropagation(), className: "bg-white rounded-lg p-8 max-w-md w-full mx-4 relative", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(false), className: "absolute top-2 right-2 text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, isAnimating ? /*#__PURE__*/ React.createElement("div", { className: "name-cycle", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cycling-name", __source: { fileName: "", lineNumber: 205, columnNumber: 21 }, __self: this }, animatingNames[animatingNames.length - 1])) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "final-name", __source: { fileName: "", lineNumber: 211, columnNumber: 21 }, __self: this }, selectedName), showSelectedText && /*#__PURE__*/ React.createElement("div", { className: "selected-text text-[#FFD700] text-2xl mt-4 font-bold", __source: { fileName: "", lineNumber: 213, columnNumber: 23 }, __self: this }, "Jij bent uitgekozen!"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: selectRandomName, className: "w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", disabled: isAnimating, __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, isAnimating ? "Naam kiezen..." : "Kies nog een naam")))))); /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 235, columnNumber: 3 }, __self: this }, ` .name-cycle { width: 100%; position: relative; overflow: hidden; height: 1.5em; } .cycling-name { position: absolute; white-space: nowrap; animation: cycleNames 0.2s linear; } .final-name { animation: finalName 0.5s ease-in-out; } .selected-text { animation: fadeInUp 0.5s ease-out; } @keyframes cycleNames { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes finalName { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } @keyframes fadeInUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } `); }

Willekeurige namenkiezer

Namenlijst (0 namen)