feat(search-frontend): add public landing page, search page with map view, filters, and property cards

- Create (public) route group with landing page (hero, featured listings, district links, stats, CTA) - Create search page with filter sidebar, list/map/split view modes, URL-synced filters, pagination - Build ListingMap component with CSS-based marker visualization and popup details - Build FilterBar with transaction type, property type, city, price range, area, bedrooms filters - Build PropertyCard and SearchResults components with responsive grid layout - Update middleware to allow public access to / and /search routes - Move dashboard home to /dashboard to avoid route conflict - All content in Vietnamese, mobile responsive Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 02:02:42 +07:00
parent ad7713968a
commit 5e44456d11
10 changed files with 1254 additions and 9 deletions
--- a/apps/web/components/search/search-results.tsx
+++ b/apps/web/components/search/search-results.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { Select } from '@/components/ui/select';
+import { PropertyCard } from './property-card';
+import type { ListingDetail, PaginatedResult } from '@/lib/listings-api';
+
+interface SearchResultsProps {
+  result: PaginatedResult<ListingDetail> | null;
+  loading: boolean;
+  page: number;
+  sort: string;
+  onPageChange: (page: number) => void;
+  onSortChange: (sort: string) => void;
+}
+
+export function SearchResults({
+  result,
+  loading,
+  page,
+  sort,
+  onPageChange,
+  onSortChange,
+}: SearchResultsProps) {
+  if (loading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (!result || result.data.length === 0) {
+    return (
+      <div className="flex min-h-[400px] flex-col items-center justify-center text-muted-foreground">
+        <svg
+          className="mb-4 h-16 w-16 text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          />
+        </svg>
+        <p className="text-lg font-medium">Không tìm thấy kết quả</p>
+        <p className="mt-1 text-sm">Hãy thử thay đổi bộ lọc để tìm kiếm rộng hơn</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          {result.total} kết quả
+        </p>
+        <Select
+          value={sort}
+          onChange={(e) => onSortChange(e.target.value)}
+          className="w-48"
+        >
+          <option value="">Mới nhất</option>
+          <option value="price_asc">Giá: Thấp đến cao</option>
+          <option value="price_desc">Giá: Cao đến thấp</option>
+          <option value="area_asc">Diện tích: Nhỏ đến lớn</option>
+          <option value="area_desc">Diện tích: Lớn đến nhỏ</option>
+        </Select>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {result.data.map((listing) => (
+          <PropertyCard key={listing.id} listing={listing} />
+        ))}
+      </div>
+
+      {result.totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 pt-4">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            Trước
+          </Button>
+          <div className="flex gap-1">
+            {Array.from({ length: Math.min(result.totalPages, 5) }, (_, i) => {
+              let pageNum: number;
+              if (result.totalPages <= 5) {
+                pageNum = i + 1;
+              } else if (page <= 3) {
+                pageNum = i + 1;
+              } else if (page >= result.totalPages - 2) {
+                pageNum = result.totalPages - 4 + i;
+              } else {
+                pageNum = page - 2 + i;
+              }
+              return (
+                <Button
+                  key={pageNum}
+                  variant={pageNum === page ? 'default' : 'outline'}
+                  size="sm"
+                  className="w-9"
+                  onClick={() => onPageChange(pageNum)}
+                >
+                  {pageNum}
+                </Button>
+              );
+            })}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= result.totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            Tiếp
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}