feat: Radarr & Sonarr Sync (#734)

src/components/Common/Badge/index.tsx

@@ -2,11 +2,16 @@ import React from 'react';
 
 interface BadgeProps {
   badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+  className?: string;
 }
 
-const Badge: React.FC<BadgeProps> = ({ badgeType = 'default', children }) => {
+const Badge: React.FC<BadgeProps> = ({
+  badgeType = 'default',
+  className,
+  children,
+}) => {
   const badgeStyle = [
-    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
+    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full cursor-default',
   ];
 
   switch (badgeType) {
@@ -23,6 +28,10 @@ const Badge: React.FC<BadgeProps> = ({ badgeType = 'default', children }) => {
       badgeStyle.push('bg-indigo-500 text-indigo-100');
   }
 
+  if (className) {
+    badgeStyle.push(className);
+  }
+
   return <span className={badgeStyle.join(' ')}>{children}</span>;
 };
 

src/components/Common/ConfirmButton/index.tsx

@@ -0,0 +1,57 @@
+import React, { useRef, useState } from 'react';
+import useClickOutside from '../../../hooks/useClickOutside';
+import Button from '../Button';
+
+interface ConfirmButtonProps {
+  onClick: () => void;
+  confirmText: React.ReactNode;
+  className?: string;
+}
+
+const ConfirmButton: React.FC<ConfirmButtonProps> = ({
+  onClick,
+  children,
+  confirmText,
+  className,
+}) => {
+  const ref = useRef(null);
+  useClickOutside(ref, () => setIsClicked(false));
+  const [isClicked, setIsClicked] = useState(false);
+  return (
+    <Button
+      buttonType="danger"
+      className={`relative overflow-hidden ${className}`}
+      onClick={(e) => {
+        e.preventDefault();
+
+        if (!isClicked) {
+          setIsClicked(true);
+        } else {
+          onClick();
+        }
+      }}
+    >
+      &nbsp;
+      <div
+        ref={ref}
+        className={`absolute flex items-center justify-center inset-0 w-full h-full duration-300 transition transform-gpu ${
+          isClicked
+            ? '-translate-y-full opacity-0'
+            : 'translate-y-0 opacity-100'
+        }`}
+      >
+        {children}
+      </div>
+      <div
+        ref={ref}
+        className={`absolute flex items-center justify-center inset-0 w-full h-full duration-300 transition transform-gpu ${
+          isClicked ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
+        }`}
+      >
+        {confirmText}
+      </div>
+    </Button>
+  );
+};
+
+export default ConfirmButton;

src/components/Common/ListView/index.tsx

@@ -53,6 +53,9 @@ const ListView: React.FC<ListViewProps> = ({
                   userScore={title.voteAverage}
                   year={title.releaseDate}
                   mediaType={title.mediaType}
+                  inProgress={
+                    (title.mediaInfo?.downloadStatus ?? []).length > 0
+                  }
                   canExpand
                 />
               );
@@ -68,6 +71,9 @@ const ListView: React.FC<ListViewProps> = ({
                   userScore={title.voteAverage}
                   year={title.firstAirDate}
                   mediaType={title.mediaType}
+                  inProgress={
+                    (title.mediaInfo?.downloadStatus ?? []).length > 0
+                  }
                   canExpand
                 />
               );
@@ -87,7 +93,7 @@ const ListView: React.FC<ListViewProps> = ({
           return (
             <li
               key={title.id}
-              className="col-span-1 flex flex-col text-center items-center"
+              className="flex flex-col items-center col-span-1 text-center"
             >
               {titleCard}
             </li>
@@ -98,7 +104,7 @@ const ListView: React.FC<ListViewProps> = ({
           [...Array(20)].map((_item, i) => (
             <li
               key={`placeholder-${i}`}
-              className="col-span-1 flex flex-col text-center items-center"
+              className="flex flex-col items-center col-span-1 text-center"
             >
               <TitleCard.Placeholder canExpand />
             </li>