import { Head, Link, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import SiteHeader from '@/components/site-header'; import { LangProvider } from '@/lib/lang'; import { type PaginatedData, type SharedData } from '@/types'; // ─── Interfaces ─────────────────────────────────────────────────────────────── interface BlogCategory { id: number; name: string; slug: string; } interface BlogPost { id: number; title: string; slug: string; thumbnail: string | null; excerpt: string | null; created_at: string; category: BlogCategory | null; } interface Props { posts: PaginatedData; categories: BlogCategory[]; filters: { category?: string; search?: string }; } // ─── Helpers ────────────────────────────────────────────────────────────────── function readTime(post: BlogPost): number { return Math.max(2, Math.ceil(((post.excerpt?.length ?? 0) + post.title.length) / 100)); } function formatDate(iso: string): string { return new Date(iso).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }); } // ─── Brand Primitives ───────────────────────────────────────────────────────── function DiamondGlyph({ size = 16, stroke = 'currentColor', className = '' }: { size?: number; stroke?: string; className?: string }) { return ( ); } function SectionEyebrow({ children, tone = 'gold' }: { children: React.ReactNode; tone?: 'gold' | 'ivory' }) { return (
{children}
); } function Placeholder({ label, dark = false, ratio = '4/5', className = '' }: { label?: string; dark?: boolean; ratio?: string; className?: string }) { return (
{label && ( {label} )}
); } function PostImage({ post, ratio = '4/5', dark = false }: { post: BlogPost; ratio?: string; dark?: boolean }) { if (post.thumbnail) { return (
{post.title}
); } return ; } // ─── Arrow Icon ─────────────────────────────────────────────────────────────── function ArrowIcon({ size = 14 }: { size?: number }) { return ( ); } // ─── Blog Hero ──────────────────────────────────────────────────────────────── function BlogHero({ query, setQuery, onSearch }: { query: string; setQuery: (v: string) => void; onSearch: () => void }) { return (
{/* Breadcrumb */}
The Husnulwari Journal · Vol. 12

Style, fabric &
modest fashion journal.

Helpful guides, styling ideas, and fabric knowledge to help you choose the perfect material for Punjabi, shirt, Kabli, and ready-made modest wear — before you buy.

{/* Search */}
{ e.preventDefault(); onSearch(); }} className="mt-8 flex max-w-[540px] items-center border py-2 pl-5 pr-2 transition focus-within:border-yellow-600" style={{ borderColor: 'var(--brand-line)', backgroundColor: 'var(--brand-cream)' }} > setQuery(e.target.value)} placeholder="Search fabric guides, styling tips, Kabli, Eid…" className="flex-1 bg-transparent py-2.5 text-[14px] outline-none" style={{ color: 'var(--brand-ink)' }} />
Trending: {['Punjabi Fabric', 'Eid Styling', 'Fabric Care', 'Kabli Guide'].map((t) => ( ))}
This Week
5 fabric weights for Bangladeshi summer
); } // ─── Featured Article ───────────────────────────────────────────────────────── function FeaturedArticle({ post }: { post: BlogPost }) { return (
Featured Guide All articles
{post.category && ( {post.category.name} )} Featured
{formatDate(post.created_at)} · {readTime(post)} min read

{post.title}

{post.excerpt && (

{post.excerpt}

)}
Editorial Team
Husnulwari Atelier
Read article
); } // ─── Category Rail ──────────────────────────────────────────────────────────── function CategoryRail({ value, onChange, categories, }: { value: string; onChange: (slug: string) => void; categories: BlogCategory[]; }) { const allCats = [{ id: 0, name: 'All', slug: '' }, ...categories]; return (
{allCats.map((c) => { const active = value === c.slug; return ( ); })}
); } // ─── Blog Card ──────────────────────────────────────────────────────────────── function BlogCard({ post }: { post: BlogPost }) { return (
{post.category && (
{post.category.name}
)}
{formatDate(post.created_at)} · {readTime(post)} min read

{post.title}

