feat: add app UI primitives (Button, Badge, FieldRow, Toast)

2026-06-24 23:36:19 +02:00
parent 5658e4c3b8
commit 5695df6048
4 changed files with 220 additions and 0 deletions
--- a/app/src/components/ui/Toast.tsx
+++ b/app/src/components/ui/Toast.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
+
+const ToastCtx = createContext<(msg: string) => void>(() => {})
+
+export function useToast() {
+  return useContext(ToastCtx)
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [msg, setMsg] = useState('')
+
+  const show = useCallback((m: string) => {
+    setMsg(m)
+    setTimeout(() => setMsg(''), 2800)
+  }, [])
+
+  return (
+    <ToastCtx.Provider value={show}>
+      {children}
+      {msg && (
+        <div
+          style={{
+            position: 'fixed',
+            left: '50%',
+            bottom: 30,
+            transform: 'translateX(-50%)',
+            zIndex: 90,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            padding: '12px 18px',
+            background: 'var(--bg2)',
+            border: '1px solid var(--accBd)',
+            borderRadius: 12,
+            boxShadow: '0 16px 40px rgba(0,0,0,.55)',
+            fontSize: 13,
+            fontWeight: 500,
+            animation: 'scToast .22s ease',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          <span
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              background: 'var(--acc2)',
+              boxShadow: '0 0 8px var(--acc2)',
+              flexShrink: 0,
+            }}
+          />
+          {msg}
+        </div>
+      )}
+    </ToastCtx.Provider>
+  )
+}