Added icons for technologies

components/Column.tsx

@@ -9,6 +9,20 @@ import { CONSTANTS } from '../utils/constants';
 
 const TechSelect = Select.ofType<Technology>();
 
+const TechItem: FC<{ tech: Technology }> = ({ tech }) => (
+  <div
+    style={{
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridAutoColumns: 'max-content',
+      columnGap: '4px',
+    }}
+  >
+    <img src={TechMeta[tech].icon} width={16} height={16} />{' '}
+    {TechMeta[tech].label}
+  </div>
+);
+
 type ColumnProps = {
   topic: Topic;
   availableTechs: Technology[];
@@ -47,7 +61,7 @@ export const Column: FC<ColumnProps> = ({
               key={techItem}
               selected={active}
               onClick={handleClick}
-              text={TechMeta[techItem].label}
+              text={<TechItem tech={techItem} />}
             />
           )}
           onItemSelect={(techItem) => onSelect(techItem)}
@@ -61,7 +75,7 @@ export const Column: FC<ColumnProps> = ({
           }}
         >
           <Button
-            text={tech ? TechMeta[tech].label : 'Select tech...'}
+            text={tech ? <TechItem tech={tech} /> : 'Select tech...'}
             small
             outlined
             rightIcon="caret-down"

utils/techs.ts

@@ -22,12 +22,14 @@ export const TechMeta: Record<
     // alternative names that will be used while filtering with query
     // (these ids aren't used in the formation of the URL)
     alt?: string[];
+    // icons
+    icon: string;
   }
 > = {
-  js: { label: 'JavaScript', alt: ['javascript'] },
-  ts: { label: 'Typescript', alt: ['typescript'] },
-  go: { label: 'Go', alt: ['golang'] },
-  python: { label: 'Python', alt: ['py'] },
-  rust: { label: 'Rust', alt: ['rs'] },
-  java: { label: 'Java' },
+  js: { label: 'JavaScript', alt: ['javascript'], icon: '/tech-icons/js.png' },
+  ts: { label: 'Typescript', alt: ['typescript'], icon: '/tech-icons/ts.png' },
+  go: { label: 'Go', alt: ['golang'], icon: '/tech-icons/go.png' },
+  python: { label: 'Python', alt: ['py'], icon: '/tech-icons/python.png' },
+  rust: { label: 'Rust', alt: ['rs'], icon: '/tech-icons/rust.png' },
+  java: { label: 'Java', icon: '/tech-icons/java.png' },
 };