{post.excerpt && (

{post.excerpt}

)}
Read more
); } // ─── Blog Sidebar ───────────────────────────────────────────────────────────── function BlogSidebar({ categories, recentPosts, phone }: { categories: BlogCategory[]; recentPosts: BlogPost[]; phone: string }) { const [email, setEmail] = useState(''); const [done, setDone] = useState(false); const [sideSearch, setSideSearch] = useState(''); const waUrl = `https://wa.me/${phone.replace(/\D/g, '')}`; return ( ); } // ─── Blog Grid + Sidebar ────────────────────────────────────────────────────── function BlogGridWithSidebar({ posts, categories, activeCat, phone, }: { posts: PaginatedData; categories: BlogCategory[]; activeCat: string; phone: string; }) { const gridPosts = posts.data; return (
All Articles

{activeCat ? <>From the {categories.find((c) => c.slug === activeCat)?.name ?? activeCat} series : 'Recent journal entries'}

{posts.total} {posts.total === 1 ? 'article' : 'articles'}
{gridPosts.length === 0 ? (

No articles match yet.

Try another category or clear your search.

Clear filters
) : (
{gridPosts.map((p) => )}
)} {posts.last_page > 1 && (
Page {posts.current_page} of {posts.last_page} · {posts.total} articles
{posts.links.map((link, i) => (
)}
); } // ─── Educational Highlight ──────────────────────────────────────────────────── function EducationalHighlight() { const cards = [ { n: '01', t: 'See the final look', s: 'Understand how a fabric may appear after stitching — through real photos of the same bolt as Punjabi, shirt, and Kabli.' }, { n: '02', t: 'Choose with confidence', s: "Learn about fabric weight, colour, fall, and breathability — so you order yardage you'll actually wear." }, { n: '03', t: 'Plan your outfit better', s: 'Get specific ideas for Jummah, Eid, family gatherings, and everyday wear — paired with our current bolts.' }, ]; const icons = [ // Eye , // Scale/balance , // Calendar , ]; return (
For the curious buyer

Not sure which fabric
to choose?

Choosing fabric can be difficult when you can't picture the final outfit. Our guides help you understand how each fabric may look as a Punjabi, shirt, or Kabli — before you buy.

); } // ─── Style Inspiration ──────────────────────────────────────────────────────── function StyleInspiration() { const items = [ { t: 'Punjabi Look Ideas', c: 'Sage and ivory pairings for Jummah, work, and gatherings.', tag: 'Editorial', dark: false }, { t: 'Kabli Styling', c: 'Textured weaves and considered colours for a smart traditional look.', tag: 'Mens', dark: true }, { t: 'Shirt Fabric Looks', c: 'Three plain bolts, three finished looks — from desk to dinner.', tag: 'Daily', dark: false }, { t: 'Eid Outfit Planning', c: 'How to coordinate Punjabi, Kabli, and abaya across the family.', tag: 'Eid', dark: true }, ]; return (
Style Inspiration

How the bolt
becomes the outfit.

All inspiration
{items.map((it) => (
{it.tag}
{it.t}

{it.c}

View Guide
))}
); } // ─── Blog FAQ ───────────────────────────────────────────────────────────────── function BlogFAQ() { const faqs = [ { q: 'What kind of blog articles will I find here?', a: 'Practical, friendly guides about fabric weights, colour choice, how a bolt looks after stitching, modest styling, fabric care, and ready-made Punjabi updates. We write for people choosing fabric for the first time and for tailors and stylists alike.' }, { q: 'Can your guides help me choose fabric?', a: 'Yes — that\'s the whole point. Each fabric guide includes weight, breathability, drape, recommended uses (Punjabi / shirt / Kabli), and seasonal notes. If you\'re stuck, send us a photo and we\'ll suggest a pairing on WhatsApp.' }, { q: 'Do you explain how fabric may look after stitching?', a: 'Where possible, we publish side-by-side photos of the same bolt as a Punjabi, shirt, or Kabli set. Texture, fall, and behaviour after pressing all change once it\'s stitched — our articles show that transition.' }, { q: 'Will you share ready-made Punjabi updates?', a: 'Yes. As we expand into ready-made pieces, every drop is announced first in the journal — with fabric origin, sizing notes, and styling. Subscribe to the newsletter to get it before the shop.' }, { q: 'Can I contact you for fabric suggestions?', a: 'Absolutely. Drop us a message on WhatsApp with what you\'re making and your budget per yard. Our atelier team replies personally within a few hours, six days a week.' }, ]; const [open, setOpen] = useState(0); return (
Journal FAQs

