done last commit before merging - fixed media URLSs S3

frontend/src/components/common/TopBanner.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from "react";
+import { FiAlertCircle, FiMail } from "react-icons/fi";
+import { useAuth } from "@/hooks/useAuth";
+import { privateApi } from "@/api/privateClient";
+
+export const BANNER_H = "40px";
+
+export default function TopBanner() {
+  const { user, isLoading } = useAuth();
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [cooldown, setCooldown] = useState(0);
+
+  const show = !isLoading && !!user && user.email_verified === false;
+
+  useEffect(() => {
+    document.documentElement.style.setProperty("--top-banner-h", show ? BANNER_H : "0px");
+  }, [show]);
+
+  useEffect(() => {
+    if (cooldown <= 0) return;
+    const t = setTimeout(() => setCooldown((s) => s - 1), 1000);
+    return () => clearTimeout(t);
+  }, [cooldown]);
+
+  async function handleResend() {
+    setSending(true);
+    try {
+      await privateApi.post("/api/account/resend-verification/");
+      setSent(true);
+    } catch (err: any) {
+      const secs = err?.response?.data?.seconds_remaining;
+      if (secs) setCooldown(secs);
+    } finally {
+      setSending(false);
+    }
+  }
+
+  if (!show) return null;
+
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className="fixed top-0 left-0 right-0 z-[200] flex items-center justify-center gap-2.5 px-12 text-amber-200 text-[0.8rem]"
+      style={{
+        height: BANNER_H,
+        background: "color-mix(in hsl, #92400e, var(--c-background) 15%)",
+        borderBottom: "1px solid color-mix(in hsl, #f59e0b, transparent 55%)",
+      }}
+    >
+      <FiAlertCircle size={14} className="shrink-0 text-amber-400" />
+      <span>Tvůj e-mail ještě není ověřen.</span>
+
+      {sent ? (
+        <span className="text-emerald-300 font-semibold">E-mail odeslán!</span>
+      ) : (
+        <button
+          onClick={handleResend}
+          disabled={sending || cooldown > 0}
+          className="inline-flex items-center gap-1.5 rounded-full border border-amber-400/55 bg-amber-400/25 px-2.5 py-0.5 text-[0.75rem] font-semibold text-amber-200 transition-opacity disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <FiMail size={11} />
+          {sending ? "Odesílám…" : cooldown > 0 ? `Počkej ${cooldown}s` : "Odeslat znovu"}
+        </button>
+      )}
+    </div>
+  );
+}