feat(media): add link to the item on plex (#735)

Co-authored-by: sct <sctsnipe@gmail.com>

src/components/Common/Badge/index.tsx

@@ -22,7 +22,7 @@ const Badge: React.FC<BadgeProps> = ({
       badgeStyle.push('bg-yellow-500 text-yellow-100');
       break;
     case 'success':
-      badgeStyle.push('bg-green-400 text-green-100');
+      badgeStyle.push('bg-green-500 text-green-100');
       break;
     default:
       badgeStyle.push('bg-indigo-500 text-indigo-100');

src/components/Common/ButtonWithDropdown/index.tsx

@@ -9,22 +9,41 @@ import useClickOutside from '../../../hooks/useClickOutside';
 import Transition from '../../Transition';
 import { withProperties } from '../../../utils/typeHelpers';
 
-const DropdownItem: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
+interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  buttonType?: 'primary' | 'ghost';
+}
+
+const DropdownItem: React.FC<DropdownItemProps> = ({
   children,
+  buttonType = 'primary',
   ...props
-}) => (
-  <a
-    className="flex items-center px-4 py-2 text-sm leading-5 text-white bg-indigo-600 cursor-pointer hover:bg-indigo-500 hover:text-white focus:outline-none focus:border-indigo-700 focus:text-white"
-    {...props}
-  >
-    {children}
-  </a>
-);
+}) => {
+  let styleClass = '';
+
+  switch (buttonType) {
+    case 'ghost':
+      styleClass =
+        'text-white bg-gray-700 hover:bg-gray-600 hover:text-white focus:border-gray-500 focus:text-white';
+      break;
+    default:
+      styleClass =
+        'text-white bg-indigo-600 hover:bg-indigo-500 hover:text-white focus:border-indigo-700 focus:text-white';
+  }
+  return (
+    <a
+      className={`flex items-center px-4 py-2 text-sm leading-5 cursor-pointer focus:outline-none ${styleClass}`}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
 
 interface ButtonWithDropdownProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   text: ReactNode;
   dropdownIcon?: ReactNode;
+  buttonType?: 'primary' | 'ghost';
 }
 
 const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
@@ -32,29 +51,52 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
   children,
   dropdownIcon,
   className,
+  buttonType = 'primary',
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   useClickOutside(buttonRef, () => setIsOpen(false));
 
+  const styleClasses = {
+    mainButtonClasses: '',
+    dropdownSideButtonClasses: '',
+    dropdownClasses: '',
+  };
+
+  switch (buttonType) {
+    case 'ghost':
+      styleClasses.mainButtonClasses =
+        'text-white bg-transparent border border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100';
+      styleClasses.dropdownSideButtonClasses =
+        'bg-transparent border border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100';
+      styleClasses.dropdownClasses = 'bg-gray-700';
+      break;
+    default:
+      styleClasses.mainButtonClasses =
+        'text-white bg-indigo-600 hover:text-white hover:bg-indigo-500 active:bg-indigo-700 focus:ring-blue';
+      styleClasses.dropdownSideButtonClasses =
+        'bg-indigo-700 border border-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 focus:ring-blue';
+      styleClasses.dropdownClasses = 'bg-indigo-600';
+  }
+
   return (
     <span className="relative z-0 inline-flex h-full rounded-md shadow-sm">
       <button
         type="button"
-        className={`relative inline-flex h-full items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:ring-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:ring-blue transition ease-in-out duration-150 ${
-          children ? 'rounded-l-md' : 'rounded-md'
-        } ${className}`}
+        className={`relative inline-flex h-full items-center px-4 py-2 text-sm leading-5 font-medium z-10 hover:z-20 focus:z-20 focus:outline-none transition ease-in-out duration-150 ${
+          styleClasses.mainButtonClasses
+        } ${children ? 'rounded-l-md' : 'rounded-md'} ${className}`}
         ref={buttonRef}
         {...props}
       >
         {text}
       </button>
-      <span className="relative block -ml-px">
+      <span className="relative z-10 block -ml-px">
         {children && (
           <button
             type="button"
-            className="relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-700 border border-indigo-600 rounded-r-md hover:bg-indigo-500 focus:z-10 focus:outline-none active:bg-indigo-700 focus:ring-blue"
+            className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md focus:z-10 ${styleClasses.dropdownSideButtonClasses}`}
             aria-label="Expand"
             onClick={() => setIsOpen((state) => !state)}
           >
@@ -86,7 +128,9 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
           leaveTo="transform opacity-0 scale-95"
         >
           <div className="absolute right-0 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg">
-            <div className="bg-indigo-600 rounded-md ring-1 ring-black ring-opacity-5">
+            <div
+              className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`}
+            >
               <div className="py-1">{children}</div>
             </div>
           </div>