What to expect
from the journal.

A few honest answers about what we publish, who it's for, and how to use it before you buy.

{faqs.map((f, i) => { const isOpen = open === i; return (

{f.a}

); })}
); } // ─── Blog CTA ───────────────────────────────────────────────────────────────── function BlogCTA() { return (
Read · Then choose

Ready to choose
your next fabric?

Explore our latest fabric collection and use our guides to choose the perfect material for Punjabi, shirt, or Kabli.

{ e.currentTarget.style.backgroundColor = 'var(--brand-ivory)'; }} onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'var(--brand-gold)'; }} > Shop Fabrics { e.currentTarget.style.borderColor = 'var(--brand-gold)'; e.currentTarget.style.color = 'var(--brand-gold)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(251,247,239,0.3)'; e.currentTarget.style.color = 'white'; }} > View Ready-Made Punjabi →
New fabric arrivals · Every Thursday
); } // ─── Page Footer ────────────────────────────────────────────────────────────── function PageFooter() { const { siteSettings } = usePage().props; const s = siteSettings; const siteName = s?.site_name ?? 'Husnulwari'; const logoPath = s?.logo_path; const footerDesc = s?.footer_desc ?? ''; const copyright = (s?.copyright ?? '© {year} All rights reserved.').replace('{year}', String(new Date().getFullYear())); const showAbout = s?.show_about ?? true; const showBlog = s?.show_blog ?? true; const phone = s?.phone ?? ''; return (
{logoPath ? ( {siteName} ) : ( {siteName} )}

{footerDesc || 'Premium fabric, delivered across Bangladesh with care.'}

Quick Links

    {[ { href: '/', label: 'Home' }, { href: '/products', label: 'All Products' }, { href: '/cart', label: 'Cart' }, ...(showAbout ? [{ href: '/about', label: 'About Us' }] : []), ...(showBlog ? [{ href: '/blog', label: 'Blog' }] : []), ].map((l) => (
  • {l.label}
    • ))}

Contact

{phone &&

{phone}

}

Mon – Sat: 10am – 8pm

{copyright}

); } // ─── Inner (wrapped in LangProvider) ───────────────────────────────────────── function BlogInner({ posts, categories, filters }: Props) { const { siteSettings } = usePage().props; const siteName = siteSettings?.site_name ?? 'Husnulwari'; const showAnnouncement = siteSettings?.show_announcement ?? true; const announcementText = siteSettings?.announcement_bar ?? ''; const phone = siteSettings?.phone ?? ''; const [activeCat, setActiveCat] = useState(filters.category ?? ''); const [heroQuery, setHeroQuery] = useState(filters.search ?? ''); const handleCatChange = (slug: string) => { setActiveCat(slug); const params: Record = {}; if (slug) params.category = slug; if (filters.search) params.search = filters.search; router.get('/blog', params, { preserveScroll: false }); }; const handleHeroSearch = () => { const params: Record = {}; if (heroQuery.trim()) params.search = heroQuery.trim(); if (activeCat) params.category = activeCat; router.get('/blog', params); }; const featuredPost = posts.data[0] ?? null; const siteMeta = `${siteName} Journal`; return (
{/* Announcement marquee */} {showAnnouncement && announcementText && (
{[...Array(8)].map((_, i) => ( ♦ {announcementText} ))}
)} {featuredPost && }
); } // ─── Export ─────────────────────────────────────────────────────────────────── export default function BlogIndex(props: Props) { return ( ); }