// UI primitives — icons, buttons, badges, inputs, modals, cards, shared widgets
// ─── ICONS ──────────────────────────────────────────────────
// Minimal inline Lucide-style SVGs. 1.75 stroke, rounded caps.
const Icon = ({ name, size=18, className='', style={}, ...props }) => {
const p = { width:size, height:size, viewBox:'0 0 24 24', fill:'none',
stroke:'currentColor', strokeWidth:1.75, strokeLinecap:'round', strokeLinejoin:'round',
className, style, ...props };
const PATHS = {
search:<>{PATHS[name] || PATHS.settings} ;
};
// ─── LOGO ──────────────────────────────────────────────────
const Logo = ({ size=44, style={} }) =>
{icon && ;
// ─── BADGES / PILLS ───────────────────────────────────────────
const Pill = ({ tone='neutral', children, className='', icon }) =>
{icon && ;
const StatusPill = ({ status }) =>
{window.STATUS_TR[status] || status} ;
// ─── STARS ────────────────────────────────────────────────────
const Stars = ({ value, size=13, showValue=false, count }) => {
const filled = Math.round(value);
return
{[1,2,3,4,5].map(i =>
{showValue && {value.toFixed(1)} }
{count != null && ({count}) }
;
};
// ─── INPUTS ───────────────────────────────────────────────────
const Field = ({ label, hint, error, children, style }) =>
{label && {label} }
{children}
{error ? {error}
: hint && {hint} }
;
const Input = (p) => onChange&&onChange(e.target.value)} style={style}>
{placeholder && {placeholder} }
{(options||[]).map(o => typeof o === 'string'
? {o}
: {o.label} )}
;
// ─── SEGMENTED ────────────────────────────────────────────────
const Segmented = ({ options, value, onChange, size='md' }) => {
const pad = size==='sm' ? '6px 12px' : '8px 16px';
return
{options.map(o => {
const v = typeof o === 'string' ? o : o.value;
const lbl = typeof o === 'string' ? o : o.label;
const active = v === value;
return onChange&&onChange(v)}
style={{padding:pad, borderRadius:'calc(var(--r-md) - 3px)', border:0,
background: active ? 'var(--color-surface-raised)':'transparent',
color: active ? 'var(--color-ink-strong)':'var(--color-ink-dim)',
boxShadow: active ? 'var(--sh-soft)':'none',
fontSize:13, fontWeight:600, cursor:'default'}}>{lbl} ;
})}
;
};
// ─── CHIP ─────────────────────────────────────────────────────
const Chip = ({ active, children, onClick, icon }) =>
{icon && }
{children}
;
// ─── AVATAR ───────────────────────────────────────────────────
const Avatar = ({ src, name, size=36, style }) =>
{src ?
: (name||'?').split(' ').map(s=>s[0]).join('').slice(0,2).toUpperCase()}
e.stopPropagation()} className="card fade-in" style={{
width, maxWidth:'100%', maxHeight:'85vh', display:'flex', flexDirection:'column',
borderRadius:'var(--r-lg)', boxShadow:'var(--sh-elevated)'}}>
{title}
{children}
{footer &&
{footer}
}
;
};
// ─── TOAST ────────────────────────────────────────────────────
const useToasts = () => {
const [list, setList] = React.useState([]);
const push = (msg, tone='success') => {
const id = Math.random();
setList(l => [...l, {id, msg, tone}]);
setTimeout(()=>setList(l => l.filter(t=>t.id!==id)), 4000);
};
const el =
{list.map(t =>
)}
{ e.currentTarget.style.transform='scale(1.15)'; setTimeout(()=>{try{e.currentTarget.style.transform=''}catch{}}, 180); }}>
;
const catChip = {l.cat} ;
if (variant === 'wide') {
return
{catChip}{heart}
{l.title}
{l.dest} · {l.duration} · maks {l.maxGroup||12} kişi
{l.price.toLocaleString('tr-TR')} ₺
· kişi başı
;
}
if (variant === 'minimal') {
return
{heart}
{l.cat} · {l.dest}
{l.title}
{l.price.toLocaleString('tr-TR')} ₺
;
}
// standard
return
{catChip}{heart}
{l.title}
{l.dest} · {l.duration}
{l.origPrice && {l.origPrice.toLocaleString('tr-TR')} ₺ }
{l.price.toLocaleString('tr-TR')} ₺
;
};
// ─── CHARTS ──────────────────────────────────────────────────
const genSpark = (fn, n=20) => Array.from({length:n}, (_,i) => Math.max(0, fn(i)));
const Sparkline = ({ values, width=100, height=28, color='var(--color-brand-500)' }) => {
if (!values || !values.length) return null;
const max = Math.max(...values), min = Math.min(...values);
const range = max - min || 1;
const pts = values.map((v,i) => {
const x = (i / (values.length-1)) * width;
const y = height - ((v - min) / range) * height;
return `${x},${y}`;
}).join(' ');
return
;
};
const BarChart = ({ data, height=160, color='var(--color-brand-500)' }) => {
if (!data || !data.length) return null;
const max = Math.max(...data);
return ;
};
// ─── TABLE ──────────────────────────────────────────────────
const Table = ({ columns, rows }) => (
{columns.map((c,i) => {c.head} )}
{rows.map((r,i) =>
{columns.map((c,j) => {r[c.key]} )}
)}
);
// ─── BREADCRUMBS ──────────────────────────────────────────────
const Breadcrumbs = ({ items = [], dark = false }) => (
{items.map((it, i) => {
const last = i === items.length - 1;
const color = dark ? (last ? '#fff' : 'rgba(255,255,255,.72)') : (last ? 'var(--color-ink-900)' : 'var(--color-ink-dim)');
return (
{it.onClick && !last
? {it.label}
: {it.label} }
{!last && › }
);
})}
);
Object.assign(window, { Icon, Logo, Btn, Pill, StatusPill, Stars, Field, Input, TextArea, Select,
Segmented, Chip, Avatar, Modal, useToasts, ListingCard, useFavorites,
Sparkline, BarChart, Table, genSpark, Breadcrumbs });
;
// ─── BUTTONS ──────────────────────────────────────────────────
const Btn = ({ variant='primary', size='md', icon, iconRight, children, className='', ...p }) =>
;
// ─── BADGES / PILLS ───────────────────────────────────────────
const Pill = ({ tone='neutral', children, className='', icon }) =>
{icon &&