Add OS logos to the OS selection

harryluyah · Aug 9, 2021 · 6997b14 · 6997b14
1 parent e6ca321
commit 6997b14
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/components/guides/ButtonGroupOSSelector.tsx b/components/guides/ButtonGroupOSSelector.tsx
@@ -6,12 +6,14 @@ import { useRouter } from 'next/router';
 function ButtonGroupOSSelector() {
   const router = useRouter();
   const osList = {
-    linux: 'Linux',
-    windows: 'Windows',
-    macOS: 'macOS',
+    linux: { label: 'Linux', logoURL: 'https://static.flexpool.io/assets/os/linux.png' },
+    windows: {
+      label: 'Windows',
+      logoURL: 'https://static.flexpool.io/assets/os/windows.png',
+    },
   };
   const [selectedOS, setSelectedOS] = useState('');
-  let search;
+  let search: string;
 
   useEffect(() => {
     if (typeof window !== 'undefined') {

diff --git a/components/guides/flexfarmer/FlexfarmerDownloads.tsx b/components/guides/flexfarmer/FlexfarmerDownloads.tsx
@@ -41,7 +41,7 @@ function FlexfarmerDownloads() {
 
   return (
     <>
-      {downloadData && (
+      {downloadData && downloadData.map && (
         <ul className="unstyled flex flex-wrap">
           {downloadData.map((item) => (
             <li key={item.name} className="mr-2">

diff --git a/src/pages/GetStarted/ChiaShared/ButtonGroup.tsx b/src/pages/GetStarted/ChiaShared/ButtonGroup.tsx
@@ -36,8 +36,14 @@ const ButtonGroupWrapper = styled.div`
   }
 `;
 
+const OptionThumbnail = styled.img`
+  height: 2em;
+  width: 2em;
+  margin-right: 1em;
+`;
+
 type ButtonGroupProps = {
-  options: { [key: string]: string };
+  options: { [key: string]: { label: string; logoURL?: string } };
   selectedOption: string;
   setSelectedOption: (s: string) => void;
 };
@@ -51,7 +57,10 @@ export const ButtonGroup = (props: ButtonGroupProps) => {
         onClick={() => props.setSelectedOption(key)}
         className={`${props.selectedOption === key ? 'selected' : ''}`}
       >
-        {props.options[key] as string}
+        {props.options[key].logoURL && (
+          <OptionThumbnail src={props.options[key].logoURL} />
+        )}
+        {props.options[key].label as string}
       </Button>
     );
   }

diff --git a/src/pages/GetStarted/ChiaShared/FarmerOptionSelector.tsx b/src/pages/GetStarted/ChiaShared/FarmerOptionSelector.tsx
@@ -14,8 +14,8 @@ export const FarmerOptionSelector = (props: FarmerOptionProps) => {
   return (
     <ButtonGroup
       options={{
-        'new-farmer': t('detail_xch.new_farmer'),
-        'already-farmer': t('detail_xch.already_farmer'),
+        'new-farmer': { label: t('detail_xch.new_farmer') },
+        'already-farmer': { label: t('detail_xch.already_farmer') },
       }}
       setSelectedOption={(s: string) => {
         setSelectedFarmerOption(s);