\n \n\n\n",[],[259,261],"9b4ecfd0-38b3-11f1-aa9f-42b51c65c3df","api.ts","9b4ed070-38b3-11f1-aa9f-42b51c65c3df",8,["D",1776247948100],"const BASE = \"\";\n\nasync function req(url: string, opts?: RequestInit) {\n const res = await fetch(BASE + url, { ...opts, credentials: \"include\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Request failed\");\n return data;\n}\n\nexport const api = {\n register: (username: string, password: string) =>\n req(\"/api/register\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ username, password }) }),\n login: (username: string, password: string) =>\n req(\"/api/login\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ username, password }) }),\n logout: () => req(\"/api/logout\", { method: \"POST\" }),\n me: () => req(\"/api/me\"),\n getEmojis: (category?: string) => req(`/api/emojis${category && category !== \"All\" ? `?category=${encodeURIComponent(category)}` : \"\"}`),\n getEmoji: (id: number) => req(`/api/emojis/${id}`),\n getCategories: () => req(\"/api/categories\"),\n upload: (formData: FormData) => req(\"/api/emojis/upload\", { method: \"POST\", body: formData }),\n getStats: () => req(\"/api/account/stats\"),\n fileUrl: (key: string) => `/api/file/${key}`,\n downloadUrl: (id: number) => `/api/download/${id}`,\n};\n",[],[259,269],"a25341ee-38b3-11f1-b9fb-42b51c65c3df","App.tsx","a253428e-38b3-11f1-b9fb-42b51c65c3df",9,["D",1776247959878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"./api.ts\";\nimport { Nav } from \"./components/Nav.tsx\";\nimport { HomePage } from \"./components/HomePage.tsx\";\nimport { SubmitPage } from \"./components/SubmitPage.tsx\";\nimport { AccountPage } from \"./components/AccountPage.tsx\";\nimport { AuthModal } from \"./components/AuthModal.tsx\";\n\ntype Page = \"home\" | \"submit\" | \"account\";\ntype User = { id: number; username: string } | null;\n\nexport function App() {\n const [page, setPage] = useState(\"home\");\n const [user, setUser] = useState(null);\n const [showAuth, setShowAuth] = useState(false);\n const [authMode, setAuthMode] = useState<\"login\" | \"register\">(\"login\");\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n api.me().then(d => { setUser(d.user); setLoading(false); }).catch(() => setLoading(false));\n }, []);\n\n const navigate = useCallback((p: Page) => {\n if ((p === \"submit\" || p === \"account\") && !user) {\n setAuthMode(\"login\");\n setShowAuth(true);\n return;\n }\n setPage(p);\n }, [user]);\n\n const onAuth = (u: any) => {\n setUser(u);\n setShowAuth(false);\n };\n\n const onLogout = async () => {\n await api.logout();\n setUser(null);\n setPage(\"home\");\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n return (\n

{ setAuthMode(\"login\"); setShowAuth(true); }}\n onRegister={() => { setAuthMode(\"register\"); setShowAuth(true); }} />\n

\n {page === \"home\" && }\n {page === \"submit\" && user && setPage(\"home\")} />}\n {page === \"account\" && user && }\n

\n \n {showAuth && (\n setAuthMode(m => m === \"login\" ? \"register\" : \"login\")}\n onClose={() => setShowAuth(false)} onAuth={onAuth} />\n )}\n

\n );\n}\n",[],[259,277],"ced11336-38b3-11f1-82dd-42b51c65c3df","SubmitPage.tsx","ced113e0-38b3-11f1-82dd-42b51c65c3df","1e871d3f-ddfc-4377-abf7-b5cc2c42c949",14,["D",1776248034522],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nconst CATEGORIES = [\n \"General\",\"Smileys\",\"Animals\",\"Food\",\"Activities\",\"Travel\",\"Objects\",\"Symbols\",\"Flags\",\"Memes\",\"Gaming\",\"Anime\",\"Custom\"\n];\n\ninterface SubmitPageProps {\n user: { id: number; username: string };\n onSuccess: () => void;\n}\n\nexport function SubmitPage({ user, onSuccess }: SubmitPageProps) {\n const [file, setFile] = useState(null);\n const [preview, setPreview] = useState(null);\n const [name, setName] = useState(\"\");\n const [tags, setTags] = useState(\"\");\n const [category, setCategory] = useState(\"General\");\n const [description, setDescription] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [success, setSuccess] = useState(false);\n const inputRef = useRef(null);\n\n const handleFileChange = (e: React.ChangeEvent) => {\n const f = e.target.files?.[0];\n if (!f) return;\n if (![\"image/png\", \"image/gif\"].includes(f.type)) {\n setError(\"Only PNG or GIF files are allowed\");\n return;\n }\n if (f.size > 512000) {\n setError(\"File must be under 500KB\");\n return;\n }\n setError(\"\");\n setFile(f);\n const reader = new FileReader();\n reader.onload = (ev) => setPreview(ev.target?.result as string);\n reader.readAsDataURL(f);\n if (!name) setName(f.name.replace(/\\.(png|gif)$/i, \"\"));\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!file) { setError(\"Please select a file\"); return; }\n if (!name.trim()) { setError(\"Name is required\"); return; }\n setError(\"\");\n setLoading(true);\n try {\n const fd = new FormData();\n fd.append(\"file\", file);\n fd.append(\"name\", name.trim());\n fd.append(\"tags\", tags.trim());\n fd.append(\"category\", category);\n fd.append(\"description\", description.trim());\n await api.upload(fd);\n setSuccess(true);\n setTimeout(() => onSuccess(), 1500);\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n };\n\n if (success) {\n return (\n

🎉

Emoji uploaded!

Redirecting to home...

\n );\n }\n\n return (\n

📤 Submit Emoji

Upload a PNG or GIF under 500KB

\n\n

\n {/* File Upload */}\n

inputRef.current?.click()}>\n \n {preview ? (\n

\n $\"Preview\"$ \n {file?.name} ({(file!.size / 1024).toFixed(1)} KB)\n Click to change\n

\n ) : (\n

📁

Click to select a PNG or GIF file

Max 500KB

\n )}\n

\n\n {/* Name */}\n

\n Name *\n setName(e.target.value)} maxLength={32}\n className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n placeholder=\"e.g. happy_pepe\" required />\n

\n\n {/* Tags */}\n

\n Tags\n setTags(e.target.value)}\n className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n placeholder=\"happy, pepe, meme (comma separated)\" />\n

\n\n {/* Category */}\n

\n Category\n \n

\n\n {/* Description */}\n

\n Description\n

setDescription(e.target.value)} rows={3}\n            className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm resize-none\"\n            placeholder=\"A short description of this emoji...\" />\n        </div>\n\n        {error && <div className=\"text-red-500 text-sm bg-red-50 px-3 py-2 rounded-lg\">{error}</div>}\n\n        <button type=\"submit\" disabled={loading}\n          className=\"w-full py-3 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-600 transition-all disabled:opacity-50 text-sm shadow-sm\">\n          {loading ? \"Uploading...\" : \"🚀 Submit Emoji\"}\n        </button>\n      </form>\n    </div>\n  );\n}\n",[],[259,293,285],"components","eacabc90-38b3-11f1-922c-42b51c65c3df","Nav.tsx","a887cc56-38b3-11f1-922c-42b51c65c3df",16,["D",1776248081443],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface NavProps {\n  page: string;\n  onNavigate: (p: any) => void;\n  user: any;\n  onLogout: () => void;\n  onLogin: () => void;\n  onRegister: () => void;\n}\n\nexport function Nav({ page, onNavigate, user, onLogout, onLogin, onRegister }: NavProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const link = (p: string, label: string, mobile = false) => (\n    <button onClick={() => { onNavigate(p); setMenuOpen(false); }}\n      className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${\n        mobile ? \"w-full text-left\" : \"\"\n      } ${\n        page === p ? \"bg-indigo-500 text-white shadow-md\" : \"text-gray-600 hover:bg-gray-100\"\n      }`}>\n      {label}\n    </button>\n  );\n\n  return (\n    <nav className=\"bg-white border-b border-gray-200 sticky top-0 z-50\">\n      <div className=\"max-w-5xl mx-auto px-4 h-14 flex items-center justify-between\">\n        {/* Logo */}\n        <button onClick={() => { onNavigate(\"home\"); setMenuOpen(false); }} className=\"flex items-center gap-2 group shrink-0\">\n          <span className=\"text-xl\">📈</span>\n          <span className=\"text-lg font-extrabold text-gray-900 group-hover:text-indigo-600 transition-colors hidden sm:inline\">\n            Emoji Stocks\n          </span>\n        </button>\n\n        {/* Desktop Nav */}\n        <div className=\"hidden md:flex items-center gap-1\">\n          {link(\"home\", \"🏠 Home\")}\n          {link(\"submit\", \"📤 Submit\")}\n          {link(\"account\", \"👤 Account\")}\n        </div>\n\n        {/* Desktop Auth */}\n        <div className=\"hidden md:flex items-center gap-2\">\n          {user ? (\n            <div className=\"flex items-center gap-3\">\n              <span className=\"text-sm font-medium text-gray-700\">@{user.username}</span>\n              <button onClick={onLogout}\n                className=\"text-xs px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 hover:bg-red-50 hover:text-red-600 transition-all font-medium\">\n                Logout\n              </button>\n            </div>\n          ) : (\n            <>\n              <button onClick={onLogin}\n                className=\"text-sm px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all font-medium\">\n                Log in\n              </button>\n              <button onClick={onRegister}\n                className=\"text-sm px-4 py-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition-all font-medium shadow-sm\">\n                Sign up\n              </button>\n            </>\n          )}\n        </div>\n\n        {/* Mobile Menu Button */}\n        <button onClick={() => setMenuOpen(!menuOpen)} className=\"md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-lg\">\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n            {menuOpen\n              ? <><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></>\n              : <><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/></>}\n          </svg>\n        </button>\n      </div>\n\n      {/* Mobile Menu */}\n      {menuOpen && (\n        <div className=\"md:hidden border-t border-gray-100 bg-white px-4 py-3 space-y-1\">\n          {link(\"home\", \"🏠 Home\", true)}\n          {link(\"submit\", \"📤 Submit\", true)}\n          {link(\"account\", \"👤 Account\", true)}\n          <div className=\"border-t border-gray-100 pt-2 mt-2\">\n            {user ? (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm font-medium text-gray-700\">@{user.username}</span>\n                <button onClick={() => { onLogout(); setMenuOpen(false); }}\n                  className=\"text-xs px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 font-medium\">\n                  Logout\n                </button>\n              </div>\n            ) : (\n              <div className=\"flex gap-2\">\n                <button onClick={() => { onLogin(); setMenuOpen(false); }}\n                  className=\"flex-1 text-sm py-2 rounded-lg bg-gray-100 text-gray-700 font-medium\">\n                  Log in\n                </button>\n                <button onClick={() => { onRegister(); setMenuOpen(false); }}\n                  className=\"flex-1 text-sm py-2 rounded-lg bg-indigo-500 text-white font-medium\">\n                  Sign up\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </nav>\n  );\n}\n",[],[259,293,295],"b96a0020-38b3-11f1-809f-42b51c65c3df","HomePage.tsx","b96a0192-38b3-11f1-809f-42b51c65c3df",12,["D",1776247998611],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\nimport { EmojiModal } from \"./EmojiModal.tsx\";\n\nexport function HomePage() {\n  const [emojis, setEmojis] = useState<any[]>([]);\n  const [categories, setCategories] = useState<string[]>([]);\n  const [activeCategory, setActiveCategory] = useState(\"All\");\n  const [selectedEmoji, setSelectedEmoji] = useState<any>(null);\n  const [loading, setLoading] = useState(true);\n\n  const loadEmojis = async (cat?: string) => {\n    setLoading(true);\n    try {\n      const data = await api.getEmojis(cat);\n      setEmojis(data.emojis || []);\n    } catch { setEmojis([]); }\n    setLoading(false);\n  };\n\n  useEffect(() => {\n    api.getCategories().then(d => setCategories(d.categories || [])).catch(() => {});\n    loadEmojis();\n  }, []);\n\n  const handleCategoryChange = (cat: string) => {\n    setActiveCategory(cat);\n    loadEmojis(cat);\n  };\n\n  return (\n    <div>\n      {/* Hero */}\n      <div className=\"text-center mb-8\">\n        <h1 className=\"text-3xl font-extrabold text-gray-900 mb-2\">\n          📈 Discover & Share Emojis\n        </h1>\n        <p className=\"text-gray-500\">Browse community-uploaded emojis for Discord and more</p>\n      </div>\n\n      {/* Category Filters */}\n      <div className=\"flex flex-wrap gap-2 mb-6 justify-center\">\n        {categories.map(cat => (\n          <button key={cat} onClick={() => handleCategoryChange(cat)}\n            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${\n              activeCategory === cat\n                ? \"bg-indigo-500 text-white shadow-md\"\n                : \"bg-white text-gray-600 border border-gray-200 hover:border-indigo-300 hover:text-indigo-600\"\n            }`}>\n            {cat}\n          </button>\n        ))}\n      </div>\n\n      {/* Grid */}\n      {loading ? (\n        <div className=\"text-center py-20 text-gray-400\">Loading emojis...</div>\n      ) : emojis.length === 0 ? (\n        <div className=\"text-center py-20\">\n          <div className=\"text-5xl mb-4\">📭</div>\n          <p className=\"text-gray-500 text-lg\">No emojis yet. Be the first to upload!</p>\n        </div>\n      ) : (\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n          {emojis.map((emoji: any) => (\n            <div key={emoji.id} onClick={() => setSelectedEmoji(emoji)}\n              className=\"bg-white rounded-2xl border border-gray-100 hover:border-indigo-200 hover:shadow-lg transition-all cursor-pointer group overflow-hidden\">\n              <div className=\"aspect-square flex items-center justify-center p-4 bg-gray-50/50\">\n                <img src={api.fileUrl(emoji.file_key)} alt={emoji.name}\n                  className=\"w-[128px] h-[128px] object-contain group-hover:scale-110 transition-transform\" loading=\"lazy\" />\n              </div>\n              <div className=\"p-3 border-t border-gray-50\">\n                <h3 className=\"font-semibold text-gray-900 text-sm truncate\">{emoji.name}</h3>\n                <div className=\"flex items-center justify-between mt-1\">\n                  <span className=\"text-xs text-gray-400\">@{emoji.username}</span>\n                  <span className=\"text-xs text-gray-400 flex items-center gap-1\">\n                    ⬇ {emoji.downloads}\n                  </span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {selectedEmoji && (\n        <EmojiModal emoji={selectedEmoji} onClose={() => setSelectedEmoji(null)} />\n      )}\n    </div>\n  );\n}\n",[],[259,293,303],"c0ad4e6e-38b3-11f1-95fc-42b51c65c3df","EmojiModal.tsx","c0ad4f2c-38b3-11f1-95fc-42b51c65c3df",13,["D",1776248010794],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\ninterface EmojiModalProps {\n  emoji: any;\n  onClose: () => void;\n}\n\nexport function EmojiModal({ emoji, onClose }: EmojiModalProps) {\n  const handleDownload = () => {\n    const a = document.createElement(\"a\");\n    a.href = api.downloadUrl(emoji.id);\n    a.download = emoji.name;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <div className=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"\n      onClick={onClose}>\n      <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden\" onClick={e => e.stopPropagation()}>\n        <div className=\"bg-gray-50 flex items-center justify-center p-8\">\n          <img src={api.fileUrl(emoji.file_key)} alt={emoji.name}\n            className=\"w-[128px] h-[128px] object-contain\" />\n        </div>\n        <div className=\"p-6\">\n          <h2 className=\"text-xl font-bold text-gray-900 mb-1\">{emoji.name}</h2>\n          <p className=\"text-sm text-gray-500 mb-4\">by @{emoji.username}</p>\n          {emoji.description && (\n            <p className=\"text-sm text-gray-600 mb-4\">{emoji.description}</p>\n          )}\n          <div className=\"flex flex-wrap gap-2 mb-4\">\n            <span className=\"px-2.5 py-1 bg-indigo-50 text-indigo-600 rounded-full text-xs font-medium\">\n              {emoji.category}\n            </span>\n            {emoji.tags && emoji.tags.split(\",\").map((t: string) => t.trim()).filter(Boolean).map((tag: string) => (\n              <span key={tag} className=\"px-2.5 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium\">\n                #{tag}\n              </span>\n            ))}\n          </div>\n          <div className=\"flex items-center gap-3 text-sm text-gray-500 mb-5\">\n            <span>⬇ {emoji.downloads} downloads</span>\n            <span>·</span>\n            <span>{(emoji.file_size / 1024).toFixed(1)} KB</span>\n            <span>·</span>\n            <span>{emoji.file_type === \"image/gif\" ? \"GIF\" : \"PNG\"}</span>\n          </div>\n          <div className=\"flex gap-3\">\n            <button onClick={handleDownload}\n              className=\"flex-1 py-2.5 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-600 transition-all text-sm shadow-sm\">\n              ⬇ Download (128px)\n            </button>\n            <button onClick={onClose}\n              className=\"px-5 py-2.5 bg-gray-100 text-gray-600 rounded-xl font-medium hover:bg-gray-200 transition-all text-sm\">\n              Close\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[259,293,311],"afe36758-38b3-11f1-809f-42b51c65c3df","AuthModal.tsx","afe3682a-38b3-11f1-809f-42b51c65c3df",11,["D",1776247982632],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\ninterface AuthModalProps {\n  mode: \"login\" | \"register\";\n  onSwitch: () => void;\n  onClose: () => void;\n  onAuth: (user: any) => void;\n}\n\nexport function AuthModal({ mode, onSwitch, onClose, onAuth }: AuthModalProps) {\n  const [username, setUsername] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(\"\");\n    setLoading(true);\n    try {\n      const fn = mode === \"login\" ? api.login : api.register;\n      const data = await fn(username, password);\n      onAuth(data.user);\n    } catch (err: any) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"\n      onClick={onClose}>\n      <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-sm p-8\" onClick={e => e.stopPropagation()}>\n        <div className=\"text-center mb-6\">\n          <div className=\"text-3xl mb-2\">{mode === \"login\" ? \"👋\" : \"🚀\"}</div>\n          <h2 className=\"text-2xl font-bold text-gray-900\">\n            {mode === \"login\" ? \"Welcome back\" : \"Create account\"}\n          </h2>\n          <p className=\"text-gray-500 text-sm mt-1\">\n            {mode === \"login\" ? \"Sign in to your account\" : \"Join the emoji community\"}\n          </p>\n        </div>\n        <form onSubmit={handleSubmit} className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Username</label>\n            <input type=\"text\" value={username} onChange={e => setUsername(e.target.value)}\n              className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n              placeholder=\"Enter username\" autoFocus required />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Password</label>\n            <input type=\"password\" value={password} onChange={e => setPassword(e.target.value)}\n              className=\"w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-sm\"\n              placeholder=\"Enter password\" required />\n          </div>\n          {error && <div className=\"text-red-500 text-sm bg-red-50 px-3 py-2 rounded-lg\">{error}</div>}\n          <button type=\"submit\" disabled={loading}\n            className=\"w-full py-2.5 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-600 transition-all disabled:opacity-50 text-sm shadow-sm\">\n            {loading ? \"...\" : mode === \"login\" ? \"Sign in\" : \"Create account\"}\n          </button>\n        </form>\n        <p className=\"text-center text-sm text-gray-500 mt-5\">\n          {mode === \"login\" ? \"Don't have an account?\" : \"Already have an account?\"}{\" \"}\n          <button onClick={onSwitch} className=\"text-indigo-500 font-semibold hover:underline\">\n            {mode === \"login\" ? \"Sign up\" : \"Sign in\"}\n          </button>\n        </p>\n      </div>\n    </div>\n  );\n}\n",[],[259,293,319],"d7ab0494-38b3-11f1-92ed-42b51c65c3df","AccountPage.tsx","d7ab0584-38b3-11f1-92ed-42b51c65c3df",15,["D",1776248049372],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\ninterface AccountPageProps {\n  user: { id: number; username: string };\n}\n\nexport function AccountPage({ user }: AccountPageProps) {\n  const [stats, setStats] = useState<any>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    api.getStats().then(d => { setStats(d); setLoading(false); }).catch(() => setLoading(false));\n  }, []);\n\n  if (loading) {\n    return <div className=\"text-center py-20 text-gray-400\">Loading dashboard...</div>;\n  }\n\n  if (!stats) {\n    return <div className=\"text-center py-20 text-gray-500\">Could not load stats</div>;\n  }\n\n  return (\n    <div>\n      <div className=\"text-center mb-8\">\n        <div className=\"w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3\">\n          <span className=\"text-3xl\">👤</span>\n        </div>\n        <h1 className=\"text-2xl font-extrabold text-gray-900\">@{user.username}</h1>\n        <p className=\"text-gray-500 text-sm\">Your emoji dashboard</p>\n      </div>\n\n      {/* Stats Cards */}\n      <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-8\">\n        <StatCard icon=\"📦\" label=\"Total Emojis\" value={stats.totalEmojis} />\n        <StatCard icon=\"⬇\" label=\"Total Downloads\" value={stats.totalDownloads} />\n        <StatCard icon=\"📊\" label=\"Avg Downloads\" value={stats.avgDownloads} />\n        <StatCard icon=\"🏆\" label=\"Ranking\" value={`#${stats.rank} / ${stats.totalUsers}`} />\n      </div>\n\n      {/* User's Emojis */}\n      <h2 className=\"text-lg font-bold text-gray-900 mb-4\">Your Emojis</h2>\n      {stats.emojis.length === 0 ? (\n        <div className=\"text-center py-12 bg-white rounded-2xl border border-gray-100\">\n          <div className=\"text-4xl mb-3\">📭</div>\n          <p className=\"text-gray-500\">You haven't uploaded any emojis yet</p>\n        </div>\n      ) : (\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n          {stats.emojis.map((emoji: any) => (\n            <div key={emoji.id} className=\"bg-white rounded-2xl border border-gray-100 overflow-hidden\">\n              <div className=\"aspect-square flex items-center justify-center p-3 bg-gray-50/50\">\n                <img src={api.fileUrl(emoji.file_key)} alt={emoji.name}\n                  className=\"w-[96px] h-[96px] object-contain\" loading=\"lazy\" />\n              </div>\n              <div className=\"p-3 border-t border-gray-50\">\n                <h3 className=\"font-semibold text-gray-900 text-xs truncate\">{emoji.name}</h3>\n                <div className=\"flex items-center justify-between mt-1\">\n                  <span className=\"text-xs text-indigo-500 font-medium\">{emoji.category}</span>\n                  <span className=\"text-xs text-gray-400\">⬇ {emoji.downloads}</span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction StatCard({ icon, label, value }: { icon: string; label: string; value: any }) {\n  return (\n    <div className=\"bg-white rounded-2xl border border-gray-100 p-5 text-center\">\n      <div className=\"text-2xl mb-2\">{icon}</div>\n      <div className=\"text-2xl font-bold text-gray-900\">{value}</div>\n      <div className=\"text-xs text-gray-500 mt-1\">{label}</div>\n    </div>\n  );\n}\n",[],[259,293,327],"a887fcd0-38b3-11f1-922c-42b51c65c3df",10,["D",1776247970282],[189,190,191,192,193,194],[259,293],"94cdbcd4-38b3-11f1-937f-42b51c65c3df",["D",1776247937191],[188,195,196,197,198],[259],["D",1776247892888],[],[18,80],["D",1776247877648],[],[18,65],["D",1776247877648],[185,186],[18],["D",1776247871105],["D",1789497078049],{"_11":12,"_135":71},{"_11":12,"_131":-5,"_70":71,"_31":69,"_132":133,"_134":30},{"_40":122,"_13":16,"_34":37,"_123":84,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":14,"_130":12},"ctx",{"_53":-5,"_154":390,"_391":392,"_393":394,"_395":30,"_396":30,"_397":30,"_398":24,"_399":-5,"_400":-7,"_401":-7,"_402":26,"_403":30,"_404":30,"_405":-5,"_406":30,"_407":30,"_408":30,"_409":-5},"ENV",{"_361":362,"_363":364,"_365":16,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

History · database