45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import SimpleTag, { TagType } from "../SimpleTag";
|
|
import PrimaryButton from "../PrimaryButton";
|
|
import { formatDownloadPercentage, toGigabytes } from "@/_utils/converter";
|
|
import { DownloadState } from "@/_models/DownloadState";
|
|
import SecondaryButton from "../SecondaryButton";
|
|
|
|
type Props = {
|
|
name: string;
|
|
total: number;
|
|
status: TagType;
|
|
downloadState?: DownloadState;
|
|
onDownloadClick?: () => void;
|
|
};
|
|
|
|
const ExploreModelItemHeader: React.FC<Props> = ({
|
|
name,
|
|
status,
|
|
total,
|
|
downloadState,
|
|
onDownloadClick,
|
|
}) => (
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<div className="flex items-center gap-2">
|
|
<span>{name}</span>
|
|
<SimpleTag title={status} type={status} clickable={false} />
|
|
</div>
|
|
{downloadState != null ? (
|
|
<SecondaryButton
|
|
disabled
|
|
title={`Downloading (${formatDownloadPercentage(
|
|
downloadState.percent
|
|
)})`}
|
|
onClick={() => {}}
|
|
/>
|
|
) : (
|
|
<PrimaryButton
|
|
title={total ? `Download (${toGigabytes(total)})` : "Download"}
|
|
onClick={() => onDownloadClick?.()}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
export default ExploreModelItemHeader;
|