// ui.jsx — shared primitives: icons, Logo, Field, Modal, Toast, Reveal, KPI, etc.
// ---------- icon set (lucide-style stroke icons) ----------
const IP = { fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
function Svg({ children, s = 22, ...p }) {
return ;
}
const Icon = {
bulb: (p) => ,
book: (p) => ,
award: (p) => ,
cpu: (p) => ,
grid: (p) => ,
chart: (p) => ,
arrow: (p) => ,
arrowL: (p) => ,
check: (p) => ,
clock: (p) => ,
user: (p) => ,
users: (p) => ,
mail: (p) => ,
phone: (p) => ,
pin: (p) => ,
pen: (p) => ,
trash: (p) => ,
plus: (p) => ,
x: (p) => ,
sliders:(p) => ,
globe: (p) => ,
menu: (p) => ,
image: (p) => ,
spark: (p) => ,
shield: (p) => ,
rocket: (p) => ,
play: (p) => ,
hash: (p) => ,
chevR: (p) => ,
flask: (p) => ,
wa: (p) => ,
target: (p) => ,
layers: (p) => ,
lock: (p) => ,
eye: (p) => ,
};
// ---------- Logo ----------
function LogoMark({ size = 40 }) {
const id = React.useMemo(() => 'lm' + Math.random().toString(36).slice(2, 6), []);
return (
);
}
function Logo({ onClick }) {
return (
{e.preventDefault(); onClick&&onClick();}} aria-label="IBTIKAR">
);
}
function LogoText() {
const { t } = useI18n();
return (
{t('brand')}.health
{t('brand_sub')}
);
}
// ---------- Field ----------
function Field({ label, required, hint, children }) {
const { t } = useI18n();
return (
{children}
{hint && {hint}}
);
}
// ---------- Placeholder image ----------
function PH({ h = 200, label, icon = "image", style }) {
const I = Icon[icon] || Icon.image;
return (
{label && {label}}
);
}
// ---------- Modal ----------
function Modal({ open, onClose, children, max = 560 }) {
React.useEffect(() => {
if (!open) return;
const h = (e) => e.key === 'Escape' && onClose();
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [open]);
if (!open) return null;
return (
e.stopPropagation()}>
{children}
);
}
// ---------- Toast ----------
const ToastCtx = React.createContext(() => {});
function ToastHost({ children }) {
const [toasts, setToasts] = React.useState([]);
const push = React.useCallback((msg) => {
const id = Math.random().toString(36).slice(2);
setToasts((t) => [...t, { id, msg }]);
setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3200);
}, []);
return (
{children}
{toasts.map((x) => (
{x.msg}
))}
{chips.map((c, i) => {
const I = Icon[c.ic];
return (
{c.label}
);
})}
);
}
// ---------- file attachments (PDF / Word / images / video) ----------
const ATTACH_MAX = 3 * 1024 * 1024; // 2.9MB per file — keeps browser storage healthy
function fileKind(type, name) {
const n = (name || '').toLowerCase();
if ((type || '').startsWith('image/')) return 'image';
if ((type || '').startsWith('video/')) return 'video';
if (/pdf/.test(type) || n.endsWith('.pdf')) return 'pdf';
if (/word|document/.test(type) || /\.(docx?|rtf)$/.test(n)) return 'doc';
return 'file';
}
const ATTACH_ICON = { image: 'image', video: 'play', pdf: 'book', doc: 'pen', file: 'layers' };
function humanSize(b) {
if (b < 1024) return b + ' B';
if (b < 1024 * 1024) return Math.round(b / 1024) + ' KB';
return (b / 1048576).toFixed(1) + ' MB';
}
function AttachField({ label, hint, value = [], onChange, t, L }) {
const inputRef = React.useRef(null);
const [err, setErr] = React.useState('');
const pick = (e) => {
const files = [...(e.target.files || [])];
setErr('');
const reads = files.map(f => new Promise((res) => {
if (f.size > ATTACH_MAX) { res({ tooBig: f.name }); return; }
const fr = new FileReader();
fr.onload = () => res({ id: 'a' + Date.now() + Math.random().toString(36).slice(2, 6), name: f.name, type: f.type, size: f.size, kind: fileKind(f.type, f.name), data: fr.result });
fr.onerror = () => res(null);
fr.readAsDataURL(f);
}));
Promise.all(reads).then(items => {
const big = items.filter(x => x && x.tooBig).map(x => x.tooBig);
const ok = items.filter(x => x && !x.tooBig);
if (big.length) setErr(L({ ar: `تجاوز الحجم المسموح (٣ ميجابايت): ${big.join('، ')}`, en: `Over the 3MB limit: ${big.join(', ')}` }));
if (ok.length) onChange([...(value || []), ...ok]);
if (inputRef.current) inputRef.current.value = '';
});
};
const remove = (id) => onChange((value || []).filter(a => a.id !== id));
return (
{err &&
{err}}
{hint &&
{hint}}
{(value || []).length > 0 && (
{value.map(a => {
const I = Icon[ATTACH_ICON[a.kind] || 'layers'];
return (
{a.name}
{humanSize(a.size)}
);
})}
)}
);
}
// read-only list of attachments (public/course detail views)
function AttachList({ items, L, compact }) {
if (!items || !items.length) return null;
return (
);
}
// ---------- clipboard (works in sandboxed iframes / non-secure contexts too) ----------
function copyText(text) {
const s = String(text == null ? '' : text);
try { if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(s).catch(() => fallbackCopy(s)); return true; } } catch (e) {}
return fallbackCopy(s);
}
function fallbackCopy(s) {
try {
const ta = document.createElement('textarea');
ta.value = s;
ta.setAttribute('readonly', '');
ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
document.body.appendChild(ta);
ta.select();
ta.setSelectionRange(0, s.length);
const ok = document.execCommand('copy');
ta.remove();
return ok;
} catch (e) { return false; }
}
// ---------- section heading ----------
function Head({ eyebrow, title, sub, center, icon }) {
const I = icon ? Icon[icon] : null;
return (
{eyebrow &&
{I && }{eyebrow}
}
{title}
{sub &&
{sub}
}