Add link to Winamp Skin Museum

packages/webamp/demo/js/DemoDesktop.tsx

@@ -6,6 +6,8 @@ import SkinIcon from "./SkinIcon";
 import { /* defaultInitialTracks, */ SHOW_DESKTOP_ICONS } from "./config";
 import { useWindowSize } from "../../js/hooks";
 import avaliableSkins from "./avaliableSkins";
+import DesktopLinkIcon from "./DesktopLinkIcon";
+import museumIcon from "../images/icons/internet-folder-32x32.png";
 // import MilkIcon from "./MilkIcon";
 
 interface Props {
@@ -34,7 +36,7 @@ const DemoDesktop = ({ webamp }: Props) => {
       */
       ...avaliableSkins.map((skin) => {
         return <SkinIcon webamp={webamp} skin={skin} />;
-      })
+      }),
       /*
       <MilkIcon
         webamp={webamp}
@@ -44,7 +46,11 @@ const DemoDesktop = ({ webamp }: Props) => {
           name: "105",
         }}
       />
-      */
+      */ <DesktopLinkIcon
+        iconUrl={museumIcon}
+        name="Winamp Skin Musuem"
+        href={"https://skins.webamp.org"}
+      />
     );
   }
   return (

packages/webamp/demo/js/DesktopLinkIcon.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState, useRef } from "react";
+import classnames from "classnames";
+
+interface Props {
+  iconUrl: string;
+  name: string;
+  href: string;
+}
+
+const DesktopLinkIcon = ({ iconUrl, href, name }: Props) => {
+  const ref = useRef<HTMLAnchorElement>(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 (
+    <a
+      ref={ref}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ display: "block", textDecoration: "none" }}
+      onDoubleClick={() => {
+        setSelected(false);
+      }}
+      onClick={(e) => {
+        if (!selected) {
+          e.preventDefault();
+        }
+        setSelected(true);
+      }}
+      className={classnames("desktop-icon", { selected })}
+    >
+      <img src={iconUrl} style={{ width: 32, height: 32 }} />
+      <div className="desktop-icon-title">{name}</div>
+    </a>
+  );
+};
+
+export default DesktopLinkIcon;