feat: add ApkCard component
This commit is contained in:
51
app/download/ApkCard.tsx
Normal file
51
app/download/ApkCard.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
// app/download/ApkCard.tsx
|
||||
import { formatFileSize, formatDateTime } from '@/lib/fs-utils';
|
||||
|
||||
interface ApkCardProps {
|
||||
name: string;
|
||||
commit: string | null;
|
||||
size: number;
|
||||
modifiedAt: string;
|
||||
downloadUrl: string;
|
||||
highlightCommit?: string;
|
||||
}
|
||||
|
||||
export default function ApkCard({ name, commit, size, modifiedAt, downloadUrl, highlightCommit }: ApkCardProps) {
|
||||
// 高亮显示 commit id
|
||||
const displayName = commit && highlightCommit
|
||||
? name.replace(new RegExp(commit, 'gi'), (match) => `<mark class="bg-yellow-200">${match}</mark>`)
|
||||
: name;
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||||
<h3
|
||||
className="text-lg font-semibold text-gray-800 mb-2 break-all"
|
||||
dangerouslySetInnerHTML={{ __html: displayName }}
|
||||
/>
|
||||
|
||||
<div className="space-y-1 text-sm text-gray-600 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span>文件大小:</span>
|
||||
<span className="font-medium">{formatFileSize(size)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>修改时间:</span>
|
||||
<span className="font-medium">{formatDateTime(new Date(modifiedAt))}</span>
|
||||
</div>
|
||||
{commit && (
|
||||
<div className="flex justify-between">
|
||||
<span>Commit:</span>
|
||||
<span className="font-medium font-mono">{commit}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={downloadUrl}
|
||||
className="block w-full text-center bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition-colors"
|
||||
>
|
||||
下载 APK
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user