feat(web): add property comparison page with side-by-side view

Build a complete property comparison feature at /compare:
- Zustand store with localStorage persistence for selected listings (2-5)
- Side-by-side comparison table (price, area, price/m², amenities, location, etc.)
- Summary statistics banner (price range, area range, price/m² range)
- "Add to Compare" button on property cards and detail pages
- Floating comparison bar for quick access when listings are selected
- Bilingual i18n support (Vietnamese + English)
- 18 unit tests for store logic and comparison stats computation
- Mobile-responsive layout with horizontal scroll on comparison table

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-10 23:55:50 +07:00
parent 55a01c5738
commit 37fab515b7
13 changed files with 1092 additions and 0 deletions

View File

@@ -4,6 +4,7 @@ import { Menu, X } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { CompareFloatingBar } from '@/components/comparison/compare-floating-bar';
import { Button } from '@/components/ui/button';
import { LanguageSwitcher } from '@/components/ui/language-switcher';
import { Link } from '@/i18n/navigation';
@@ -149,6 +150,8 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
{children}
</main>
<CompareFloatingBar />
<footer role="contentinfo" className="border-t bg-muted/40">
<div className="mx-auto max-w-7xl px-4 py-8">
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">