Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: new status indicators added to series list on mobile (#3024)
* fix: new status indicators added to series list * refactor: component will render icons and has updated props
- Loading branch information
Showing
2 changed files
with
162 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { | ||
BellIcon, | ||
CheckIcon, | ||
ClockIcon, | ||
MinusSmIcon, | ||
} from '@heroicons/react/solid'; | ||
import { MediaStatus } from '@server/constants/media'; | ||
|
||
interface StatusBadgeMiniProps { | ||
status: MediaStatus; | ||
is4k?: boolean; | ||
} | ||
|
||
const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => { | ||
const badgeStyle = ['w-5 rounded-full p-0.5 text-white ring-1']; | ||
let indicatorIcon: React.ReactNode; | ||
|
||
switch (status) { | ||
case MediaStatus.PROCESSING: | ||
badgeStyle.push('bg-indigo-500 ring-indigo-400'); | ||
indicatorIcon = <ClockIcon />; | ||
break; | ||
case MediaStatus.AVAILABLE: | ||
badgeStyle.push('bg-green-500 ring-green-400'); | ||
indicatorIcon = <CheckIcon />; | ||
break; | ||
case MediaStatus.PENDING: | ||
badgeStyle.push('bg-yellow-500 ring-yellow-400'); | ||
indicatorIcon = <BellIcon />; | ||
break; | ||
case MediaStatus.PARTIALLY_AVAILABLE: | ||
badgeStyle.push('bg-green-500 ring-green-400'); | ||
indicatorIcon = <MinusSmIcon />; | ||
break; | ||
} | ||
|
||
return ( | ||
<div className="inline-flex whitespace-nowrap rounded-full text-xs font-semibold leading-5 ring-1 ring-gray-700"> | ||
<div className={badgeStyle.join(' ')}>{indicatorIcon}</div> | ||
{is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>} | ||
</div> | ||
); | ||
}; | ||
|
||
export default StatusBadgeMini; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters