shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): link processing/requested status badges to service URL (#1761)

Browse Source 
* feat(ui): link processing/requested status badges to service URL where available

* refactor: add URL prop to Badge component

* fix(css): tweak font weight of media rating values and request card link hover effect

* fix: only set StatusBadge serviceUrl for admins
This commit is contained in:
TheCatLady
2021-10-16 11:53:38 -04:00
committed by GitHub
parent 084a842a4f
commit 032c14a226
8 changed files with 124 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Common/Badge/index.tsx
View File

@@ -3,36 +3,64 @@ import React from 'react';
interface BadgeProps {
badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
className?: string;
url?: string;
}
const Badge: React.FC<BadgeProps> = ({
badgeType = 'default',
className,
url,
children,
}) => {
const badgeStyle = [
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full cursor-default',
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
];
if (url) {
badgeStyle.push('transition cursor-pointer');
} else {
badgeStyle.push('cursor-default');
}
switch (badgeType) {
case 'danger':
badgeStyle.push('bg-red-600 text-red-100');
if (url) {
badgeStyle.push('hover:bg-red-500');
}
break;
case 'warning':
badgeStyle.push('bg-yellow-500 text-yellow-100');
if (url) {
badgeStyle.push('hover:bg-yellow-400');
}
break;
case 'success':
badgeStyle.push('bg-green-500 text-green-100');
if (url) {
badgeStyle.push('hover:bg-green-400');
}
break;
default:
badgeStyle.push('bg-indigo-500 text-indigo-100');
if (url) {
badgeStyle.push('hover:bg-indigo-400');
}
}
if (className) {
badgeStyle.push(className);
}
return <span className={badgeStyle.join(' ')}>{children}</span>;
if (url) {
return (
<a href={url} target="_blank" rel="noopener noreferrer">
<span className={badgeStyle.join(' ')}>{children}</span>
</a>
);
} else {
return <span className={badgeStyle.join(' ')}>{children}</span>;
}
};
export default Badge;