// Small reusable components for OnlySuomiHaku.
const { useState, useEffect, useMemo, useRef, useCallback } = React;
/* ---------- Icons ---------- */
const Icon = {
search: (props) => (
),
arrow: (props) => (
),
spark: (props) => (
),
pin: (props) => (
),
check: (props) => (
),
tag: (props) => (
),
shield: (props) => (
),
bolt: (props) => (
),
pulse: (props) => (
),
instagram: (props) => (
),
external: (props) => (
),
};
/* ---------- Brand mark ---------- */
function BrandMark({ size = 28 }) {
// Original mark: a stylised compass/north-star — nordic, search-y. Not derivative.
return (
OnlySuomiHaku
);
}
/* ---------- Count-up number ---------- */
function CountUp({ value, duration = 1400, format = (n) => n.toLocaleString("fi-FI") }) {
const [n, setN] = useState(0);
const startRef = useRef(null);
const rafRef = useRef(0);
useEffect(() => {
cancelAnimationFrame(rafRef.current);
startRef.current = null;
const step = (t) => {
if (startRef.current === null) startRef.current = t;
const p = Math.min(1, (t - startRef.current) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.round(value * eased));
if (p < 1) rafRef.current = requestAnimationFrame(step);
};
rafRef.current = requestAnimationFrame(step);
return () => cancelAnimationFrame(rafRef.current);
}, [value, duration]);
return {format(n)};
}
/* ---------- Live ticker dot ---------- */
function LiveDot() {
return (
);
}
/* ---------- Stylised silhouette avatar (placeholder, original) ---------- */
function SilhouetteAvatar({ seed = 0, size = 28, style }) {
// Generate a small abstract geometric "person" silhouette from seed — no real imagery.
const palettes = [
["#cfdcef", "#3a6ea8"],
["#e3d7f0", "#6b5aa0"],
["#f0d7d7", "#a85a5a"],
["#d7eee2", "#3f8a72"],
["#efe2cf", "#a8763a"],
["#d7e6f0", "#4a7d99"],
];
const [bg, fg] = palettes[Math.abs(seed) % palettes.length];
return (
);
}
/* ---------- Portrait (full-body) silhouette placeholder ---------- */
function PortraitFigure({ seed = 0, w = 120, h = 200, fg, bg, style }) {
return (
);
}
/* ---------- Chip / pill ---------- */
function Chip({ children, onClick, count, trend, hot }) {
const [hover, setHover] = useState(false);
return (
);
}
function formatCount(n) {
if (n >= 1000) {
const k = n / 1000;
return (k >= 10 ? Math.round(k) : k.toFixed(1).replace(/\.0$/, "")) + "k";
}
return String(n);
}
Object.assign(window, {
Icon, BrandMark, CountUp, LiveDot, SilhouetteAvatar, PortraitFigure, Chip, formatCount,
});