[feature-107] moving files around and create Playlist panel component

src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx

@@ -1,4 +1,4 @@
-import { LinkBtnProps, LinkButton } from "renderer/components/maps-mangement-components/link-button.component";
+import { LinkBtnProps, LinkButton } from "renderer/components/shared/link-button.component";
 import { SvgIcon } from "renderer/components/svgs/svg-icon.type";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
@@ -32,13 +32,13 @@ export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon: Icon,
             {linkProps && (
                 <div className="flex items-center absolute top-1.5 left-1.5">
                     <LinkButton
-                        state={linkProps.state} 
-                        className={linkProps.className ?? "block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75"} 
-                        title={linkProps.title} 
-                        onClick={linkProps.onClick} 
+                        state={linkProps.state}
+                        className={linkProps.className ?? "block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75"}
+                        title={linkProps.title}
+                        onClick={linkProps.onClick}
                     />
                 </div>
             )}
         </li>
     );
-}
+}

src/renderer/components/shared/link-button.component.tsx

@@ -0,0 +1,58 @@
+import { motion } from "framer-motion";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { BsmIcon } from "../svgs/bsm-icon.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { FolderLinkState } from "renderer/services/version-folder-linker.service";
+import React from "react";
+
+export type LinkBtnProps = {
+    className?: string;
+    title?: string;
+    state: FolderLinkState;
+    onClick?: () => unknown;
+};
+
+export function LinkButton({className, title, state, onClick}: LinkBtnProps) {
+    const t = useTranslation();
+
+    const color = useThemeColor("first-color");
+    const disabled = state === FolderLinkState.Processing || state === FolderLinkState.Pending;
+
+    const btnColor = () => {
+        switch (state) {
+            case FolderLinkState.Linked:
+                return color;
+            case FolderLinkState.Pending:
+            case FolderLinkState.Processing:
+                return "orange";
+            case FolderLinkState.Unlinked:
+                return "red";
+            default:
+                return "red";
+        }
+    }
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if(disabled){ return; }
+        onClick?.();
+    }
+
+    return (
+        <motion.div
+            variants={{ hover: { rotate: 22.5 }, tap: { rotate: 45 } }}
+            whileHover="hover"
+            whileTap="tap"
+            initial={{ rotate: 0 }}
+            className={className}
+            title={title ? t(title) : null}
+            onClick={handleClick}
+            style={{ pointerEvents: disabled ? "none" : "auto" }}
+            tabIndex={-1}
+        >
+            <span className="absolute top-0 left-0 h-full w-full rounded-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: btnColor() }} />
+            <BsmIcon className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45 brightness-150" icon={state === FolderLinkState.Linked ? "link" : "unlink"} style={{ color: btnColor() }} />
+        </motion.div>
+    );
+}