Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-14 18:46:17 +00:00
Code Issues Releases Activity

components/hubPicker: use images instead of text

Browse Source
This commit is contained in:
David Lechner
2022-10-28 18:01:39 -05:00
committed by David Lechner
parent 9025cebaa1
commit 7810a8ee87
4 changed files with 71 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -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",
src/components/hubPicker/HubPicker.tsx
+47 -6
View File
@@ -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>
);
};
src/components/hubPicker/hubPicker.scss
+15
View File
@@ -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;
}
}
yarn.lock
+8
View File
@@ -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