From 7810a8ee876984efac902621fa6a9f5b96d80d0d Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 28 Oct 2022 12:52:10 -0500
Subject: [PATCH] components/hubPicker: use images instead of text

---
 package.json                            |  1 +
 src/components/hubPicker/HubPicker.tsx  | 53 ++++++++++++++++++++++---
 src/components/hubPicker/hubPicker.scss | 15 +++++++
 yarn.lock                               |  8 ++++
 4 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 src/components/hubPicker/hubPicker.scss

diff --git a/package.json b/package.json
index 62b68745..b82eebee 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
         "@pybricks/firmware": "6.1.0",
         "@pybricks/ide-docs": "2.3.0",
+        "@pybricks/images": "^1.1.0",
         "@pybricks/jedi": "^1.2.0",
         "@pybricks/mpy-cross-v5": "^2.0.0",
         "@pybricks/mpy-cross-v6": "^2.0.0",
diff --git a/src/components/hubPicker/HubPicker.tsx b/src/components/hubPicker/HubPicker.tsx
index b44aaa77..c6ae1be6 100644
--- a/src/components/hubPicker/HubPicker.tsx
+++ b/src/components/hubPicker/HubPicker.tsx
@@ -1,25 +1,66 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
+import './hubPicker.scss';
 import { Radio, RadioGroup } from '@blueprintjs/core';
 import React from 'react';
 import { useHubPickerSelectedHub } from './hooks';
 import { Hub } from '.';
 
+type HubIconProps = {
+    url: URL;
+    label: string;
+};
+
+const HubIcon: React.VoidFunctionComponent<HubIconProps> = ({ url, label }) => {
+    return <img src={url.toString()} width={64} height={64} title={label} />;
+};
+
 export const HubPicker: React.VoidFunctionComponent = () => {
     const [selectedHub, setSelectedHub] = useHubPickerSelectedHub();
 
     return (
         <RadioGroup
+            className="pb-hub-picker"
             selectedValue={selectedHub}
             onChange={(e) => setSelectedHub(e.currentTarget.value as Hub)}
         >
-            <Radio value={Hub.Move}>BOOST Move Hub</Radio>
-            <Radio value={Hub.City}>City Hub</Radio>
-            <Radio value={Hub.Technic}>Technic Hub</Radio>
-            <Radio value={Hub.Prime}>SPIKE Prime Hub</Radio>
-            <Radio value={Hub.Essential}>SPIKE Essential Hub</Radio>
-            <Radio value={Hub.Inventor}>MINDSTORMS Robot Inventor Hub</Radio>
+            <Radio value={Hub.Move}>
+                <HubIcon
+                    url={new URL('@pybricks/images/hub-move.png', import.meta.url)}
+                    label="BOOST Move Hub"
+                />
+            </Radio>
+            <Radio value={Hub.City}>
+                <HubIcon
+                    url={new URL('@pybricks/images/hub-city.png', import.meta.url)}
+                    label="City Hub"
+                />
+            </Radio>
+            <Radio value={Hub.Technic}>
+                <HubIcon
+                    url={new URL('@pybricks/images/hub-technic.png', import.meta.url)}
+                    label="Technic Hub"
+                />
+            </Radio>
+            <Radio value={Hub.Prime}>
+                <HubIcon
+                    url={new URL('@pybricks/images/hub-prime.png', import.meta.url)}
+                    label="SPIKE Prime Hub"
+                />
+            </Radio>
+            <Radio value={Hub.Essential}>
+                <HubIcon
+                    url={new URL('@pybricks/images/hub-essential.png', import.meta.url)}
+                    label="SPIKE Essential Hub"
+                />
+            </Radio>
+            <Radio value={Hub.Inventor}>
+                <HubIcon
+                    url={new URL('@pybricks/images/hub-inventor.png', import.meta.url)}
+                    label="MINDSTORMS Robot Inventor Hub"
+                />
+            </Radio>
         </RadioGroup>
     );
 };
diff --git a/src/components/hubPicker/hubPicker.scss b/src/components/hubPicker/hubPicker.scss
new file mode 100644
index 00000000..9f18ff15
--- /dev/null
+++ b/src/components/hubPicker/hubPicker.scss
@@ -0,0 +1,15 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+@use '@blueprintjs/core/lib/scss/variables' as bp;
+
+.pb-hub-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: bp.$pt-grid-size * 2;
+
+    .#{bp.$ns}-radio {
+        display: flex;
+        align-items: center;
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 449754cd..c831e479 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2648,6 +2648,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pybricks/images@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@pybricks/images@npm:1.1.0"
+  checksum: 5a635c17ebafcaaec913dfc52789a24ea8b896e7e05598be9f2c431014b3fd6bbd4431f2ad4f8540f6f5bc025e989cc470db9a4bf3ff86a75b5e160f51b7e5dd
+  languageName: node
+  linkType: hard
+
 "@pybricks/jedi@npm:^1.2.0":
   version: 1.2.0
   resolution: "@pybricks/jedi@npm:1.2.0"
@@ -2680,6 +2687,7 @@ __metadata:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.8
     "@pybricks/firmware": 6.1.0
     "@pybricks/ide-docs": 2.3.0
+    "@pybricks/images": ^1.1.0
     "@pybricks/jedi": ^1.2.0
     "@pybricks/mpy-cross-v5": ^2.0.0
     "@pybricks/mpy-cross-v6": ^2.0.0