非表示だったリンク切り替えを表示し説明をtitle属性に追加

npocccties · Sep 12, 2023 · 1d144f8 · 1d144f8
1 parent d81bdf5
commit 1d144f8
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/components/organisms/ContentPreview.tsx b/components/organisms/ContentPreview.tsx
@@ -200,17 +200,27 @@ export default function ContentPreview({
         />
       </CardActionArea>
       <Box position="relative">
-        {linked !== undefined && onContentLinkClick && (
-          <LinkSwitch
-            sx={{
-              position: "absolute",
-              bottom: 0,
-              right: 0,
-              transform: "translateY(50%)",
-            }}
-            checked={linked}
-            onChange={handleContentLinkClick}
-          />
+        {content.type === "book" && linked !== undefined && (
+          <label
+            title={
+              onContentLinkClick
+                ? "リンクを切り替える"
+                : "ツールURLが指定されているため、リンクの切り替えはできません"
+            }
+          >
+            <LinkSwitch
+              sx={{
+                position: "absolute",
+                bottom: 0,
+                right: 0,
+                transform: "translateY(50%)",
+                filter: onContentLinkClick ? "none" : "grayscale(1)",
+              }}
+              disabled={!onContentLinkClick}
+              checked={linked}
+              onChange={handleContentLinkClick}
+            />
+          </label>
         )}
         {content.license && (
           <License