feat(listings-frontend): add create/edit form, detail page, and listing components
- Multi-step wizard for listing creation (basic info, location, details, pricing, images) - Listing detail page with image gallery, property specs, seller/agent info, stats - Listings index page with filters (transaction type, property type) and pagination - Edit page with tab-based form (read-only until backend PATCH endpoint available) - Drag & drop image upload component with preview and multi-file support - Dashboard layout with navigation bar - New UI primitives: textarea, select, badge, tabs - Listings API client with typed endpoints matching backend contract - Zod validation schemas for all form steps - Status badges with Vietnamese labels for all listing states - Responsive design across all pages Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
61
apps/web/app/(dashboard)/layout.tsx
Normal file
61
apps/web/app/(dashboard)/layout.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useAuthStore } from '@/lib/auth-store';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const navItems = [
|
||||
{ href: '/', label: 'Trang chủ', icon: '🏠' },
|
||||
{ href: '/listings', label: 'Tin đăng', icon: '📋' },
|
||||
{ href: '/listings/new', label: 'Đăng tin', icon: '➕' },
|
||||
];
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const { user, logout } = useAuthStore();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="mx-auto flex h-14 max-w-7xl items-center px-4">
|
||||
<Link href="/" className="mr-6 flex items-center space-x-2">
|
||||
<span className="text-lg font-bold text-primary">GoodGo</span>
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center space-x-1">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
||||
pathname === item.href
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
<span className="mr-1.5">{item.icon}</span>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="ml-auto flex items-center space-x-3">
|
||||
{user && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{user.fullName}
|
||||
</span>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={logout}>
|
||||
Đăng xuất
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user