// Shared hooks, components, and brand primitives
const { useState, useEffect, useRef, useMemo, useLayoutEffect } = React;
// ---- Brand mark (SVG replica of the isometric cube) ----
function ItaraMark({ size = 28, className = '' }) {
// Isometric cube: top face, left face, right face + magenta glow dot
return (
);
}
function Wordmark({ size = 22, color = 'currentColor' }) {
return (
itara
);
}
// ---- Hooks ----
function useLiveFeed(maxItems = 8, intervalMs = 1500) {
const [items, setItems] = useState(() => {
const seed = [];
for (let i = 0; i < maxItems; i++) seed.push({ ...window.ITARA_DATA.genActivity(), id: Math.random(), age: i });
return seed;
});
useEffect(() => {
const t = setInterval(() => {
setItems(prev => {
const next = [{ ...window.ITARA_DATA.genActivity(), id: Math.random(), age: 0 }, ...prev.map(p => ({ ...p, age: p.age + 1 }))];
return next.slice(0, maxItems);
});
}, intervalMs);
return () => clearInterval(t);
}, [maxItems, intervalMs]);
return items;
}
function useCountUp(target, duration = 1400, format = n => n.toLocaleString()) {
const [val, setVal] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const io = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const tick = now => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(target * eased);
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.2 });
if (ref.current) io.observe(ref.current);
return () => io.disconnect();
}, [target, duration]);
return [ref, format(val)];
}
function useGpuTicker(intervalMs = 2200) {
const [rows, setRows] = useState(() => window.ITARA_DATA.GPUS.map(g => ({ ...g, flash: null, livePrice: g.price })));
useEffect(() => {
const t = setInterval(() => {
setRows(prev => prev.map(r => {
if (Math.random() > 0.35) return { ...r, flash: null };
const delta = (Math.random() - 0.5) * 0.12;
const newPrice = Math.max(0.12, +(r.livePrice + delta).toFixed(2));
return { ...r, livePrice: newPrice, flash: delta > 0 ? 'up' : 'down' };
}));
}, intervalMs);
return () => clearInterval(t);
}, [intervalMs]);
return rows;
}
// ---- Global Profile Dropdown (for all pages) ----
function GlobalProfileDropdown({ user }) {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
const avatarRef = useRef(null);
const [position, setPosition] = useState({ top: 0, right: 0 });
useEffect(() => {
if (isOpen && avatarRef.current) {
const rect = avatarRef.current.getBoundingClientRect();
setPosition({
top: rect.bottom + 12,
right: window.innerWidth - rect.right
});
}
}, [isOpen, avatarRef]);
useEffect(() => {
function handleClickOutside(e) {
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
if (avatarRef.current && !avatarRef.current.contains(e.target)) {
setIsOpen(false);
}
}
}
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}
}, [isOpen]);
const handleMyListings = () => {
window.location.href = 'dashboard.html?section=listings';
setIsOpen(false);
};
const handleSignout = async () => {
try {
await window.supabase.auth.signOut();
window.location.href = 'index.html';
} catch (err) {
console.error('Signout error:', err);
}
};
return (
<>
setIsOpen(!isOpen)}
style={{
cursor: 'pointer',
width: '32px',
height: '32px',
borderRadius: '50%',
background: 'linear-gradient(135deg, #6C5CE7 0%, #FF6AC7 100%)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontWeight: '600',
fontSize: '14px',
transition: 'transform 0.2s, box-shadow 0.2s',
border: '1px solid rgba(244,242,236,0.2)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'scale(1.1)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(108, 92, 231, 0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'scale(1)';
e.currentTarget.style.boxShadow = 'none';
}}
>
{user?.user_metadata?.full_name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U'}
{isOpen && (
{user?.user_metadata?.full_name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U'}
{user?.user_metadata?.full_name || user?.email?.split('@')[0] || 'User'}
{user?.email}
)}
);
}
Object.assign(window, { ItaraMark, Wordmark, useLiveFeed, useCountUp, useGpuTicker, GlobalProfileDropdown });