// shared.jsx — small shared building blocks
const { useState, useEffect, useRef, useCallback, useMemo } = React;
// === Brand colors used inline ===
const COLORS = {
navy: '#1f3a5f',
navyDeep: '#16294a',
gold: '#b89968',
bone: '#f6f2ec',
paper: '#faf8f4'
};
// === Inline SVG logo (uses currentColor) ===
function RigginsLogo({ color = '#1f3a5f', height = 84 }) {
// Use the user-supplied logo PNG directly — white variant for dark backgrounds
const isWhite = color === '#fff' || color === '#ffffff' || color === 'white';
const src = isWhite ? 'assets/riggins-logo-white.png' : 'assets/riggins-logo.png';
return (
);
}
// === Navigation ===
function Nav({ page, onNavigate, transparent }) {
const [solid, setSolid] = useState(!transparent);
const [drawerOpen, setDrawerOpen] = useState(false);
useEffect(() => {
if (!transparent) {
setSolid(true);
return;
}
const onScroll = () => setSolid(window.scrollY > 80);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, [transparent]);
useEffect(() => {
document.body.classList.toggle('drawer-open', drawerOpen);
return () => document.body.classList.remove('drawer-open');
}, [drawerOpen]);
const go = (id) => {
setDrawerOpen(false);
onNavigate(id);
};
return (
);
}
// === Footer ===
function Footer({ onNavigate }) {
const SocialIcon = ({ d }) => (
);
return (
);
}
// === Reveal-on-scroll wrapper ===
function Reveal({ children, delay = 0, as = 'div', ...rest }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setSeen(true);
io.disconnect();
}
});
},
{ threshold: 0.15 }
);
io.observe(el);
return () => io.disconnect();
}, []);
const Tag = as;
return (
{children}
);
}
// Project + image catalog (uses Wexford photo for everything else falls back to placeholder gradients)
const STOCK = {
wexford: 'assets/wexford.png'
};
// SVG placeholder generator — striped tone-on-tone with a tag
function placeholder(label, hue = 215, lit = 35) {
const svg = `
`;
return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
}
function projectGallery(slug, count) {
const arr = [];
for (let i = 1; i <= count; i++) {
arr.push(`assets/projects/${slug}/${String(i).padStart(2, '0')}.jpg`);
}
return arr;
}
const PROJECTS = [
{ id: 'heathrow', name: 'Heathrow Estate', location: 'Heathrow', height: 1.15, gallery: projectGallery('heathrow', 58) },
{ id: 'thomas', name: 'Modern Farmhouse', location: 'Wexford', height: 1.0, gallery: projectGallery('thomas', 19) },
{ id: 'martin', name: 'Wexford Estate', location: 'Wexford', height: 1.3, gallery: projectGallery('martin', 23) },
{ id: 'parade-2025', name: '2025 Parade Home', location: 'Wexford', height: 1.1, gallery: projectGallery('2025-parade-1', 76), coverIdx: 19 },
{ id: 'old-oak-estates', name: 'Old Oak Estates', location: 'Old Oak Estates', height: 1.05, gallery: projectGallery('old-oak-estates', 19) },
{ id: 'flint-rock', name: 'Flint Rock Estate', location: 'Flint Rock', height: 1.2, gallery: projectGallery('flint-rock', 25) },
{ id: 'rossidis', name: 'Modern Custom Home', location: 'Gainesville, FL', height: 1.25, gallery: projectGallery('rossidis', 12), coverIdx: 5 },
{ id: 'wilds-plantation', name: 'Wilds Plantation Custom', location: 'Wilds Plantation', height: 1.1, gallery: projectGallery('wilds-plantation', 32), coverIdx: 27 },
{ id: 'dennis', name: 'Wexford Cottage', location: 'Wexford', height: 0.95, gallery: projectGallery('dennis', 9) },
{ id: 'heritage-modern', name: 'Heritage Estate', location: 'Florida', height: 1.15, gallery: projectGallery('heritage-modern', 25), coverIdx: 2 },
{ id: 'caputo', name: 'Custom Home at Wexford', location: 'Wexford', height: 1.15, gallery: projectGallery('caputo', 16) },
{ id: 'greystone', name: 'Greystone Custom', location: 'Greystone', height: 1.0, gallery: projectGallery('greystone', 10), coverIdx: 4 },
{ id: 'shaio', name: 'Hill Country Retreat', location: 'Wimberley', height: 1.2, gallery: projectGallery('shaio', 11) },
{ id: 'nappo', name: 'Craftsman Custom', location: 'Wexford', height: 1.0, gallery: projectGallery('nappo', 9) },
{ id: 'lakeside', name: 'Farmhouse Custom', location: 'Florida', height: 1.1, gallery: projectGallery('lakeside', 25), coverIdx: 1 },
{ id: 'riggins', name: 'Coastal Modern', location: 'Wexford', height: 1.05, gallery: projectGallery('riggins', 10) },
{ id: 'old-oak', name: 'Old Oak Custom', location: 'Gainesville, FL', height: 1.1, gallery: projectGallery('riggins-old-oak', 8), coverIdx: 2 },
{ id: 'ratliff', name: 'California Custom', location: 'California', height: 1.25, gallery: projectGallery('ratliff', 12) },
{ id: 'merricks', name: 'Wimberley Estate', location: 'Gainesville, FL', height: 1.1, gallery: projectGallery('merricks', 10), coverIdx: 2 },
].map((p) => ({ ...p, cover: p.gallery[p.coverIdx || 0] }));
// expose to global so other Babel scripts can use
Object.assign(window, {
React,
COLORS,
RigginsLogo,
Nav,
Footer,
Reveal,
PROJECTS,
placeholder,
STOCK
});