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>
This commit is contained in:
Ho Ngoc Hai
197
apps/web/components/search/filter-bar.tsx
Normal file
197
apps/web/components/search/filter-bar.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import { PROPERTY_TYPES, TRANSACTION_TYPES } from '@/lib/validations/listings';
|
||||
|
||||
export interface SearchFilters {
|
||||
transactionType: string;
|
||||
propertyType: string;
|
||||
city: string;
|
||||
district: string;
|
||||
minPrice: string;
|
||||
maxPrice: string;
|
||||
minArea: string;
|
||||
maxArea: string;
|
||||
bedrooms: string;
|
||||
sort: string;
|
||||
}
|
||||
|
||||
const CITIES = [
|
||||
'Hồ Chí Minh',
|
||||
'Hà Nội',
|
||||
'Đà Nẵng',
|
||||
'Nha Trang',
|
||||
'Cần Thơ',
|
||||
'Hải Phòng',
|
||||
'Bình Dương',
|
||||
'Đồng Nai',
|
||||
'Long An',
|
||||
'Bà Rịa - Vũng Tàu',
|
||||
];
|
||||
|
||||
const PRICE_RANGES = [
|
||||
{ label: 'Dưới 1 tỷ', min: '0', max: '1000000000' },
|
||||
{ label: '1 - 3 tỷ', min: '1000000000', max: '3000000000' },
|
||||
{ label: '3 - 5 tỷ', min: '3000000000', max: '5000000000' },
|
||||
{ label: '5 - 10 tỷ', min: '5000000000', max: '10000000000' },
|
||||
{ label: '10 - 20 tỷ', min: '10000000000', max: '20000000000' },
|
||||
{ label: 'Trên 20 tỷ', min: '20000000000', max: '' },
|
||||
];
|
||||
|
||||
interface FilterBarProps {
|
||||
filters: SearchFilters;
|
||||
onChange: (filters: SearchFilters) => void;
|
||||
onSearch: () => void;
|
||||
layout?: 'horizontal' | 'sidebar';
|
||||
}
|
||||
|
||||
export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }: FilterBarProps) {
|
||||
const update = (key: keyof SearchFilters, value: string) => {
|
||||
onChange({ ...filters, [key]: value });
|
||||
};
|
||||
|
||||
const handlePriceRange = (value: string) => {
|
||||
if (!value) {
|
||||
onChange({ ...filters, minPrice: '', maxPrice: '' });
|
||||
return;
|
||||
}
|
||||
const range = PRICE_RANGES[Number(value)];
|
||||
if (range) {
|
||||
onChange({ ...filters, minPrice: range.min, maxPrice: range.max });
|
||||
}
|
||||
};
|
||||
|
||||
const currentPriceIdx = PRICE_RANGES.findIndex(
|
||||
(r) => r.min === filters.minPrice && r.max === filters.maxPrice,
|
||||
);
|
||||
|
||||
const isSidebar = layout === 'sidebar';
|
||||
|
||||
return (
|
||||
<div className={isSidebar ? 'space-y-4' : 'space-y-3'}>
|
||||
{isSidebar && <h3 className="font-semibold">Bộ lọc</h3>}
|
||||
|
||||
<div className={isSidebar ? 'space-y-3' : 'flex flex-wrap gap-3'}>
|
||||
<Select
|
||||
value={filters.transactionType}
|
||||
onChange={(e) => update('transactionType', e.target.value)}
|
||||
className={isSidebar ? 'w-full' : 'w-40'}
|
||||
>
|
||||
<option value="">Tất cả giao dịch</option>
|
||||
{TRANSACTION_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filters.propertyType}
|
||||
onChange={(e) => update('propertyType', e.target.value)}
|
||||
className={isSidebar ? 'w-full' : 'w-44'}
|
||||
>
|
||||
<option value="">Tất cả loại BĐS</option>
|
||||
{PROPERTY_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={filters.city}
|
||||
onChange={(e) => update('city', e.target.value)}
|
||||
className={isSidebar ? 'w-full' : 'w-44'}
|
||||
>
|
||||
<option value="">Tất cả khu vực</option>
|
||||
{CITIES.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={currentPriceIdx >= 0 ? String(currentPriceIdx) : ''}
|
||||
onChange={(e) => handlePriceRange(e.target.value)}
|
||||
className={isSidebar ? 'w-full' : 'w-40'}
|
||||
>
|
||||
<option value="">Tất cả mức giá</option>
|
||||
{PRICE_RANGES.map((r, i) => (
|
||||
<option key={i} value={String(i)}>
|
||||
{r.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
{isSidebar && (
|
||||
<>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-muted-foreground">Diện tích (m²)</label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Từ"
|
||||
value={filters.minArea}
|
||||
onChange={(e) => update('minArea', e.target.value)}
|
||||
className="w-full"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Đến"
|
||||
value={filters.maxArea}
|
||||
onChange={(e) => update('maxArea', e.target.value)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
value={filters.bedrooms}
|
||||
onChange={(e) => update('bedrooms', e.target.value)}
|
||||
className="w-full"
|
||||
>
|
||||
<option value="">Số phòng ngủ</option>
|
||||
{[1, 2, 3, 4, 5].map((n) => (
|
||||
<option key={n} value={String(n)}>
|
||||
{n}+ PN
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
placeholder="Quận/huyện"
|
||||
value={filters.district}
|
||||
onChange={(e) => update('district', e.target.value)}
|
||||
className="w-full"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isSidebar && (
|
||||
<Select
|
||||
value={filters.bedrooms}
|
||||
onChange={(e) => update('bedrooms', e.target.value)}
|
||||
className="w-36"
|
||||
>
|
||||
<option value="">Phòng ngủ</option>
|
||||
{[1, 2, 3, 4, 5].map((n) => (
|
||||
<option key={n} value={String(n)}>
|
||||
{n}+ PN
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isSidebar && (
|
||||
<Button onClick={onSearch} className="w-full">
|
||||
Tìm kiếm
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
apps/web/components/search/property-card.tsx
Normal file
101
apps/web/components/search/property-card.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { ListingDetail } from '@/lib/listings-api';
|
||||
|
||||
function formatPrice(priceVND: string): string {
|
||||
const num = Number(priceVND);
|
||||
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
|
||||
return num.toLocaleString('vi-VN');
|
||||
}
|
||||
|
||||
const PROPERTY_TYPE_LABELS: Record<string, string> = {
|
||||
APARTMENT: 'Căn hộ',
|
||||
HOUSE: 'Nhà riêng',
|
||||
VILLA: 'Biệt thự',
|
||||
LAND: 'Đất nền',
|
||||
OFFICE: 'Văn phòng',
|
||||
SHOPHOUSE: 'Shophouse',
|
||||
};
|
||||
|
||||
interface PropertyCardProps {
|
||||
listing: ListingDetail;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export function PropertyCard({ listing, compact }: PropertyCardProps) {
|
||||
return (
|
||||
<Link href={`/listings/${listing.id}`}>
|
||||
<Card className="group h-full overflow-hidden transition-shadow hover:shadow-md">
|
||||
<div className={`relative bg-muted ${compact ? 'aspect-[16/10]' : 'aspect-[4/3]'}`}>
|
||||
{listing.property.media.length > 0 ? (
|
||||
<img
|
||||
src={listing.property.media[0]?.url}
|
||||
alt={listing.property.title}
|
||||
className="h-full w-full object-cover transition-transform group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-muted-foreground">
|
||||
Chưa có ảnh
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute left-2 top-2 flex gap-1">
|
||||
<Badge variant="default" className="text-xs">
|
||||
{listing.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{PROPERTY_TYPE_LABELS[listing.property.propertyType] || listing.property.propertyType}
|
||||
</Badge>
|
||||
</div>
|
||||
{listing.property.media.length > 1 && (
|
||||
<div className="absolute bottom-2 right-2">
|
||||
<Badge variant="outline" className="bg-black/50 text-xs text-white border-none">
|
||||
{listing.property.media.length} ảnh
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-lg font-bold text-primary">
|
||||
{formatPrice(listing.priceVND)} VNĐ
|
||||
{listing.transactionType === 'RENT' && listing.rentPriceMonthly && (
|
||||
<span className="text-sm font-normal text-muted-foreground">/tháng</span>
|
||||
)}
|
||||
</p>
|
||||
<h3 className="mt-1 line-clamp-1 font-medium">{listing.property.title}</h3>
|
||||
<p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
|
||||
{listing.property.address}, {listing.property.district}, {listing.property.city}
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{listing.property.areaM2} m²
|
||||
</Badge>
|
||||
{listing.property.bedrooms != null && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{listing.property.bedrooms} PN
|
||||
</Badge>
|
||||
)}
|
||||
{listing.property.bathrooms != null && listing.property.bathrooms > 0 && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{listing.property.bathrooms} PT
|
||||
</Badge>
|
||||
)}
|
||||
{listing.property.direction && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Hướng {listing.property.direction === 'NORTH' ? 'Bắc' :
|
||||
listing.property.direction === 'SOUTH' ? 'Nam' :
|
||||
listing.property.direction === 'EAST' ? 'Đông' :
|
||||
listing.property.direction === 'WEST' ? 'Tây' :
|
||||
listing.property.direction}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
128
apps/web/components/search/search-results.tsx
Normal file
128
apps/web/components/search/search-results.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user