// Avokado Bar app redesign — shared primitives. No emoji; custom SVG icons only.
// Namespaced under window.AvbX. Depends on window.AvbX.{TILE_TONES, BADGES} (data.jsx).
(function(){
const { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } = React;
const { TILE_TONES, BADGES } = window.AvbX;
// ── Brand palette shortcuts ──
const GREEN = '#CFD829'; // production lime (matches app accent)
const GREEN_SOFT = '#E6EF7B';
const INK = '#1A1A1A';
const OLIVE = '#6B6B59';
const CREAM = '#F5F0E8';
const PAPER = '#FFFFFF';
// ── Icons ──
const Icon = {
search:(p={})=>(),
back:(p={})=>(),
close:(p={})=>(),
plus:(p={})=>(),
minus:(p={})=>(),
heart:(p={})=>(),
bag:(p={})=>(),
clock:(p={})=>(),
user:(p={})=>(),
home:(p={})=>(),
gift:(p={})=>(),
chevron:(p={})=>(),
flame:(p={})=>(),
leaf:(p={})=>(),
wheat:(p={})=>(),
protein:(p={})=>(),
check:(p={})=>(),
pin:(p={})=>(),
qr:(p={})=>(),
sparkle:(p={})=>(),
card:(p={})=>(),
apple:(p={})=>(),
walletPts:(p={})=>(),
note:(p={})=>(),
};
// ── DishImage: real photo if present, else premium tonal tile ──
function DishImage({ photo, tone='cream', radius=14, style={}, className='', children, dim=false }) {
const t = TILE_TONES[tone] || TILE_TONES.cream;
const base = {
position:'relative', overflow:'hidden', borderRadius:radius, flex:'none', ...style,
};
if (photo) {
// photo formatları:
// "photos/x/y.webp" veya "photos/x/y.jpg" (Firestore imageUrl) → olduğu gibi
// "/photos/..." absolute path → olduğu gibi
// "http://..." veya "https://..." → olduğu gibi
// "x/y" extension'sız (legacy) → "photos/x/y.jpg" formatına çevir
let src;
if (/^(https?:)?\/\//.test(photo)) src = photo;
else if (photo.startsWith('/')) src = photo;
else if (photo.startsWith('photos/')) src = '/' + photo;
else if (/\.(jpg|jpeg|png|webp|gif)$/i.test(photo)) src = '/' + photo;
else src = '/photos/' + photo + '.jpg';
return (
);
}
return (
);
}
// ── Badge ──
function Badge({ kind, lang='tr', size='md' }) {
const m = BADGES[kind]; if (!m) return null;
const tones = {
pop:{ bg:GREEN, fg:INK, I:Icon.flame }, new:{ bg:INK, fg:GREEN, I:Icon.sparkle },
veg:{ bg:'#E6F2DD', fg:'#3F6B2E', I:Icon.leaf }, gf:{ bg:'#F5ECD9', fg:'#8A6420', I:Icon.wheat },
hp:{ bg:'#EDE4F5', fg:'#5B3E8A', I:Icon.protein },
}[kind];
const I = tones.I;
const h = size==='sm'?20:22;
return (
{m[lang]}
);
}
// ── Tap wrapper (haptic + press) ──
function Tap({ as='button', onClick, style, scale=0.97, haptic='light', children, ...rest }) {
const ref = useRef(null);
const press=()=>{ if(ref.current) ref.current.style.transform=`scale(${scale})`; };
const release=()=>{ if(ref.current) ref.current.style.transform='scale(1)'; };
const handle=(e)=>{ try{ if(window.navigator&&window.navigator.vibrate) {} }catch(_){} onClick&&onClick(e); };
const Comp = as;
return (
{children}
);
}
function PrimaryButton({ children, onClick, full, small, disabled, style }) {
return (
{children}
);
}
function SecondaryButton({ children, onClick, full, small, style }) {
return (
{children}
);
}
function GhostButton({ children, onClick, full, small, style }) {
return (
{children}
);
}
function IconButton({ children, onClick, style, size=40 }) {
return (
{children}
);
}
function Stepper({ value, onInc, onDec, size='md' }) {
const h=size==='sm'?30:36, w=size==='sm'?28:32;
return (
{value}
);
}
function Wordmark({ color=INK, size=1 }) {
return (
the
AVOKADO
bar
);
}
function useScrollY(ref){
const [y,setY]=useState(0);
useEffect(()=>{ const el=ref.current; if(!el) return; const h=()=>setY(el.scrollTop); el.addEventListener('scroll',h,{passive:true}); return ()=>el.removeEventListener('scroll',h); },[ref]);
return y;
}
// money fmt
const fmt = (n) => '₺' + Number(n).toLocaleString('tr-TR');
Object.assign(window.AvbX = window.AvbX || {}, {
GREEN, GREEN_SOFT, INK, OLIVE, CREAM, PAPER,
Icon, DishImage, Badge, Tap, PrimaryButton, SecondaryButton, GhostButton, IconButton,
Stepper, Wordmark, useScrollY, fmt,
});
})();