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