// chamapro-shared.jsx — shared components: icons, avatars, mock data
// Tiny stroke-based icon set
const Icon = {
search: (s = 18) => ,
plus: (s = 18) => ,
bell: (s = 18) => ,
home: (s = 18) => ,
list: (s = 18) => ,
chat: (s = 18) => ,
user: (s = 18) => ,
star: (s = 14, fill = 'currentColor') => ,
starOutline: (s = 14) => ,
pin: (s = 14) => ,
clock: (s = 14) => ,
check: (s = 14) => ,
back: (s = 18) => ,
close: (s = 18) => ,
filter: (s = 16) => ,
send: (s = 18) => ,
shield: (s = 14) => ,
flame: (s = 14, fill = '#FF5722') => ,
camera: (s = 18) => ,
mic: (s = 18) => ,
arrowRight: (s = 14) => ,
sparkle: (s = 14) => ,
lightning: (s = 14) => ,
heart: (s = 16) => ,
share: (s = 16) => ,
briefcase: (s = 18) => ,
wrench: (s = 18) => ,
paint: (s = 18) => ,
dot: (s = 4) => ,
};
// Stars row
function Stars({ value = 5, size = 12, total = 5 }) {
return (
{Array.from({ length: total }).map((_, i) => (
{Icon.star(size, 'currentColor')}
))}
);
}
// Avatar with initials, optional image url
function Avatar({ name = 'AA', size = 'md', img, ring }) {
const cls = size === 'sm' ? 'cp-avatar sm' : size === 'lg' ? 'cp-avatar lg' : 'cp-avatar';
const initials = name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();
const seed = name.charCodeAt(0) + (name.charCodeAt(1) || 0);
const hue = (seed * 37) % 360;
return (
{!img && initials}
);
}
// Verified badge
function Verified({ size = 14 }) {
return (
);
}
// Logo: flame mark + wordmark
function Logo({ size = 22, mark = false, color }) {
const c = color || 'var(--cp-primary)';
return (
{!mark &&
ChamaPro
}
);
}
// Real-feel placeholder photo using gradient + emoji
function PhotoPlaceholder({ kind = 'home', h = 120 }) {
const palettes = {
bath: { g: 'linear-gradient(135deg, #BFE6FF, #6DA8C7)', e: '🚿' },
kitchen: { g: 'linear-gradient(135deg, #FFE0B2, #C19A6B)', e: '🍳' },
paint: { g: 'linear-gradient(135deg, #E8D5F2, #9966CC)', e: '🎨' },
yard: { g: 'linear-gradient(135deg, #C8E6C9, #5D8A4F)', e: '🌿' },
elec: { g: 'linear-gradient(135deg, #FFF59D, #F9A825)', e: '⚡' },
plumb: { g: 'linear-gradient(135deg, #B3E5FC, #0288D1)', e: '🔧' },
home: { g: 'linear-gradient(135deg, #FFCCBC, #FF7043)', e: '🏠' },
move: { g: 'linear-gradient(135deg, #D7CCC8, #6D4C41)', e: '📦' },
ac: { g: 'linear-gradient(135deg, #E1F5FE, #4FC3F7)', e: '❄️' },
};
const p = palettes[kind] || palettes.home;
return (
);
}
Object.assign(window, { Icon, Stars, Avatar, Verified, Logo, PhotoPlaceholder });