LZH-YS1998
57 lines
2.5 KiB
TypeScript
57 lines
2.5 KiB
TypeScript
import type { InstalledPackageInfo } from '../types/visual'
|
|
|
|
interface PackageCardProps {
|
|
pkg: InstalledPackageInfo
|
|
onUninstall?: (packageId: string) => void
|
|
uninstallingId?: string | null
|
|
}
|
|
|
|
export function PackageCard({ pkg, onUninstall, uninstallingId }: PackageCardProps) {
|
|
const isUninstalling = uninstallingId === pkg.package_id
|
|
|
|
return (
|
|
<div className="pkg-card">
|
|
<div className="pkg-card-header">
|
|
<img
|
|
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/%3E%3C/svg%3E"
|
|
alt="package"
|
|
className="pkg-card-icon"
|
|
/>
|
|
<div className="pkg-card-title-wrap">
|
|
<span className="pkg-card-name">{pkg.name || pkg.package_id}</span>
|
|
<span className="pkg-card-version">v{pkg.version}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pkg-card-stats">
|
|
<span className="pkg-card-stat">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E" alt="roles" className="pkg-stat-icon" />
|
|
{pkg.role_ids.length} roles
|
|
</span>
|
|
<span className="pkg-card-stat">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E" alt="templates" className="pkg-stat-icon" />
|
|
{pkg.template_ids.length} templates
|
|
</span>
|
|
</div>
|
|
|
|
{pkg.installed_at && (
|
|
<div className="pkg-card-date">
|
|
Installed {new Date(pkg.installed_at).toLocaleDateString()}
|
|
</div>
|
|
)}
|
|
|
|
{onUninstall && (
|
|
<div className="pkg-card-actions">
|
|
<button
|
|
className="pkg-btn pkg-btn-danger"
|
|
disabled={isUninstalling}
|
|
onClick={(e) => { e.stopPropagation(); onUninstall(pkg.package_id) }}
|
|
>
|
|
{isUninstalling ? 'Removing...' : 'Uninstall'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|