51 lines
2.4 KiB
TypeScript
51 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslation } from '../../i18n/useTranslation';
|
|
import React from 'react'
|
|
import { PROFILE_TOKENS } from './styleTokens'
|
|
|
|
export default function MediaSection({ documents }: { documents: any[] }) {
|
|
const { t } = useTranslation();
|
|
const hasDocuments = Array.isArray(documents) && documents.length > 0;
|
|
return (
|
|
<div className={`${PROFILE_TOKENS.card} p-4 sm:p-6`}>
|
|
<h2 className="text-lg font-semibold text-slate-900 mb-4 break-words">{t('autofix.ked7d533b')}</h2>
|
|
<div className="overflow-x-auto">
|
|
{hasDocuments ? (
|
|
<table className="min-w-full divide-y divide-slate-200">
|
|
<thead className="bg-slate-50/70">
|
|
<tr>
|
|
<th className={PROFILE_TOKENS.tableHead}>Name</th>
|
|
<th className={PROFILE_TOKENS.tableHead}>Type</th>
|
|
<th className={PROFILE_TOKENS.tableHead}>Uploaded</th>
|
|
<th className="px-4 py-2"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{documents.map(doc => (
|
|
<tr key={doc.id} className="bg-white/70 hover:bg-slate-50/70">
|
|
<td className="px-4 py-2 text-slate-900 break-words">{doc.name}</td>
|
|
<td className="px-4 py-2 text-slate-600 break-words">{doc.type}</td>
|
|
<td className="px-4 py-2 text-slate-600 break-words">{doc.uploaded}</td>
|
|
<td className="px-4 py-2 flex flex-wrap gap-2">
|
|
{doc.signedUrl ? (
|
|
<>
|
|
<a href={doc.signedUrl} download className="px-3 py-1 text-xs font-medium bg-[#8D6B1D] text-white rounded-2xl hover:bg-[#7A5E1A] transition">Download</a>
|
|
<a href={doc.signedUrl} target="_blank" rel="noopener noreferrer" className="px-3 py-1 text-xs font-medium bg-slate-200 text-slate-700 rounded-2xl hover:bg-slate-300 transition">Preview</a>
|
|
</>
|
|
) : (
|
|
<span className="text-xs text-slate-400 italic break-words">{t('autofix.kb3243742')}</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="text-slate-500 italic py-6 text-center break-words">{t('autofix.k60b1e339')}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|