Extract DesktopIcon component

demo/css/page.css

@@ -162,11 +162,7 @@ body {
   image-rendering: pixelated;
 }
 
-#webamp-icon.hidden {
-  display: none;
-}
-
-.webamp-icon-title {
+.desktop-icon-title {
   color: white;
   font-family: "MS Sans Serif", "Segoe UI", sans-serif;
   font-size: 11px;
@@ -176,7 +172,7 @@ body {
   border: 1px dotted transparent;
 }
 
-#webamp-icon .selected .webamp-icon-title {
+.desktop-icon.selected .desktop-icon-title {
   background-color: #000080;
   border-color: white;
 }

demo/js/DesktopIcon.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState, useRef } from "react";
+import classnames from "classnames";
+
+interface Props {
+  iconUrl: string;
+  name: string;
+  onOpen: () => void;
+}
+
+const DesktopIcon = ({ iconUrl, onOpen, name }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [selected, setSelected] = useState(false);
+
+  useEffect(() => {
+    if (!selected) {
+      return;
+    }
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current != null && ref.current.contains(e.target as Element)) {
+        return;
+      }
+      setSelected(false);
+    };
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, [selected]);
+
+  return (
+    <div
+      ref={ref}
+      onDoubleClick={() => {
+        onOpen();
+        setSelected(false);
+      }}
+      onClick={() => setSelected(true)}
+      className={classnames("desktop-icon", { selected })}
+    >
+      <img src={iconUrl} style={{ width: 48, height: 48 }} />
+      <div className="desktop-icon-title">{name}</div>
+    </div>
+  );
+};
+
+export default DesktopIcon;

demo/js/WebampIcon.tsx

@@ -1,59 +1,34 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore
 import iconSmall from "../images/manifest/icon-48x48.png";
+import DesktopIcon from "./DesktopIcon";
 
-const icon = window.devicePixelRatio > 1 ? iconLarge : iconSmall;
+const iconUrl = window.devicePixelRatio > 1 ? iconLarge : iconSmall;
 
 interface Props {
   webamp: WebampLazy;
 }
 
 const WebampIcon = (props: Props) => {
-  const ref = useRef<HTMLDivElement>(null);
   const [hidden, setHidden] = useState(true);
-  const [selected, setSelected] = useState(false);
   useEffect(() => {
     return props.webamp.onClose(() => {
       setHidden(false);
-      setSelected(false);
     });
   }, [props.webamp]);
 
-  useEffect(() => {
-    if (!selected) {
-      return;
-    }
-    const handleClick = (e: MouseEvent) => {
-      if (ref.current != null && ref.current.contains(e.target as Element)) {
-        return;
-      }
-      setSelected(false);
-    };
-    document.addEventListener("click", handleClick);
-    return () => document.removeEventListener("click", handleClick);
-  }, [selected]);
-
   if (hidden) {
     return null;
   }
-  return (
-    <div
-      ref={ref}
-      onDoubleClick={() => {
-        props.webamp.reopen();
-        setHidden(true);
-        setSelected(false);
-      }}
-      onClick={() => setSelected(true)}
-      className={selected ? "selected" : ""}
-    >
-      <img src={icon} style={{ width: 48, height: 48 }} />
-      <div className="webamp-icon-title">Webamp</div>
-    </div>
-  );
+
+  function onOpen() {
+    props.webamp.reopen();
+    setHidden(true);
+  }
+  return <DesktopIcon iconUrl={iconUrl} name="Webamp" onOpen={onOpen} />;
 };
 
 export default WebampIcon;