/* Shared components for the Sevil Dolmacı Gallery prototype */
const { useState, useEffect, useMemo, useRef } = React;
// ---------------- Router (hash) ----------------
function useHashRoute() {
const [hash, setHash] = useState(window.location.hash || "#/");
useEffect(() => {
const onChange = () => {
setHash(window.location.hash || "#/");
window.scrollTo({ top: 0, behavior: "instant" });
};
window.addEventListener("hashchange", onChange);
return () => window.removeEventListener("hashchange", onChange);
}, []);
const parts = hash.replace(/^#\//, "").split("/").filter(Boolean);
return { hash, route: parts[0] || "home", sub: parts[1] };
}
function Link({ to, children, className, ...rest }) {
return (
{
// allow modifier-clicks
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
}}
{...rest}
>
{children}
);
}
// ---------------- Icons ----------------
const Icon = {
Arrow: (p) => (
),
ArrowSmall: (p) => (
),
Search: (p) => (
),
Plus: (p) => (
),
};
// ---------------- Top Bar ----------------
function TopBar() {
const [lang, setLang] = useState("EN");
return (
Istanbul 10:30 — 18:00
·
Dubai 10:00 — 19:00
{["EN", "TR", "AR"].map((l, i) => (
{i > 0 && /}
))}
);
}
// ---------------- Nav ----------------
function Nav({ route }) {
const items = [
["exhibitions", "Exhibitions"],
["artists", "Artists"],
["publications", "Publications"],
["fairs", "Fairs"],
["press", "Press"],
["about", "About"],
["contact", "Contact"],
];
return (
);
}
// ---------------- Footer ----------------
function Footer() {
return (
);
}
// ---------------- Image with credit ----------------
function ImgFig({ src, alt, credit, className, aspect = "4x3", zoom = true }) {
return (
{src ?

: null}
{credit &&
{credit}}
);
}
// ---------------- Credit line (block) ----------------
function CreditLine({ artist, title, year, medium, courtesy }) {
return (
{artist}
{title ? <>, {title}> : null}
{year ? <>, {year}> : null}
{medium ? <>. {medium}> : null}
{courtesy ? <>. {courtesy}> : <>. Courtesy of the artist and Sevil Dolmacı Gallery.>}
);
}
// ---------------- Exhibition card ----------------
function ExhibitionCard({ ex, large }) {
return (
{ex.status === "current" ? Now on view : null}
{ex.city} · {ex.space}
{ex.title}
{ex.curator}
{ex.start} — {ex.end}
);
}
// ---------------- Section Head ----------------
function SectionHead({ kicker, title, rightLabel, rightHref }) {
return (
{kicker &&
{kicker}
}
{title}
{rightLabel && (
{rightLabel}
)}
);
}
// ---------------- Publication Card ----------------
function PublicationCard({ pub }) {
return (
{pub.title}
Sevil Dolmacı Editions · {pub.year}
{pub.title}
{pub.year} · {pub.pages} pp
);
}
// ---------------- Marquee ----------------
function ArtistMarquee({ artists }) {
const list = useMemo(() => [...artists, ...artists, ...artists].map(a => a.name), [artists]);
return (
{list.map((n, i) => (
{n} ◆
))}
);
}
Object.assign(window, {
useHashRoute, Link, TopBar, Nav, Footer, ImgFig, CreditLine, ExhibitionCard,
SectionHead, PublicationCard, ArtistMarquee, Icon,
});