\n \n\n

Admin · Quotes

Edit and delete quotes. Not linked from main app.

\n\n ← Back to app\n\n {/* Add new */}\n {adding ? (\n

setNewQ(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n            <input placeholder=\"Author\" value={newQ.author} onChange={e => setNewQ(p => ({ ...p, author: e.target.value }))} style={{ marginBottom: 10 }} />\n            <div style={{ display: \"flex\", gap: 8 }}>\n              <button onClick={addQuote} style={{ padding: \"8px 14px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 12, fontWeight: 700, cursor: \"pointer\" }}>Save</button>\n              <button onClick={() => setAdding(false)} style={{ padding: \"8px 14px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\" }}>Cancel</button>\n            </div>\n          </div>\n        ) : (\n          <button onClick={() => setAdding(true)} style={{ padding: \"10px 16px\", background: \"#21262d\", border: \"1px dashed rgba(255,255,255,0.2)\", borderRadius: 8, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 12, cursor: \"pointer\", marginBottom: 20 }}>\n            + Add quote\n          </button>\n        )}\n\n        {/* Quote list */}\n        {loading ? (\n          <div style={{ color: \"#6e7681\", padding: 40, textAlign: \"center\" }}>Loading…</div>\n        ) : (\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>\n            {quotes.map(q => (\n              <div key={q.id} className=\"admin-card\" style={{ opacity: q.enabled ? 1 : 0.6 }}>\n                {editingId === q.id ? (\n                  <>\n                    <textarea rows={3} value={draft.text} onChange={e => setDraft(p => ({ ...p, text: e.target.value }))} style={{ marginBottom: 10, resize: \"vertical\" }} />\n                    <input value={draft.author} onChange={e => setDraft(p => ({ ...p, author: e.target.value }))} placeholder=\"Author\" style={{ marginBottom: 10 }} />\n                    <div style={{ display: \"flex\", gap: 8 }}>\n                      <button onClick={() => saveEdit(q.id)} style={{ padding: \"6px 12px\", background: \"#238636\", border: \"none\", borderRadius: 6, color: \"#fff\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Save</button>\n                      <button onClick={() => setEditingId(null)} style={{ padding: \"6px 12px\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 6, color: \"#8b949e\", fontFamily: \"inherit\", fontSize: 11, cursor: \"pointer\" }}>Cancel</button>\n                    </div>\n                  </>\n                ) : (\n                  <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\", gap: 12 }}>\n                    <div style={{ flex: 1 }}>\n                      <div style={{ fontSize: 13, lineHeight: 1.5, fontStyle: \"italic\", marginBottom: 4 }}>{q.text}</div>\n                      {q.author && <div style={{ fontSize: 11, color: \"#8b949e\" }}>— {q.author}</div>}\n                    </div>\n                    <div style={{ display: \"flex\", gap: 6, flexShrink: 0 }}>\n                      <button onClick={() => toggleEnabled(q)} style={{ padding: \"4px 8px\", background: \"none\", border: \"1px solid rgba(255,255,255,0.2)\", borderRadius: 4, color: q.enabled ? \"#3fb950\" : \"#6e7681\", fontFamily: \"inherit\", fontSize: 10, cursor: \"pointer\" }}>\n                        {q.enabled ? \"ON\" : \"OFF\"}\n                      </button>\n                      <button onClick={() => { setEditingId(q.id); setDraft({ text: q.text, author: q.author }); }} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#8b949e\", cursor: \"pointer\" }} title=\"Edit\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\n                      </button>\n                      <button onClick={() => deleteQuote(q.id)} style={{ padding: 4, background: \"none\", border: \"none\", color: \"#f85149\", cursor: \"pointer\" }} title=\"Delete\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n                      </button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div style={{ marginTop: 24, fontSize: 11, color: \"#6e7681\", textAlign: \"center\" }}>\n          {quotes.length} quote{quotes.length !== 1 ? \"s\" : \"\"}\n        </div>\n      </div>\n    </div>\n  );\n}\n","deleted","label",[177,159],"frontend","permalink","https://www.val.town/x/all/brain/code/frontend/AdminQuotesPage.tsx","extension","actionData","errors"]
</article></body></html>