// ==================================================================== // Tasker24 — Shared components, hooks, i18n helpers, route store // ==================================================================== const { useState, useEffect, useRef, useMemo, useCallback } = React; // -------- Tiny route store (hash based) -------- const T24_ROUTES = { home: '#/', categories:'#/categories', services: '#/services', catDetail: '#/category/', // + id svcDetail: '#/service/', // + id about: '#/about', process: '#/process', registration:'#/registration', login: '#/login', contact: '#/contact', faq: '#/faq', terms: '#/terms', privacy: '#/privacy', refund: '#/refund', cookie: '#/cookie', safety: '#/safety', opinion: '#/opinion', }; function useRoute() { const [hash, setHash] = useState(window.location.hash || '#/'); useEffect(() => { const onHash = () => setHash(window.location.hash || '#/'); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); // Parse: returns { path, param } const path = hash.replace(/^#\//, '').split('/').filter(Boolean); return { hash, page: path[0] || 'home', param: path[1] || null, go: (h) => { window.location.hash = h; window.scrollTo({top:0, behavior:'smooth'}); }, }; } // -------- i18n micro helper -------- const T24_DICT = { en: { 'nav.categories': 'Categories', 'nav.services': 'Services', 'nav.process': 'Process', 'nav.about': 'About', 'nav.contact': 'Contact', 'nav.faq': 'FAQ', 'nav.login': 'Login / Register', 'nav.dashboard': 'Dashboard', 'hero.eyebrow': 'Smart service marketplace · Bangladesh', 'hero.title': 'Tasker24 — Smart Service Marketplace', 'hero.subtitle': 'Connect with verified providers across 94+ services. Take a service, offer a service, or do both — all on one platform.', 'hero.search': 'Search category or service', 'hero.cta1': 'Find a service', 'hero.cta2': 'Become a provider', 'common.viewAll': 'View all', 'common.search': 'Search', 'common.filter': 'Filter', 'common.request': 'Request service', 'common.becomeProvider': 'Become a provider', 'common.serviceCount': 'services', 'common.proceed': 'Proceed', 'role.taker': 'Service Taker', 'role.provider': 'Service Provider / Freelancer', 'role.both': 'Service Taker & Provider', 'safety.title': 'Never share Password / PIN / OTP', 'safety.text': 'Tasker24 will never ask for your password, banking PIN, or any one-time password (OTP). Anyone who does is a scammer.', }, bn: { 'nav.categories': 'ক্যাটাগরি', 'nav.services': 'সেবাসমূহ', 'nav.process': 'প্রক্রিয়া', 'nav.about': 'আমাদের সম্পর্কে', 'nav.contact': 'যোগাযোগ', 'nav.faq': 'প্রশ্নোত্তর', 'nav.login': 'লগইন / রেজিস্ট্রেশন', 'nav.dashboard': 'ড্যাশবোর্ড', 'hero.eyebrow': 'স্মার্ট সার্ভিস মার্কেটপ্লেস · বাংলাদেশ', 'hero.title': 'সেবা নিন, সেবা দিন, আয় করুন — সব এক প্ল্যাটফর্মে', 'hero.subtitle': '৯৪+ সেবা ও ১১টি ক্যাটাগরির ভেতরে যাচাইকৃত প্রোভাইডারের সাথে সরাসরি যুক্ত হোন। সেবা নিন, সেবা দিন বা দুটোই — এক প্রোফাইলে সব।', 'hero.search': 'ক্যাটাগরি বা সেবা খুঁজুন', 'hero.cta1': 'সেবা খুঁজুন', 'hero.cta2': 'প্রোভাইডার হোন', 'common.viewAll': 'সব দেখুন', 'common.search': 'অনুসন্ধান', 'common.filter': 'ফিল্টার', 'common.request': 'সেবা চাই', 'common.becomeProvider': 'প্রোভাইডার হোন', 'common.serviceCount': 'টি সেবা', 'common.proceed': 'এগিয়ে যান', 'role.taker': 'সেবা গ্রহণকারী', 'role.provider': 'সেবা প্রদানকারী / ফ্রিল্যান্সার', 'role.both': 'সেবা গ্রহণকারী ও প্রদানকারী', 'safety.title': 'কখনোই Password / PIN / OTP শেয়ার করবেন না', 'safety.text': 'Tasker24 কখনোই আপনার পাসওয়ার্ড, ব্যাংকিং PIN বা OTP চাইবে না। কেউ চাইলে সে প্রতারক — সাথে সাথে রিপোর্ট করুন।', } }; function t(lang, key) { return (T24_DICT[lang] && T24_DICT[lang][key]) || (T24_DICT.en[key] || key); } // -------- Brand logo (uses copied SVG) -------- function BrandMark({ size = 36, withText = true }) { return ( Tasker24 {withText && ( Tasker 24 )} ); } // -------- Dropdown helper -------- function Dropdown({ trigger, items, align = 'left' }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('click', onDoc); return () => document.removeEventListener('click', onDoc); }, []); return (
{open && (
{items.map((it, i) => { if (it.sep) return
; return ( { if(it.onClick){ e.preventDefault(); it.onClick(); } setOpen(false); }}> {it.icon && } {it.label} {it.right && {it.right}} ); })}
)}
); } // -------- Integrated category + keyword search bar -------- function MegaSearch({ lang, defaultCat = 'all', defaultQuery = '', placeholder }) { const { cats } = window.T24; const [cat, setCat] = useState(defaultCat); const [q, setQ] = useState(defaultQuery); const onSubmit = (e) => { e.preventDefault(); const params = new URLSearchParams(); if (q) params.set('q', q); if (cat !== 'all') params.set('cat', cat); window.location.hash = '#/services' + (params.toString() ? ('?'+params.toString()) : ''); }; return (
setQ(e.target.value)} placeholder={placeholder || (lang==='bn'?'২০,০০০+ সেবা থেকে খুঁজুন…':'Search for more than 20,000 services…')} />
); } // -------- Top navbar with utility bar -------- function TopNav({ route, lang, setLang, theme, setTheme, loggedIn, setLoggedIn, onOpenMobileMenu }) { const sloganBN = 'সেবা গ্রহণকারী এবং প্রদানকারীর সেতুবন্ধন'; const sloganEN = 'Bridge of Service Taker & Provider'; const { cats } = window.T24; const servicesMenu = cats.slice(0, 8).map(c => ({ label: c.name, icon: 'bi-arrow-right-short', href: '#/category/'+c.id, })).concat([ { sep: true }, { label: lang==='bn'?'সব ক্যাটাগরি দেখুন':'View all categories', icon:'bi-grid-3x3-gap', href:'#/categories' }, { label: lang==='bn'?'সব সেবা দেখুন':'View all services', icon:'bi-list', href:'#/services' }, ]); const companyMenu = [ { label: lang==='bn'?'আমাদের সম্পর্কে':'About Us', icon: 'bi-info-circle', href: '#/about' }, { label: lang==='bn'?'প্রক্রিয়া':'How it works', icon: 'bi-diagram-3', href: '#/process' }, { label: lang==='bn'?'যোগাযোগ':'Contact', icon: 'bi-envelope', href: '#/contact' }, { label: 'FAQ', icon: 'bi-question-circle', href: '#/faq' }, { sep: true }, { label: lang==='bn'?'নিরাপত্তা':'Safety & Security', icon: 'bi-shield-check', href: '#/safety' }, { label: lang==='bn'?'অভিমত':'Opinion & Feedback', icon: 'bi-chat-square-text', href: '#/opinion' }, ]; return ( <> {/* Dark utility bar */}
{lang==='bn'?'লোকেশন খুঁজুন':'Find a location'} · info@tasker24.net · {lang==='bn'?sloganBN:sloganEN}
{/* Main nav with integrated search */} ); } // -------- Mobile menu drawer -------- function MobileMenu({ open, onClose, lang, setLang, theme, setTheme }) { if (!open) return null; const items = [ ['categories', t(lang,'nav.categories')], ['services', t(lang,'nav.services')], ['process', t(lang,'nav.process')], ['about', t(lang,'nav.about')], ['contact', t(lang,'nav.contact')], ['faq', t(lang,'nav.faq')], ['safety', 'Safety & Security'], ['opinion', 'Opinion & Feedback'], ]; return (
e.stopPropagation()}>
Tasker24
{items.map(([id, label]) => ( {label} ))}
Language
Theme
{t(lang,'nav.login')}
); } // -------- Page hero (breadcrumb) -------- function PageHero({ eyebrow, title, subtitle, crumbs = [], children }) { return (
{crumbs.length>0 && ( )} {eyebrow &&
{eyebrow}
}

