/* motifs.jsx — small reusable SVG marks for La Signora */
// ── Maiolica tile background (used both inline and as CSS var) ──
// Geometric 4-fold symmetric tile, simple shapes only.
const TILE_SVG = `
`;
// Inject tile background as a CSS variable so any element can pick it up
document.documentElement.style.setProperty(
'--tile-bg',
`url("data:image/svg+xml;utf8,${TILE_SVG.replace(/\n\s*/g, '')}")`
);
// ── Decorative divider — three diamonds with hairlines ──
function Divider({ style }) {
return (
);
}
// ── Arancino "stamp" — circular maiolica-style emblem in flavor color ──
// Three palettes for the three flavors.
function ArancinoStamp({ palette }) {
const [outer, inner, dot] = palette;
return (
);
}
// ── Lemon icon — circle with a hint of leaf ──
function LemonIcon({ size = 56, color = "var(--saffron)" }) {
return (
);
}
// ── Cone / triangle simple mark ──
function TriangleMark({ size = 24, color = "currentColor" }) {
return (
);
}
// ── Pin icon for location ──
function PinIcon({ size = 22, color = "currentColor" }) {
return (
);
}
function ClockIcon({ size = 22, color = "currentColor" }) {
return (
);
}
function PhoneIcon({ size = 22, color = "currentColor" }) {
return (
);
}
function IgIcon({ size = 18, color = "currentColor" }) {
return (
);
}
function FbIcon({ size = 18, color = "currentColor" }) {
return (
);
}
function TikTokIcon({ size = 18, color = "currentColor" }) {
return (
);
}
function MailIcon({ size = 18, color = "currentColor" }) {
return (
);
}
// ── External-link arrow — matches the site's thin-line icon set ──
function ExternalArrowIcon({ size = 13, color = "currentColor" }) {
return (
);
}
// ── Tap/ripple icon — hints that a card is interactive ──
function TapIcon({ size = 20, color = "currentColor" }) {
return (
);
}
// ── Cross-section of an arancino — concentric "blobs" with callout lines ──
// Pure concentric circles + a hand-drawn-feeling outer wobble done with stroke-dasharray.
function ArancinoCrossSection() {
return (
);
}
// ── Stylized illustrated maps — one scene per location ──
// Each scene is a hand-composed SVG that roughly reflects the real area
// (street axis, landmark park, nearest water). They are illustrations,
// not cartography.
function MapChrome({ tag, region, pin, children }) {
return (
);
}
function MapCart() {
// St. Johns, Portland — Cathedral Park sits SE of the cart (six blocks).
// Willamette curls along the south + east edge; St. Johns Bridge crosses
// from the south-west. Pin is centered in the frame.
const river = "url(#river-PORTLANDOR)";
return (
{/* Willamette River — fills the south-east corner */}
{/* Cathedral Park — south-east of pin */}
CATHEDRALPARK
{/* streets */}
{/* street labels — kept away from pin block */}
N. St. Louise Ave.N. BurlingtonWillamette River
{/* St. Johns Bridge — arc crossing the river at south-west */}
St. Johns Bridge
);
}
function MapMarket() {
// Downtown Vancouver — Esther Short Park bordered by W 6th/8th and Columbia/Esther.
// Columbia River runs east-west along the south. I-5 is the eastern edge.
const river = "url(#river-VANCOUVERWA)";
return (
{/* Columbia River — horizontal band along the bottom */}
{/* dense downtown grid — numbered streets W→E, named streets N→S */}
{/* horizontal: W 5th .. W 9th */}
{/* vertical: Esther, Columbia, Washington */}
{/* I-5 — thick highway band on the right with dashed center stripe */}
Interstate 5
{/* Esther Short Park — a downtown block, between W 6th–8th and Esther/Columbia */}
ESTHER SHORTPARK
{/* street labels */}
Esther St.Columbia St.W 5th St.W 6th St.W 8th St.Columbia River
);
}
function MapCafe() {
// Downtown Gresham — NE Burnside is the major east-west thoroughfare.
// Main City Park is south-east of downtown. Mt Hood looms east.
return (
{/* Mt Hood silhouette — distant east */}
Mt Hood
{/* perpendicular side streets — thin grid */}
{/* NE Burnside Rd — thick horizontal arterial */}
NE Burnside Rd.
{/* Main City Park — south-east of downtown */}
MAIN CITY PARK
{/* Johnson Creek — meandering thin line near bottom */}
Johnson Creek
{/* street labels — perpendicular to Burnside */}
NE RobertsNE 4th St.
);
}
function StylizedMap({ data }) {
const scene = data?.scene || 'cart';
if (scene === 'market') return ;
if (scene === 'cafe') return ;
return ;
}
Object.assign(window, {
Divider, ArancinoStamp, LemonIcon, TriangleMark, PinIcon, ClockIcon, PhoneIcon, IgIcon,
ArancinoCrossSection, StylizedMap
});