Refactor: Extract duplicated breadcrumbs, date formatting, and query options

[Copilot]

Identified and consolidated duplicated patterns across pages: breadcrumb navigation (6 pages), date formatting (3 files), and React Query configuration (3 pages).

Changes

• PageBreadcrumb component - Extracted breadcrumb JSX repeated across Projects, Blog, Solutions, Contact, and detail pages. Supports single and multi-level navigation with i18n.

• createDateFormatter utility - Centralized Intl.DateTimeFormat instantiation with locale fallback, used in Blog listing, blog post detail, and comments.

• LONG_STALE_QUERY_OPTIONS constant - Extracted common query config (staleTime: 10min, retry: 1, refetchOnWindowFocus: false) used in solutions/projects fetching.

Example

Before (repeated 6 times):

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link to="/">{t('navigation.home')}</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>{t('navigation.blog')}</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

After:

<PageBreadcrumb segments={[{ label: t('navigation.blog') }]} />

Net: -54 lines (200 removed, 146 added as reusable code)

Original prompt

Find and refactor duplicated code

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[monynha-online]

The preview deployment is ready. 🟢

Open Preview | Open Build Logs

Last updated at: 2025-11-01 20:39:56 CET