From 09f964451d7d92e9891430ec4595c1276d486aab Mon Sep 17 00:00:00 2001
From: zwlucas <lucas.fariamo08@gmail.com>
Date: Fri, 5 Jun 2026 17:52:54 -0300
Subject: feat: upload

Signed-off-by: zwlucas <lucas.fariamo08@gmail.com>
---
 src/components/Toasts/Toasts.tsx | 72 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/components/Toasts/Toasts.tsx

(limited to 'src/components/Toasts/Toasts.tsx')

diff --git a/src/components/Toasts/Toasts.tsx b/src/components/Toasts/Toasts.tsx
new file mode 100644
index 0000000..ef3aa0d
--- /dev/null
+++ b/src/components/Toasts/Toasts.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react'
+import { useToastStore, type ToastType } from '@/stores/useToastStore'
+
+const typeColors: Record<ToastType, string> = {
+  success: 'var(--color-semantic-success)',
+  error: 'var(--color-semantic-error)',
+  info: 'var(--color-semantic-info)',
+  warning: 'var(--color-semantic-warning)',
+}
+
+const typeIcons: Record<ToastType, string> = {
+  success: '✓',
+  error: '✗',
+  info: 'i',
+  warning: '!',
+}
+
+function ToastItem({ id, message, type }: { id: string; message: string; type: ToastType }) {
+  const [exiting, setExiting] = useState(false)
+  const removeToast = useToastStore((s) => s.removeToast)
+  const color = typeColors[type]
+
+  useEffect(() => {
+    const exitTimer = setTimeout(() => setExiting(true), 3000)
+    return () => clearTimeout(exitTimer)
+  }, [])
+
+  return (
+    <div
+      className={`flex items-start gap-2.5 min-w-[280px] max-w-[400px] px-3 py-2.5 rounded-lg shadow-glass-lg toast${exiting ? ' toast-exit' : ''}`}
+      style={{
+        backgroundColor: 'var(--color-panel-bg)',
+        border: '1px solid var(--color-panel-border)',
+        borderLeft: `3px solid ${color}`,
+      }}
+      role="alert"
+      onAnimationEnd={() => { if (exiting) removeToast(id) }}
+    >
+      <span
+        className="flex items-center justify-center w-[18px] h-[18px] mt-[1px] rounded-full text-[10px] font-bold shrink-0"
+        style={{ backgroundColor: color, color: '#fff' }}
+      >
+        {typeIcons[type]}
+      </span>
+      <span className="flex-1 text-ui-sm text-text-primary leading-[1.4]">{message}</span>
+      <button
+        className="shrink-0 text-text-muted hover:text-text-primary transition-colors duration-fast"
+        onClick={() => removeToast(id)}
+      >
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+          <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+export default function Toasts() {
+  const toasts = useToastStore((s) => s.toasts)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-2 pointer-events-none">
+      {toasts.map((t) => (
+        <div key={t.id} className="pointer-events-auto">
+          <ToastItem id={t.id} message={t.message} type={t.type} />
+        </div>
+      ))}
+    </div>
+  )
+}
-- 
cgit v1.2.3