// Shared constants, colors, patterns, and small UI components for MyMarian
const BRAND = {
primary: '#0d5c3a',
dark: '#1a3a2a',
gold: '#D4AF37',
cream: '#FDF8E7',
surface: '#ffffff',
night: '#071f14',
text: '#1a1a1a',
muted: '#6b7280',
border: '#e5e7eb',
};
// Ethiopian cross SVG pattern (Lalibela motif at low opacity)
const EthiopianPattern = ({ opacity = 0.06, color = BRAND.gold }) => (
);
// Tilet textile pattern
const TiletPattern = ({ opacity = 0.05, color = BRAND.primary }) => (
);
// Section divider with pattern
const PatternDivider = ({ dark = false }) => (
);
// Grade badge
const GradeBadge = ({ grade, active, onClick }) => (
);
// Subject color map
const SUBJECT_COLORS = {
Mathematics: '#1e6fa3',
Physics: '#7b3fa0',
Biology: '#2e8b57',
Chemistry: '#c0392b',
English: '#d4821a',
History: '#8b6914',
Amharic: '#0d5c3a',
Geography: '#1a7a6e',
Economics: '#b8860b',
};
// Progress bar
const ProgressBar = ({ value, max = 100, color = BRAND.primary, height = 7 }) => (
);
// Avatar placeholder
const Avatar = ({ name, size = 36, bg = BRAND.primary }) => {
const initials = name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
return (
{initials}
);
};
// Star rating
const Stars = ({ rating = 4.5 }) => {
const stars = [];
for (let i = 1; i <= 5; i++) {
stars.push(
★
);
}
return {stars} {rating};
};
// Gold CTA button
const CTAButton = ({ children, onClick, style = {}, variant = 'gold', small = false }) => {
const variants = {
gold: { background: BRAND.gold, color: BRAND.dark, border: 'none' },
primary: { background: BRAND.primary, color: '#fff', border: 'none' },
outline: { background: 'transparent', color: BRAND.primary, border: `1.5px solid ${BRAND.primary}` },
ghost: { background: 'transparent', color: BRAND.muted, border: `1.5px solid ${BRAND.border}` },
};
return (
);
};
// Card container
const Card = ({ children, style = {}, hover = true }) => {
const [hov, setHov] = React.useState(false);
return (
hover && setHov(true)}
onMouseLeave={() => setHov(false)}
style={{
background: BRAND.surface,
borderRadius: 12,
border: `1px solid ${BRAND.border}`,
boxShadow: hov ? '0 8px 32px rgba(13,92,58,0.13)' : '0 2px 8px rgba(0,0,0,0.06)',
transition: 'box-shadow 0.2s, transform 0.2s',
transform: hov ? 'translateY(-2px)' : 'none',
overflow: 'hidden',
...style,
}}
>
{children}
);
};
// Brand mark — uses the official MyMarian logo PNG. Returns just the rounded-square icon.
const BrandMark = ({ size = 36, style = {}, glow = false }) => (
);
// Sidebar nav item
const NavItem = ({ icon, label, active, onClick }) => (
);
// Reactive viewport hook for responsive layouts
const useIsMobile = (breakpoint = 768) => {
const [isMobile, setIsMobile] = React.useState(
typeof window !== 'undefined' ? window.innerWidth <= breakpoint : false
);
React.useEffect(() => {
const onResize = () => setIsMobile(window.innerWidth <= breakpoint);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [breakpoint]);
return isMobile;
};
// Export everything
Object.assign(window, {
BRAND, EthiopianPattern, TiletPattern, PatternDivider,
GradeBadge, SUBJECT_COLORS, ProgressBar, Avatar, Stars,
CTAButton, Card, NavItem, BrandMark, useIsMobile,
});