\n {/* Header */}\n

\n 📝 3D Notes\n

\n Share notes with style and security\n

\n\n {/* Create Note Form */}\n

\n Create a New Note\n

\n \n

\n \n Title\n \n setTitle(e.target.value)}\n className=\"w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30\"\n placeholder=\"Enter note title...\"\n required\n />\n

\n\n

\n \n Content\n \n setContent(e.target.value)}\n rows={6}\n className=\"w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30 resize-none\"\n placeholder=\"Write your note content here...\"\n required\n />\n

\n\n

\n \n Password (Optional)\n \n setNotePassword(e.target.value)}\n className=\"w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30\"\n placeholder=\"Leave empty for public note\"\n />\n

\n Add a password to make this note private\n

\n\n

\n \n Admin Password (Required) 🔐\n \n setAdminPassword(e.target.value)}\n className=\"w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30\"\n placeholder=\"Enter admin password to create notes\"\n required\n />\n

\n Only the admin can create new notes\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n \n {isLoading ? 'Creating Note...' : 'Create Note'}\n \n \n

\n\n {/* Features */}\n

🔐

Admin Protected

Only the admin can create notes. Others can only view shared notes.

\n \n

🔒

Password Protection

Keep your notes private with optional password protection

\n \n

🔗

Unique Links

Each note gets its own unique shareable link

\n );\n }\n\n // Note created success page\n if (appState === 'note-created') {\n const noteUrl = `${window.location.origin}/note/${currentNoteId}`;\n \n return (\n

✅

\n Note Created Successfully!\n

\n Your note has been created and is ready to share.\n

\n \n

Share this URL:

\n \n copyToClipboard(noteUrl)}\n className=\"px-4 py-2 bg-white/20 text-white text-sm rounded morph-button\"\n >\n Copy\n \n

\n\n

\n {\n setAppState('view-note');\n fetchNote(currentNoteId);\n }}\n className=\"px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded-lg morph-button\"\n >\n View Note\n \n \n Create Another\n \n

\n );\n }\n\n // View note page\n if (appState === 'view-note') {\n if (isLoading) {\n return (\n

Loading note...

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n Go Home\n \n

\n );\n }\n\n if (requiresPassword) {\n return (\n

\n 🔒 Protected Note\n

This note is password protected

\n\n \n

\n );\n }\n\n if (!currentNote) return null;\n\n return (\n

\n {currentNote.title}\n

\n copyToClipboard(currentNote.content)}\n className=\"p-3 bg-white/10 text-white rounded-lg morph-button hover:bg-white/20\"\n title=\"Copy content\"\n >\n 📋\n \n copyToClipboard(window.location.href)}\n className=\"p-3 bg-white/10 text-white rounded-lg morph-button hover:bg-white/20\"\n title=\"Copy link\"\n >\n 🔗\n \n setShowDeleteConfirm(true)}\n className=\"p-3 bg-red-500/20 text-red-300 rounded-lg morph-button hover:bg-red-500/30\"\n title=\"Delete note (Admin only)\"\n >\n 🗑️\n \n \n 🏠\n \n

\n\n

\n 📅 Created: {new Date(currentNote.createdAt).toLocaleString()}\n {currentNote.hasPassword && 🔒 Password Protected}\n

\n\n

\n {currentNote.content}\n

\n\n

\n \n Create Another Note\n \n

\n\n {/* Delete Confirmation Modal */}\n {showDeleteConfirm && (\n

\n 🗑️ Delete Note\n

\n Are you sure you want to delete this note? This action cannot be undone.\n

\n \n

\n \n Admin Password\n \n setDeleteAdminPassword(e.target.value)}\n className=\"w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30\"\n placeholder=\"Enter admin password to delete\"\n autoFocus\n />\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n {\n setShowDeleteConfirm(false);\n setDeleteAdminPassword('');\n setError('');\n }}\n className=\"flex-1 py-3 px-6 bg-white/10 text-white font-semibold rounded-lg morph-button\"\n >\n Cancel\n \n \n {isLoading ? 'Deleting...' : 'Delete'}\n \n

\n )}\n

\n );\n }\n\n return null;\n}","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/Itssongoku/NoteByPGC/code/frontend/components/App.tsx","extension","actionData","errors"]