|
|
|
@ -7,31 +7,47 @@ interface StatusBadgeMiniProps {
|
|
|
|
|
status: MediaStatus;
|
|
|
|
|
is4k?: boolean;
|
|
|
|
|
inProgress?: boolean;
|
|
|
|
|
// Should the badge shrink on mobile to a smaller size? (TitleCard)
|
|
|
|
|
shrink?: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const StatusBadgeMini = ({
|
|
|
|
|
status,
|
|
|
|
|
is4k = false,
|
|
|
|
|
inProgress = false,
|
|
|
|
|
shrink = false,
|
|
|
|
|
}: StatusBadgeMiniProps) => {
|
|
|
|
|
const badgeStyle = ['w-5 rounded-full p-0.5 ring-1 bg-opacity-80'];
|
|
|
|
|
const badgeStyle = [
|
|
|
|
|
`rounded-full bg-opacity-80 shadow-md ${
|
|
|
|
|
shrink ? 'w-4 sm:w-5 border p-0' : 'w-5 ring-1 p-0.5'
|
|
|
|
|
}`,
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
let indicatorIcon: React.ReactNode;
|
|
|
|
|
|
|
|
|
|
switch (status) {
|
|
|
|
|
case MediaStatus.PROCESSING:
|
|
|
|
|
badgeStyle.push('bg-indigo-500 ring-indigo-400 text-indigo-100');
|
|
|
|
|
badgeStyle.push(
|
|
|
|
|
'bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100'
|
|
|
|
|
);
|
|
|
|
|
indicatorIcon = <ClockIcon />;
|
|
|
|
|
break;
|
|
|
|
|
case MediaStatus.AVAILABLE:
|
|
|
|
|
badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
|
|
|
|
|
badgeStyle.push(
|
|
|
|
|
'bg-green-500 border-green-400 ring-green-400 text-green-100'
|
|
|
|
|
);
|
|
|
|
|
indicatorIcon = <CheckCircleIcon />;
|
|
|
|
|
break;
|
|
|
|
|
case MediaStatus.PENDING:
|
|
|
|
|
badgeStyle.push('bg-yellow-500 ring-yellow-400 text-yellow-100');
|
|
|
|
|
badgeStyle.push(
|
|
|
|
|
'bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100'
|
|
|
|
|
);
|
|
|
|
|
indicatorIcon = <BellIcon />;
|
|
|
|
|
break;
|
|
|
|
|
case MediaStatus.PARTIALLY_AVAILABLE:
|
|
|
|
|
badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
|
|
|
|
|
badgeStyle.push(
|
|
|
|
|
'bg-green-500 border-green-400 ring-green-400 text-green-100'
|
|
|
|
|
);
|
|
|
|
|
indicatorIcon = <MinusSmallIcon />;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
@ -41,7 +57,11 @@ const StatusBadgeMini = ({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="inline-flex whitespace-nowrap rounded-full text-xs font-semibold leading-5 ring-1 ring-gray-700">
|
|
|
|
|
<div
|
|
|
|
|
className={`relative inline-flex whitespace-nowrap rounded-full border-gray-700 text-xs font-semibold leading-5 ring-gray-700 ${
|
|
|
|
|
shrink ? '' : 'ring-1'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
<div className={badgeStyle.join(' ')}>{indicatorIcon}</div>
|
|
|
|
|
{is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>}
|
|
|
|
|
</div>
|
|
|
|
|