/* ============================================================
Shared UI primitives + icons
Exposed on window for cross-file use.
============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Icons (simple, consistent stroke) ---------- */
const Ic = {
shield: (p) => (),
lock: (p) => (),
check: (p) => (),
copy: (p) => (),
arrow: (p) => (),
back: (p) => (),
chevron: (p) => (),
download: (p) => (),
mail: (p) => (),
bell: (p) => (),
globe: (p) => (),
file: (p) => (),
clock: (p) => (),
plus: (p) => (),
search: (p) => (),
refresh: (p) => (),
spinner: (p) => (),
eye: (p) => (),
eyeoff: (p) => (),
zap: (p) => (),
layers: (p) => (),
logout: (p) => (),
user: (p) => (),
trash: (p) => (),
close: (p) => (),
};
/* ---------- Brand logo ---------- */
function Brand({ onClick }) {
return (
{Ic.shield({ s: 19 })}
90 Day Free SSL
);
}
/* ---------- Button ---------- */
function Btn({ kind = "primary", size, block, children, icon, iconRight, ...rest }) {
const cls = ["btn", `btn-${kind}`, size && `btn-${size}`, block && "btn-block"].filter(Boolean).join(" ");
return (
);
}
/* ---------- Badge ---------- */
function Badge({ tone = "gray", children, dot = true }) {
return {dot && }{children};
}
/* ---------- Toggle ---------- */
function Toggle({ checked, onChange }) {
return (
);
}
/* ---------- Checkbox row ---------- */
function Check({ checked, onChange, children }) {
return (
onChange(!checked)}>
{Ic.check({ s: 13 })}
{children}
);
}
/* ---------- Copy button ---------- */
function CopyBtn({ text, label = "Kopyala" }) {
const [done, setDone] = useState(false);
const copy = () => {
try { navigator.clipboard?.writeText(text); } catch (e) {}
setDone(true); setTimeout(() => setDone(false), 1400);
};
return (
);
}
/* ---------- Field ---------- */
function Field({ label, optional, hint, error, children }) {
return (
{label && }
{children}
{error ? {error} : hint ? {hint} : null}
);
}
/* ---------- Custom Select (styled dropdown) ---------- */
// Türkçe/diakritik duyarsız normalize — "tür" → "turkiye" eşleşsin diye.
function selNorm(s) {
return (s == null ? "" : "" + s).toLowerCase()
.replace(/ı/g, "i").replace(/i̇/g, "i").replace(/ş/g, "s").replace(/ç/g, "c")
.replace(/ğ/g, "g").replace(/ü/g, "u").replace(/ö/g, "o").replace(/â/g, "a").replace(/î/g, "i").replace(/û/g, "u");
}
function Select({ value, onChange, options, placeholder = "Seçiniz" }) {
const [open, setOpen] = useState(false);
const [q, setQ] = useState("");
const ref = useRef(null);
const searchRef = useRef(null);
const searchable = (options || []).length > 8; // uzun listelerde ara kutusu (örn. ülkeler)
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", h);
return () => document.removeEventListener("mousedown", h);
}, []);
useEffect(() => {
if (open) { setQ(""); if (searchable) setTimeout(() => { try { searchRef.current && searchRef.current.focus(); } catch (e) {} }, 10); }
}, [open]);
const shown = (searchable && q) ? (options || []).filter(o => selNorm(o).includes(selNorm(q))) : (options || []);
const choose = (o) => { onChange(o); setOpen(false); setQ(""); };
return (
{open && (
{searchable && (
setQ(e.target.value)}
onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); if (shown.length) choose(shown[0]); } else if (e.key === "Escape") setOpen(false); }} />
)}
{shown.map(o => (
))}
{shown.length === 0 &&
Sonuç yok
}
)}
);
}
/* ---------- Modal ---------- */
function Modal({ open, onClose, title, sub, children, footer, width = 560 }) {
useEffect(() => {
if (!open) return;
const h = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", h);
document.body.style.overflow = "hidden";
return () => { document.removeEventListener("keydown", h); document.body.style.overflow = ""; };
}, [open]);
if (!open) return null;
return (
e.stopPropagation()}>
{children}
{footer &&
{footer}
}
);
}
/* ---------- AdSlot (Google AdSense) — tüm sayfalarda kullanılır ---------- */
function AdSlot({ format = "leaderboard", label, slot }) {
const s = (typeof getSettings === "function") ? getSettings() : {};
if (!s.adsEnabled) return null;
const real = s.adsClient && s.adsClient.indexOf("ca-pub-") === 0 && s.adsClient !== "ca-pub-0000000000000000";
const dims = { leaderboard: "728 × 90", rectangle: "336 × 280", infeed: "responsive" };
useEffect(() => { if (real) { try { (window.adsbygoogle = window.adsbygoogle || []).push({}); } catch (e) {} } }, []);
if (real) {
return ;
}
return (
{label || "Reklam"} · Google Ads
{dims[format] || ""}
);
}
Object.assign(window, { Ic, Brand, Btn, Badge, Toggle, Check, CopyBtn, Field, Select, Modal, AdSlot,
useState, useEffect, useRef, useCallback });