{title}

{subtitle &&

{subtitle}

} {children}
); } // -------- Footer -------- function Footer({ lang }) { return ( ); } // -------- Category icon (uses SVG) -------- function CatIcon({ cat, size = 'md' }) { const cls = size === 'lg' ? 't24-iconbox t24-iconbox--lg' : (size==='sm' ? 't24-iconbox t24-iconbox--sm' : 't24-iconbox'); return (
{cat.name}
); } // -------- Category card -------- function CategoryCard({ cat, lang, active, onClick }) { const name = lang==='bn' ? cat.nameBn : cat.name; const desc = lang==='bn' ? cat.descBn : cat.desc; return ( { if(onClick){ e.preventDefault(); onClick(cat); } }} className={"t24-card t24-cat-card text-decoration-none "+(active?'t24-card--active':'')}>
{name}
{desc}
{cat.count} {t(lang,'common.serviceCount')}
); } // -------- Service card -------- function ServiceCard({ svc, onOpen }) { // We map an FA-ish icon as a Bootstrap Icon fallback; otherwise the category icon const cat = window.T24.cats.find(c=>c.id===svc.catId); return (
onOpen(svc)}>
{cat.name}
{svc.name}
{svc.description}
{svc.unit && svc.unit.length>0 && (
{svc.unit.map((u,i)=>({u.name}))}
)}
Providers nearby Open
); } // -------- Provider card -------- function ProviderCard({ p }) { return (
{p.init}
{p.name} {p.verified && Verified}
{p.role} · {p.area}
{p.rating} ({p.jobs}) {p.tags && p.tags.map((tg, i)=>({tg}))}
); } // -------- Safety warning card -------- function SafetyCard({ lang, compact }) { return (
{t(lang,'safety.title')}
{t(lang,'safety.text')}
); } // -------- Cookie consent -------- function CookieConsent({ onClose }) { const [shown, setShown] = useState(false); const [open, setOpen] = useState(false); const [prefs, setPrefs] = useState({ necessary: true, analytics: true, marketing: false }); useEffect(() => { const seen = sessionStorage.getItem('t24-cookies-seen'); if (!seen) setTimeout(()=>setShown(true), 1200); }, []); if (!shown) return null; const dismiss = () => { sessionStorage.setItem('t24-cookies-seen', '1'); setShown(false); }; return (
{!open ? (
🍪
We use cookies to make Tasker24 work for you.
Necessary cookies keep you signed in. Analytics & marketing help us improve. See Cookie Policy.
) : (
Cookie preferences
setPrefs(p=>({...p, analytics:v}))} /> setPrefs(p=>({...p, marketing:v}))} />
)}
); } function CookieToggle({ title, desc, checked, onChange, disabled }) { return ( ); } // -------- Hero carousel -------- function HeroCarousel({ banners, autoMs = 6000 }) { const [i, setI] = useState(0); useEffect(() => { const t = setInterval(() => setI(v => (v+1) % banners.length), autoMs); return () => clearInterval(t); }, [banners.length, autoMs]); return (
{banners.map((b, idx) => (
{b.alt}
))}
{banners.map((_, idx) => (
); } // -------- Search box -------- function SearchBox({ placeholder, value, onChange, onSubmit, dense }) { return (
{ e.preventDefault(); onSubmit && onSubmit(value); }} style={dense ? {padding:'4px 4px 4px 14px'} : null}> onChange(e.target.value)} placeholder={placeholder} />
); } // -------- Toast -------- function Toast({ show, text, onClose }) { useEffect(() => { if (show) { const t=setTimeout(onClose, 2800); return ()=>clearTimeout(t);} }, [show]); if (!show) return null; return (
Success
{text}
); } // -------- Category rail (left sidebar — sample UI direction) -------- function CategoryRail({ lang, openService }) { const { cats } = window.T24; const [hoverId, setHoverId] = useState(null); return (
{lang==='bn'?'ক্যাটাগরি':'Browse categories'} {lang==='bn'?'সব':'See all'}
setHoverId(null)}> {cats.map(c => (
setHoverId(c.id)} onClick={()=>{ window.location.hash = '#/category/'+c.id; }}> {lang==='bn'?c.nameBn:c.name} {hoverId === c.id && (
e.stopPropagation()}>
{c.count} {lang==='bn'?'টি সেবা':'services'}
{c.services.slice(0, 10).map((s, i) => { const svc = window.T24.services.find(x=>x.short===s.short && x.catId===c.id); return ( { e.preventDefault(); openService && openService(svc); }}> {s.name} ); })} {c.services.length > 10 && ( {lang==='bn'?'আরো দেখুন':'See all '+c.count+' services'} )}
)}
))}
); } // -------- Animated counter (count-up on enter) -------- function CountUp({ to, prefix = '', suffix = '+', duration = 1400 }) { const [val, setVal] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting && !started.current) { started.current = true; const t0 = performance.now(); const tick = (now) => { const p = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.floor(eased * to)); if (p < 1) requestAnimationFrame(tick); else setVal(to); }; requestAnimationFrame(tick); } }); }, { threshold: 0.3 }); io.observe(ref.current); return () => io.disconnect(); }, [to, duration]); return {prefix}{val.toLocaleString()}{suffix}; } function CounterSection() { const items = [ { n: 8420, icon: 'bi-hand-thumbs-up-fill', label: 'Happy clients' }, { n: 12500, icon: 'bi-people-fill', label: 'Active providers' }, { n: 94, icon: 'bi-grid-3x3-gap-fill', label: 'Services offered' }, { n: 24, icon: 'bi-clock-fill', label: 'Hours support / day', suffix:'/7' }, ]; return (
{items.map((it, i) => (
{it.label}
))}
); } // -------- Section title -------- function SectionTitle({ eyebrow, title, subtitle, action }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{subtitle &&

{subtitle}

}
{action}
); } // -------- Expose to window -------- Object.assign(window, { useRoute, t, T24_DICT, T24_ROUTES, BrandMark, Dropdown, MegaSearch, TopNav, MobileMenu, PageHero, Footer, CatIcon, CategoryCard, ServiceCard, ProviderCard, SafetyCard, CookieConsent, HeroCarousel, SearchBox, Toast, SectionTitle, CategoryRail, CountUp, CounterSection, });