e21e096e54
- Add grid/map view toggle on /du-an listing page with Mapbox project markers - Enhance du-an detail with master plan viewer, neighborhood radar chart, POI map, and price history chart - Create neighborhood component suite: radar chart (Recharts), POI map (Mapbox), score badges - Add du-an API client, server-side fetching, and React Query hooks - Wire NotificationBell into public layout header for authenticated users - Fix missing PROJECT_STATUS_COLORS import in du-an detail client Co-Authored-By: Paperclip <noreply@paperclip.ing>
648 lines
22 KiB
TypeScript
648 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Building2,
|
|
Calendar,
|
|
Download,
|
|
Expand,
|
|
FileText,
|
|
Grid3X3,
|
|
Home,
|
|
MapPin,
|
|
Phone,
|
|
X,
|
|
} from 'lucide-react';
|
|
import dynamic from 'next/dynamic';
|
|
import Image from 'next/image';
|
|
import * as React from 'react';
|
|
import { ImageGallery } from '@/components/listings/image-gallery';
|
|
import type { POICategory } from '@/components/neighborhood';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { formatPrice } from '@/lib/currency';
|
|
import {
|
|
PROJECT_PROPERTY_TYPE_LABELS,
|
|
PROJECT_STATUS_COLORS,
|
|
PROJECT_STATUS_LABELS,
|
|
duAnApi,
|
|
type ProjectDetail,
|
|
} from '@/lib/du-an-api';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const PriceTrendChart = dynamic(
|
|
() => import('@/components/charts/price-trend-chart').then((m) => m.PriceTrendChart),
|
|
{ ssr: false },
|
|
);
|
|
const NeighborhoodRadarChart = dynamic(
|
|
() => import('@/components/neighborhood').then((m) => m.NeighborhoodRadarChart),
|
|
{ ssr: false },
|
|
);
|
|
const NeighborhoodPOIMap = dynamic(
|
|
() => import('@/components/neighborhood').then((m) => m.NeighborhoodPOIMap),
|
|
{ ssr: false },
|
|
);
|
|
|
|
type Tab = 'amenities' | 'location' | 'price' | 'listings' | 'documents';
|
|
|
|
const TABS: { key: Tab; label: string }[] = [
|
|
{ key: 'amenities', label: 'Tiện ích' },
|
|
{ key: 'location', label: 'Vị trí' },
|
|
{ key: 'price', label: 'Giá' },
|
|
{ key: 'listings', label: 'Tin đăng' },
|
|
{ key: 'documents', label: 'Tài liệu' },
|
|
];
|
|
|
|
interface DuAnDetailClientProps {
|
|
project: ProjectDetail;
|
|
}
|
|
|
|
export function DuAnDetailClient({ project }: DuAnDetailClientProps) {
|
|
const [activeTab, setActiveTab] = React.useState<Tab>('amenities');
|
|
const [inquiryForm, setInquiryForm] = React.useState({
|
|
name: '',
|
|
phone: '',
|
|
message: '',
|
|
});
|
|
const [inquiryState, setInquiryState] = React.useState<
|
|
'idle' | 'loading' | 'success' | 'error'
|
|
>('idle');
|
|
|
|
const statusLabel = PROJECT_STATUS_LABELS[project.status];
|
|
const statusColor = PROJECT_STATUS_COLORS[project.status];
|
|
|
|
const handleInquirySubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!inquiryForm.name.trim() || !inquiryForm.phone.trim()) return;
|
|
|
|
setInquiryState('loading');
|
|
try {
|
|
await duAnApi.submitInquiry(project.id, {
|
|
name: inquiryForm.name.trim(),
|
|
phone: inquiryForm.phone.trim(),
|
|
message: inquiryForm.message.trim(),
|
|
});
|
|
setInquiryState('success');
|
|
} catch {
|
|
setInquiryState('error');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto max-w-7xl px-4 py-6">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<div className="mb-2 flex flex-wrap items-center gap-2">
|
|
<Badge className={cn('text-xs', statusColor)} variant="secondary">
|
|
{statusLabel}
|
|
</Badge>
|
|
{project.propertyTypes.map((t) => (
|
|
<Badge key={t} variant="outline" className="text-xs">
|
|
{PROJECT_PROPERTY_TYPE_LABELS[t]}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<h1 className="text-2xl font-bold md:text-3xl">{project.name}</h1>
|
|
<div className="mt-2 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<MapPin className="h-4 w-4" />
|
|
{project.address}, {project.district}, {project.city}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Building2 className="h-4 w-4" />
|
|
{project.developer.name}
|
|
</span>
|
|
{project.completionDate && (
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="h-4 w-4" />
|
|
Bàn giao: {new Date(project.completionDate).toLocaleDateString('vi-VN')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gallery */}
|
|
<ImageGallery
|
|
media={project.media
|
|
.filter((m) => m.type === 'image')
|
|
.map((m) => ({ id: m.id, type: 'image' as const, url: m.url, order: m.order, caption: m.caption }))}
|
|
/>
|
|
|
|
{/* Quick stats */}
|
|
<div className="my-6 grid grid-cols-2 gap-4 rounded-lg border bg-card p-4 sm:grid-cols-4">
|
|
<QuickStat
|
|
icon={<Grid3X3 className="h-5 w-5" />}
|
|
label="Tổng diện tích"
|
|
value={`${project.totalArea.toLocaleString('vi-VN')} m²`}
|
|
/>
|
|
<QuickStat
|
|
icon={<Home className="h-5 w-5" />}
|
|
label="Số căn"
|
|
value={`${project.totalUnits}`}
|
|
/>
|
|
<QuickStat
|
|
icon={<Building2 className="h-5 w-5" />}
|
|
label="Số block"
|
|
value={`${project.blocks.length}`}
|
|
/>
|
|
<QuickStat
|
|
label="Giá từ"
|
|
value={project.minPrice ? formatPrice(project.minPrice) : 'Liên hệ'}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{/* Main content */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{/* Description */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tổng quan dự án</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap text-sm leading-relaxed">
|
|
{project.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Blocks */}
|
|
{project.blocks.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Phân khu / Block</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{project.blocks.map((block) => (
|
|
<div
|
|
key={block.id}
|
|
className="rounded-lg border p-3"
|
|
>
|
|
<p className="font-medium">{block.name}</p>
|
|
<div className="mt-1 flex gap-4 text-xs text-muted-foreground">
|
|
<span>{block.totalUnits} căn</span>
|
|
<span>{block.availableUnits} còn trống</span>
|
|
<span>{block.floors} tầng</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Master plan */}
|
|
<MasterPlanViewer project={project} />
|
|
|
|
{/* Tabs */}
|
|
<div>
|
|
<div className="flex gap-1 overflow-x-auto border-b" role="tablist">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
role="tab"
|
|
aria-selected={activeTab === tab.key}
|
|
className={cn(
|
|
'shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition-colors',
|
|
activeTab === tab.key
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground',
|
|
)}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
{activeTab === 'amenities' && <AmenitiesTab project={project} />}
|
|
{activeTab === 'location' && <LocationTab project={project} />}
|
|
{activeTab === 'price' && <PriceTab project={project} />}
|
|
{activeTab === 'listings' && <ListingsTab project={project} />}
|
|
{activeTab === 'documents' && <DocumentsTab project={project} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Developer card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Chủ đầu tư</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center gap-3">
|
|
{project.developer.logoUrl ? (
|
|
<Image
|
|
src={project.developer.logoUrl}
|
|
alt={project.developer.name}
|
|
width={48}
|
|
height={48}
|
|
className="rounded-lg object-contain"
|
|
/>
|
|
) : (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<Building2 className="h-6 w-6 text-primary" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-medium">{project.developer.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{project.developer.totalProjects} dự án
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Inquiry form */}
|
|
<Card className="lg:sticky lg:top-20">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Nhận tư vấn</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{inquiryState === 'success' ? (
|
|
<div className="py-4 text-center">
|
|
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
|
<Phone className="h-6 w-6 text-green-600" />
|
|
</div>
|
|
<p className="font-medium">Đã gửi thành công!</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Chúng tôi sẽ liên hệ bạn sớm nhất.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleInquirySubmit} className="space-y-3">
|
|
{inquiryState === 'error' && (
|
|
<p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
Gửi thất bại. Vui lòng thử lại.
|
|
</p>
|
|
)}
|
|
<div>
|
|
<Label htmlFor="inquiry-name">Họ tên</Label>
|
|
<Input
|
|
id="inquiry-name"
|
|
placeholder="Nguyễn Văn A"
|
|
value={inquiryForm.name}
|
|
onChange={(e) =>
|
|
setInquiryForm((f) => ({ ...f, name: e.target.value }))
|
|
}
|
|
required
|
|
disabled={inquiryState === 'loading'}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="inquiry-phone">Số điện thoại</Label>
|
|
<Input
|
|
id="inquiry-phone"
|
|
type="tel"
|
|
placeholder="0912345678"
|
|
value={inquiryForm.phone}
|
|
onChange={(e) =>
|
|
setInquiryForm((f) => ({ ...f, phone: e.target.value }))
|
|
}
|
|
required
|
|
disabled={inquiryState === 'loading'}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="inquiry-message">Tin nhắn</Label>
|
|
<Textarea
|
|
id="inquiry-message"
|
|
placeholder="Tôi muốn tìm hiểu thêm về dự án này..."
|
|
value={inquiryForm.message}
|
|
onChange={(e) =>
|
|
setInquiryForm((f) => ({ ...f, message: e.target.value }))
|
|
}
|
|
rows={3}
|
|
disabled={inquiryState === 'loading'}
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={inquiryState === 'loading'}
|
|
>
|
|
{inquiryState === 'loading' ? 'Đang gửi...' : 'Nhận tư vấn'}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Sub-components ────────────────────────────────────────
|
|
|
|
function QuickStat({
|
|
icon,
|
|
label,
|
|
value,
|
|
}: {
|
|
icon?: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{icon && <div className="text-muted-foreground">{icon}</div>}
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="text-sm font-semibold">{value}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AmenitiesTab({ project }: { project: ProjectDetail }) {
|
|
if (project.amenities.length === 0) {
|
|
return <p className="text-sm text-muted-foreground">Chưa cập nhật tiện ích.</p>;
|
|
}
|
|
|
|
const grouped = project.amenities.reduce(
|
|
(acc, a) => {
|
|
const cat = a.category || 'Khác';
|
|
if (!acc[cat]) acc[cat] = [];
|
|
acc[cat].push(a);
|
|
return acc;
|
|
},
|
|
{} as Record<string, typeof project.amenities>,
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{Object.entries(grouped).map(([category, items]) => (
|
|
<div key={category}>
|
|
<h4 className="mb-2 text-sm font-medium">{category}</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{items.map((a) => (
|
|
<Badge key={a.id} variant="secondary" className="gap-1">
|
|
{a.name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const POI_TYPE_MAP: Record<string, POICategory> = {
|
|
school: 'school',
|
|
hospital: 'hospital',
|
|
transit: 'transit',
|
|
shopping: 'shopping',
|
|
restaurant: 'restaurant',
|
|
park: 'park',
|
|
};
|
|
|
|
function LocationTab({ project }: { project: ProjectDetail }) {
|
|
const mapPois = project.pois.map((poi) => ({
|
|
id: poi.id,
|
|
name: poi.name,
|
|
category: (POI_TYPE_MAP[poi.type] || 'shopping') as POICategory,
|
|
lat: poi.latitude,
|
|
lng: poi.longitude,
|
|
distance: poi.distance,
|
|
}));
|
|
|
|
const hasCoordinates = project.latitude != null && project.longitude != null;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<p className="text-sm">
|
|
{project.address}, {project.district}, {project.city}
|
|
</p>
|
|
|
|
{/* Map */}
|
|
{hasCoordinates && (
|
|
<NeighborhoodPOIMap
|
|
center={{ lat: project.latitude!, lng: project.longitude! }}
|
|
pois={mapPois}
|
|
height="400px"
|
|
/>
|
|
)}
|
|
|
|
{/* Neighborhood scores radar chart */}
|
|
{project.neighborhoodScores.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-2 text-sm font-medium">Đánh giá khu vực</h4>
|
|
<NeighborhoodRadarChart
|
|
categories={project.neighborhoodScores.map((s) => ({
|
|
category: s.category,
|
|
label: s.label,
|
|
score: s.score,
|
|
}))}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* POI list fallback (when no map) */}
|
|
{!hasCoordinates && project.pois.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-2 text-sm font-medium">Tiện ích lân cận</h4>
|
|
<div className="space-y-2">
|
|
{project.pois.slice(0, 10).map((poi) => (
|
|
<div key={poi.id} className="flex items-center justify-between text-sm">
|
|
<span>{poi.name}</span>
|
|
<span className="text-muted-foreground">
|
|
{poi.distance < 1000
|
|
? `${poi.distance}m`
|
|
: `${(poi.distance / 1000).toFixed(1)}km`}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MasterPlanViewer({ project }: { project: ProjectDetail }) {
|
|
const [expanded, setExpanded] = React.useState(false);
|
|
const masterPlans = project.media.filter((m) => m.type === 'master_plan');
|
|
|
|
if (masterPlans.length === 0) return null;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Mặt bằng tổng thể</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{masterPlans.map((mp) => (
|
|
<div key={mp.id} className="group relative overflow-hidden rounded-lg border">
|
|
<Image
|
|
src={mp.url}
|
|
alt={mp.caption || 'Mặt bằng tổng thể'}
|
|
width={600}
|
|
height={400}
|
|
className="h-auto w-full object-contain"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="absolute right-2 top-2 rounded-full bg-black/50 p-1.5 text-white opacity-0 transition-opacity group-hover:opacity-100"
|
|
onClick={() => setExpanded(true)}
|
|
>
|
|
<Expand className="h-4 w-4" />
|
|
</button>
|
|
{mp.caption && (
|
|
<p className="px-2 py-1.5 text-center text-xs text-muted-foreground">
|
|
{mp.caption}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Fullscreen overlay */}
|
|
{expanded && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
|
|
onClick={() => setExpanded(false)}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="absolute right-4 top-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
|
|
onClick={() => setExpanded(false)}
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
<Image
|
|
src={masterPlans[0]!.url}
|
|
alt="Mặt bằng tổng thể"
|
|
width={1200}
|
|
height={800}
|
|
className="max-h-[90vh] max-w-[90vw] object-contain"
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function PriceTab({ project }: { project: ProjectDetail }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Price ranges by type */}
|
|
{project.priceRanges.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-2 text-sm font-medium">Bảng giá theo loại hình</h4>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="px-3 py-2 text-left font-medium">Loại</th>
|
|
<th className="px-3 py-2 text-right font-medium">Giá thấp nhất</th>
|
|
<th className="px-3 py-2 text-right font-medium">Giá cao nhất</th>
|
|
<th className="px-3 py-2 text-right font-medium">Giá/m²</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{project.priceRanges.map((pr) => (
|
|
<tr key={pr.propertyType} className="border-b">
|
|
<td className="px-3 py-2">
|
|
{PROJECT_PROPERTY_TYPE_LABELS[pr.propertyType]}
|
|
</td>
|
|
<td className="px-3 py-2 text-right">{formatPrice(pr.minPrice)}</td>
|
|
<td className="px-3 py-2 text-right">{formatPrice(pr.maxPrice)}</td>
|
|
<td className="px-3 py-2 text-right text-muted-foreground">
|
|
{pr.pricePerM2Min != null
|
|
? `${(pr.pricePerM2Min / 1_000_000).toFixed(1)} - ${(pr.pricePerM2Max! / 1_000_000).toFixed(1)} tr/m²`
|
|
: '—'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Price history chart */}
|
|
{project.priceHistory.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-2 text-sm font-medium">Lịch sử giá</h4>
|
|
<PriceTrendChart
|
|
data={project.priceHistory.map((ph) => ({
|
|
period: ph.period,
|
|
'Gia/m2': ph.avgPricePerM2 / 1_000_000,
|
|
'Tin đăng': ph.transactionCount,
|
|
}))}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{project.priceRanges.length === 0 && project.priceHistory.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">Chưa cập nhật thông tin giá.</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ListingsTab({ project }: { project: ProjectDetail }) {
|
|
return (
|
|
<div>
|
|
{project.linkedListingCount > 0 ? (
|
|
<div className="text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
{project.linkedListingCount} tin đăng liên quan đến dự án này
|
|
</p>
|
|
<a
|
|
href={`/search?projectName=${encodeURIComponent(project.name)}`}
|
|
className="mt-3 inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
Xem tất cả tin đăng
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
Chưa có tin đăng nào liên quan đến dự án này.
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DocumentsTab({ project }: { project: ProjectDetail }) {
|
|
if (project.documents.length === 0) {
|
|
return <p className="text-sm text-muted-foreground">Chưa có tài liệu nào.</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{project.documents.map((doc) => (
|
|
<a
|
|
key={doc.id}
|
|
href={doc.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-accent"
|
|
>
|
|
<FileText className="h-5 w-5 shrink-0 text-primary" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{doc.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{doc.type} · {(doc.sizeBytes / 1024 / 1024).toFixed(1)} MB
|
|
</p>
|
|
</div>
|
|
<Download className="h-4 w-4 text-muted-foreground" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|