// components.jsx — shared UI for "hire a human"
const { useState } = React;
/* ---------- icons (inline SVG, 1.6 stroke) ---------- */
const IconPaths = {
box: <>,
search: <>,
mega: <>,
camera: <>,
ticket: <>,
home: <>,
star: <>,
pin: <>,
clock: <>,
users: <>,
check: <>,
bolt: <>,
arrow: <>,
shield: <>,
chat: <>,
bell: <>,
plus: <>,
heart: <>,
back: <>,
doc: <>,
wallet: <>,
settings:<>,
logout: <>,
upload: <>,
phone: <>,
mail: <>,
edit: <>,
eye: <>,
image: <>,
ban: <>,
grid: <>,
dollar: <>,
link: <>,
};
function Icon({ name, size = 20, stroke = 1.7, style, fill = false }) {
return (
);
}
/* ---------- avatar ---------- */
function Avatar({ name, size = 40, ring, src }) {
const a = avatarFor(name);
const ringShadow = ring ? "0 0 0 2px var(--paper), 0 0 0 4px " + a.bg : "none";
if (src) {
return (
);
}
return (
{a.initials}
);
}
/* ---------- button ---------- */
function Button({ children, variant = "primary", size = "md", icon, iconRight, onClick, type, disabled, full, style }) {
const [h, setH] = useState(false);
const sizes = {
sm: { padding: "8px 14px", fontSize: 14, gap: 7 },
md: { padding: "12px 20px", fontSize: 15.5, gap: 9 },
lg: { padding: "16px 26px", fontSize: 17, gap: 10 },
}[size];
const variants = {
primary: { background: h ? "var(--clay-dk)" : "var(--clay)", color: "#fff", border: "1px solid transparent" },
dark: { background: h ? "#000" : "var(--ink)", color: "var(--paper)", border: "1px solid transparent" },
ghost: { background: h ? "var(--ink-3)" : "transparent", color: "var(--ink)", border: "1px solid var(--line)" },
soft: { background: h ? "#efe7d8" : "var(--ink-3)", color: "var(--ink)", border: "1px solid transparent" },
green: { background: h ? "#19684799" : "transparent", color: "var(--green)", border: "1px solid var(--green)" },
}[variant];
return (
);
}
/* ---------- small bits ---------- */
function Stars({ value, size = 13 }) {
return (
{value.toFixed(1)}
);
}
function PayTag({ pay, size = "md" }) {
const big = size === "lg";
if (pay.kind === "favor") {
return (
Favor
);
}
const boosted = pay.originalAmount && pay.originalAmount < pay.amount;
return (
{boosted && (
{pay.cur}{pay.originalAmount.toLocaleString()}
)}
{pay.cur}{pay.amount.toLocaleString()}fixed
{boosted && (
Boosted
)}
);
}
function CatChip({ cat, active, onClick, small }) {
const c = CAT[cat];
return (
);
}
function VerifiedTick({ size = 15 }) {
return (
);
}
/* ---------- confetti ---------- */
function Confetti({ active }) {
const [particles, setParticles] = React.useState([]);
React.useEffect(() => {
if (active) {
const colors = ["#DC4B2E", "#1F7A55", "#E8A33D", "#2E7CF6", "#F4EEE3"];
const p = Array.from({ length: 100 }).map((_, i) => ({
id: i,
x: Math.random() * 100,
y: -10 - Math.random() * 20,
r: Math.random() * 360,
vx: (Math.random() - 0.5) * 2,
vy: 2 + Math.random() * 3,
vr: (Math.random() - 0.5) * 10,
color: colors[Math.floor(Math.random() * colors.length)],
size: 5 + Math.random() * 8
}));
setParticles(p);
const timer = setInterval(() => {
setParticles(prev => {
let allFallen = true;
const next = prev.map(pt => {
const ny = pt.y + pt.vy;
if (ny < 120) allFallen = false;
return {
...pt,
x: pt.x + pt.vx,
y: ny,
r: pt.r + pt.vr,
vy: pt.vy + 0.05 // gravity
};
});
if (allFallen) clearInterval(timer);
return next;
});
}, 16);
return () => clearInterval(timer);
} else {
setParticles([]);
}
}, [active]);
if (!active || particles.length === 0) return null;
return (
{particles.map(p => (
))}