bf9a504c40
Shell con nav agrupada y activa, PageHeader común, tipografía y tokens. Co-authored-by: Cursor <cursoragent@cursor.com>
644 lines
23 KiB
TypeScript
644 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
CheckCircle2,
|
|
Download,
|
|
ExternalLink,
|
|
FileText,
|
|
FolderOpen,
|
|
HardDrive,
|
|
Loader2,
|
|
Trash2,
|
|
Upload,
|
|
} from 'lucide-react';
|
|
import { PageHeader } from '@/components/ui';
|
|
|
|
type Asset = {
|
|
id: string;
|
|
title: string;
|
|
folder?: string;
|
|
file_name: string;
|
|
mime_type?: string | null;
|
|
bytes?: number | null;
|
|
created_at?: string;
|
|
};
|
|
|
|
type Dual = {
|
|
agency: boolean;
|
|
client: boolean;
|
|
both: boolean;
|
|
label: string;
|
|
};
|
|
|
|
type DriveFile = {
|
|
id: string;
|
|
name: string;
|
|
mimeType?: string;
|
|
bytes?: number | null;
|
|
modifiedTime?: string;
|
|
webViewLink?: string;
|
|
};
|
|
|
|
function formatBytes(n?: number | null) {
|
|
if (!n) return '—';
|
|
if (n < 1024) return `${n} B`;
|
|
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
|
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|
|
|
|
function AssetImagePreview({ assetId, alt }: { assetId: string; alt: string }) {
|
|
const [url, setUrl] = useState<string | null>(null);
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
(async () => {
|
|
const r = await fetch(`/api/assets/download?id=${encodeURIComponent(assetId)}`);
|
|
const j = await r.json();
|
|
if (!cancelled && r.ok && j.url) setUrl(j.url);
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [assetId]);
|
|
if (!url) {
|
|
return <p className="text-xs text-gray-500">Cargando preview…</p>;
|
|
}
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={url}
|
|
alt={alt}
|
|
className="w-full max-h-48 object-contain rounded-lg border border-gray-800 bg-black/40"
|
|
/>
|
|
);
|
|
}
|
|
|
|
function iconHint(mime?: string | null) {
|
|
if (!mime) return 'FILE';
|
|
if (mime.startsWith('image/')) return 'IMG';
|
|
if (mime.includes('pdf')) return 'PDF';
|
|
if (mime.includes('folder')) return 'DIR';
|
|
if (mime.includes('sheet') || mime.includes('csv') || mime.includes('excel'))
|
|
return 'XLS';
|
|
if (mime.includes('zip') || mime.includes('rar')) return 'ZIP';
|
|
return 'FILE';
|
|
}
|
|
|
|
export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string }) {
|
|
const [tab, setTab] = useState<'portal' | 'drive'>('portal');
|
|
const [assets, setAssets] = useState<Asset[]>([]);
|
|
const [driveFiles, setDriveFiles] = useState<DriveFile[]>([]);
|
|
const [driveFolder, setDriveFolder] = useState<string | null>(null);
|
|
const [warning, setWarning] = useState<string | null>(null);
|
|
const [folder, setFolder] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
const [drag, setDrag] = useState(false);
|
|
const [dualMap, setDualMap] = useState<Record<string, Dual>>({});
|
|
const [detailId, setDetailId] = useState<string | null>(null);
|
|
const [comments, setComments] = useState<
|
|
{ id: string; body: string; author_party: string; author_email?: string; created_at: string }[]
|
|
>([]);
|
|
const [commentText, setCommentText] = useState('');
|
|
const [party, setParty] = useState<'agency' | 'client'>('client');
|
|
const [collabBusy, setCollabBusy] = useState(false);
|
|
|
|
const loadPortal = useCallback(async () => {
|
|
const res = await fetch('/api/assets');
|
|
const data = await res.json();
|
|
const list: Asset[] = data.assets || [];
|
|
setAssets(list);
|
|
if (data.warning) setWarning(data.warning);
|
|
if (list.length) {
|
|
const ids = list.map((a) => a.id).join(',');
|
|
const c = await fetch(`/api/assets/collab?ids=${ids}`);
|
|
const cj = await c.json();
|
|
if (c.ok) {
|
|
setDualMap(cj.dual || {});
|
|
if (cj.party) setParty(cj.party);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const loadDrive = useCallback(async () => {
|
|
const res = await fetch('/api/assets/drive');
|
|
const data = await res.json();
|
|
setDriveFiles(data.files || []);
|
|
setDriveFolder(data.folderName || null);
|
|
if (data.warning) setWarning(data.warning);
|
|
else if (data.linked) setWarning(null);
|
|
}, []);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
setErr(null);
|
|
if (tab === 'portal') await loadPortal();
|
|
else await loadDrive();
|
|
setLoading(false);
|
|
}, [tab, loadPortal, loadDrive]);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
const folders = useMemo(() => {
|
|
const s = new Set<string>();
|
|
for (const a of assets) {
|
|
if (a.folder) s.add(a.folder);
|
|
}
|
|
return [...s].sort();
|
|
}, [assets]);
|
|
|
|
const visible = useMemo(() => {
|
|
if (!folder) return assets;
|
|
return assets.filter((a) => (a.folder || '') === folder);
|
|
}, [assets, folder]);
|
|
|
|
async function uploadFiles(fileList: FileList | File[]) {
|
|
const files = [...fileList];
|
|
if (!files.length) return;
|
|
setUploading(true);
|
|
setErr(null);
|
|
const fd = new FormData();
|
|
fd.set('folder', folder);
|
|
for (const f of files) fd.append('files', f);
|
|
const res = await fetch('/api/assets', { method: 'POST', body: fd });
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setErr(
|
|
data.error ||
|
|
(data.errors || []).join(' · ') ||
|
|
'Error al subir'
|
|
);
|
|
} else if (data.errors?.length) {
|
|
setErr(data.errors.join(' · '));
|
|
}
|
|
setTab('portal');
|
|
await loadPortal();
|
|
setUploading(false);
|
|
}
|
|
|
|
async function download(id: string) {
|
|
const res = await fetch(`/api/assets/download?id=${encodeURIComponent(id)}`);
|
|
const data = await res.json();
|
|
if (!res.ok || !data.url) {
|
|
setErr(data.error || 'No se pudo descargar');
|
|
return;
|
|
}
|
|
window.open(data.url, '_blank', 'noopener,noreferrer');
|
|
}
|
|
|
|
async function openDrive(file: DriveFile) {
|
|
if (file.webViewLink) {
|
|
window.open(file.webViewLink, '_blank', 'noopener,noreferrer');
|
|
return;
|
|
}
|
|
const res = await fetch(
|
|
`/api/assets/drive?download=${encodeURIComponent(file.id)}`
|
|
);
|
|
const data = await res.json();
|
|
if (!res.ok || !data.url) {
|
|
setErr(data.error || 'No se pudo abrir en Drive');
|
|
return;
|
|
}
|
|
window.open(data.url, '_blank', 'noopener,noreferrer');
|
|
}
|
|
|
|
async function remove(id: string) {
|
|
if (!confirm('¿Eliminar este archivo de la biblioteca?')) return;
|
|
const res = await fetch(`/api/assets?id=${encodeURIComponent(id)}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
setErr(data.error || 'No se pudo borrar');
|
|
}
|
|
await loadPortal();
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
eyebrow="Contenido"
|
|
title="Activos"
|
|
description={`Archivo oficial de ${tenantLabel}. Subidas al portal se copian a Drive si está enlazado.`}
|
|
/>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setTab('portal')}
|
|
className={`text-xs px-3 py-1.5 rounded-lg border ${
|
|
tab === 'portal'
|
|
? 'border-brand-500/40 text-brand-400'
|
|
: 'border-gray-700 text-gray-400'
|
|
}`}
|
|
>
|
|
Portal
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTab('drive')}
|
|
className={`inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border ${
|
|
tab === 'drive'
|
|
? 'border-brand-500/40 text-brand-400'
|
|
: 'border-gray-700 text-gray-400'
|
|
}`}
|
|
>
|
|
<HardDrive className="w-3.5 h-3.5" />
|
|
Google Drive
|
|
{driveFolder ? ` · ${driveFolder}` : ''}
|
|
</button>
|
|
</div>
|
|
|
|
{warning && (
|
|
<p className="text-xs text-amber-400 border border-amber-500/20 rounded-lg px-3 py-2">
|
|
{warning}
|
|
</p>
|
|
)}
|
|
{err && <p className="text-xs text-red-400">{err}</p>}
|
|
|
|
{tab === 'portal' && (
|
|
<>
|
|
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
|
|
<div className="flex-1">
|
|
<label className="text-[11px] uppercase text-gray-500">
|
|
Carpeta
|
|
</label>
|
|
<input
|
|
className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
|
|
placeholder="ej. creatividades/meta o vacío = raíz"
|
|
value={folder}
|
|
onChange={(e) => setFolder(e.target.value)}
|
|
list="asset-folders"
|
|
/>
|
|
<datalist id="asset-folders">
|
|
{folders.map((f) => (
|
|
<option key={f} value={f} />
|
|
))}
|
|
</datalist>
|
|
</div>
|
|
<label className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-medium text-white cursor-pointer">
|
|
{uploading ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Upload className="w-4 h-4" />
|
|
)}
|
|
Subir archivos
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
multiple
|
|
onChange={(e) => {
|
|
if (e.target.files) void uploadFiles(e.target.files);
|
|
e.target.value = '';
|
|
}}
|
|
/>
|
|
</label>
|
|
<label className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm text-gray-300 hover:text-white cursor-pointer">
|
|
Subir carpeta
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
multiple
|
|
{...{ webkitdirectory: '', directory: '' }}
|
|
onChange={(e) => {
|
|
if (e.target.files?.length) {
|
|
const rel =
|
|
(e.target.files[0] as File & { webkitRelativePath?: string })
|
|
.webkitRelativePath || '';
|
|
const top = rel.split('/')[0];
|
|
if (top && !folder) setFolder(top);
|
|
void uploadFiles(e.target.files);
|
|
}
|
|
e.target.value = '';
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div
|
|
onDragEnter={(e) => {
|
|
e.preventDefault();
|
|
setDrag(true);
|
|
}}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDragLeave={() => setDrag(false)}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
setDrag(false);
|
|
if (e.dataTransfer.files?.length) {
|
|
void uploadFiles(e.dataTransfer.files);
|
|
}
|
|
}}
|
|
className={`rounded-xl border border-dashed px-6 py-10 text-center transition-colors ${
|
|
drag
|
|
? 'border-brand-500 bg-brand-500/10'
|
|
: 'border-gray-700 bg-[#111827]'
|
|
}`}
|
|
>
|
|
<FolderOpen className="w-8 h-8 text-gray-600 mx-auto mb-2" />
|
|
<p className="text-sm text-gray-300">
|
|
Arrastra aquí cualquier archivo (máx. 80 MB c/u)
|
|
</p>
|
|
<p className="text-[11px] text-gray-500 mt-1">
|
|
Se guarda en portal y se refleja en Drive si el cliente está
|
|
enlazado
|
|
</p>
|
|
</div>
|
|
|
|
{folders.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setFolder('')}
|
|
className={`text-[11px] px-2.5 py-1 rounded-md border ${
|
|
!folder
|
|
? 'border-brand-500/40 text-brand-400'
|
|
: 'border-gray-700 text-gray-400'
|
|
}`}
|
|
>
|
|
Todas
|
|
</button>
|
|
{folders.map((f) => (
|
|
<button
|
|
key={f}
|
|
type="button"
|
|
onClick={() => setFolder(f)}
|
|
className={`text-[11px] px-2.5 py-1 rounded-md border ${
|
|
folder === f
|
|
? 'border-brand-500/40 text-brand-400'
|
|
: 'border-gray-700 text-gray-400'
|
|
}`}
|
|
>
|
|
{f}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<p className="text-sm text-gray-500">Cargando…</p>
|
|
) : visible.length === 0 ? (
|
|
<div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
|
|
<FileText className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
|
<p className="text-base font-medium text-gray-300">
|
|
Sin archivos en esta vista
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{visible.map((a) => (
|
|
<li
|
|
key={a.id}
|
|
className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
|
|
>
|
|
<span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
|
|
{iconHint(a.mime_type)}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-white font-medium truncate">
|
|
{a.file_name}
|
|
</p>
|
|
<p className="text-[11px] text-gray-500">
|
|
{a.folder ? `${a.folder}/` : ''}
|
|
{formatBytes(a.bytes)}
|
|
{a.created_at
|
|
? ` · ${new Date(a.created_at).toLocaleString('es-ES')}`
|
|
: ''}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={async () => {
|
|
setDetailId(a.id);
|
|
const r = await fetch(
|
|
`/api/assets/collab?ids=${a.id}&resourceId=${a.id}`
|
|
);
|
|
const j = await r.json();
|
|
if (r.ok) {
|
|
setComments(j.comments || []);
|
|
if (j.dual?.[a.id]) {
|
|
setDualMap((prev) => ({ ...prev, [a.id]: j.dual[a.id] }));
|
|
}
|
|
}
|
|
}}
|
|
className="hidden sm:inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded border border-gray-700 text-gray-300 hover:text-white"
|
|
title="Comentar / validar"
|
|
>
|
|
{dualMap[a.id]?.both ? (
|
|
<span className="text-emerald-400 inline-flex items-center gap-1">
|
|
<CheckCircle2 className="w-3 h-3" /> Doble OK
|
|
</span>
|
|
) : (
|
|
<span className="text-amber-300">
|
|
{dualMap[a.id]?.label || 'En revisión'}
|
|
</span>
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => download(a.id)}
|
|
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
|
|
title="Descargar"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => remove(a.id)}
|
|
className="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10"
|
|
title="Eliminar"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{tab === 'drive' && (
|
|
<>
|
|
{loading ? (
|
|
<p className="text-sm text-gray-500">Cargando Drive…</p>
|
|
) : driveFiles.length === 0 ? (
|
|
<div className="bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
|
|
<HardDrive className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
|
<p className="text-base font-medium text-gray-300">
|
|
Sin archivos en Drive
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-2">
|
|
Conecta marketing@ en Agencia y ejecuta auto-match por nombre.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{driveFiles.map((f) => (
|
|
<li
|
|
key={f.id}
|
|
className="flex items-center gap-3 rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
|
|
>
|
|
<span className="text-[10px] font-bold tracking-wider text-gray-500 w-10">
|
|
{iconHint(f.mimeType)}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-white font-medium truncate">
|
|
{f.name}
|
|
</p>
|
|
<p className="text-[11px] text-gray-500">
|
|
{formatBytes(f.bytes)}
|
|
{f.modifiedTime
|
|
? ` · ${new Date(f.modifiedTime).toLocaleString('es-ES')}`
|
|
: ''}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => void openDrive(f)}
|
|
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
|
|
title="Abrir en Drive"
|
|
>
|
|
<ExternalLink className="w-4 h-4" />
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{detailId && (
|
|
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
|
|
<div className="w-full max-w-lg rounded-2xl border border-gray-800 bg-[#0D121F] overflow-hidden">
|
|
<div className="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-white">
|
|
{assets.find((a) => a.id === detailId)?.file_name || 'Archivo'}
|
|
</p>
|
|
<p className="text-[11px] text-gray-500">
|
|
Doble check · {dualMap[detailId]?.label || 'En revisión'} · tú:{' '}
|
|
{party === 'agency' ? 'agencia' : 'cliente'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDetailId(null)}
|
|
className="text-xs text-gray-400 hover:text-white"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
<div className="p-4 space-y-3 max-h-[60vh] overflow-y-auto">
|
|
{(() => {
|
|
const a = assets.find((x) => x.id === detailId);
|
|
const isImg = a?.mime_type?.startsWith('image/');
|
|
return isImg ? (
|
|
<AssetImagePreview assetId={detailId} alt={a?.file_name || ''} />
|
|
) : (
|
|
<p className="text-xs text-gray-500">
|
|
Preview disponible para imágenes. Usa descargar para el resto.
|
|
</p>
|
|
);
|
|
})()}
|
|
<ul className="space-y-2">
|
|
{comments.length === 0 && (
|
|
<li className="text-xs text-gray-500">Sin comentarios.</li>
|
|
)}
|
|
{comments.map((c) => (
|
|
<li
|
|
key={c.id}
|
|
className="text-xs border border-gray-800 rounded-lg px-2.5 py-2"
|
|
>
|
|
<p className="text-[10px] text-gray-500 mb-1">
|
|
{c.author_party === 'agency' ? 'Agencia' : 'Cliente'}
|
|
{c.author_email ? ` · ${c.author_email}` : ''}
|
|
</p>
|
|
<p className="text-gray-200 whitespace-pre-wrap">{c.body}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex gap-2">
|
|
<input
|
|
value={commentText}
|
|
onChange={(e) => setCommentText(e.target.value)}
|
|
placeholder="Comentario…"
|
|
className="flex-1 rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-xs text-white"
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={collabBusy || !commentText.trim()}
|
|
onClick={async () => {
|
|
setCollabBusy(true);
|
|
try {
|
|
const r = await fetch('/api/assets/collab', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action: 'comment',
|
|
assetId: detailId,
|
|
body: commentText.trim(),
|
|
}),
|
|
});
|
|
const j = await r.json();
|
|
if (r.ok) {
|
|
setComments((prev) => [...prev, j.comment]);
|
|
setCommentText('');
|
|
}
|
|
} finally {
|
|
setCollabBusy(false);
|
|
}
|
|
}}
|
|
className="px-3 py-2 rounded-lg bg-sky-500/20 text-sky-300 border border-sky-500/30 text-xs"
|
|
>
|
|
Enviar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="px-4 py-3 border-t border-gray-800 flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={collabBusy}
|
|
onClick={async () => {
|
|
const mine =
|
|
party === 'agency'
|
|
? dualMap[detailId]?.agency
|
|
: dualMap[detailId]?.client;
|
|
setCollabBusy(true);
|
|
try {
|
|
const r = await fetch('/api/assets/collab', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action: mine ? 'revoke' : 'approve',
|
|
assetId: detailId,
|
|
}),
|
|
});
|
|
const j = await r.json();
|
|
if (r.ok) {
|
|
setDualMap((prev) => ({ ...prev, [detailId]: j.dual }));
|
|
}
|
|
} finally {
|
|
setCollabBusy(false);
|
|
}
|
|
}}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/40"
|
|
>
|
|
{party === 'agency'
|
|
? dualMap[detailId]?.agency
|
|
? 'Quitar OK agencia'
|
|
: 'Aprobar (agencia)'
|
|
: dualMap[detailId]?.client
|
|
? 'Quitar OK cliente'
|
|
: 'Aprobar (cliente)'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|