From 85be323b6ea83d89d839fe4fe59a16613c5c3d24 Mon Sep 17 00:00:00 2001
From: Florian Pagnoux <florian.pagnoux@tulip.co>
Date: Tue, 16 Sep 2025 21:25:37 -0400
Subject: [PATCH] Add spec to selected value

---
 src/components/GearItemSelect.tsx | 60 +++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/components/GearItemSelect.tsx b/src/components/GearItemSelect.tsx
index 06e95c0..0f4021e 100644
--- a/src/components/GearItemSelect.tsx
+++ b/src/components/GearItemSelect.tsx
@@ -1,11 +1,43 @@
 import { useState } from "react";
-import { useGearList } from "src/redux/api";
+import { components, OptionProps } from "react-select";
 
 import { GearSummary } from "src/apiClient/gear";
+import { useGearList } from "src/redux/api";
 
 import { Select } from "./Select";
 import { useDebounce } from "./useDebounce";
 
+type GearOption = {
+  value: string;
+  label: string;
+} & GearSummary;
+
+const GearItemOption = (props: OptionProps<GearOption>) => {
+  const { data } = props;
+  return (
+    <components.Option {...props}>
+      <span>{data.label}</span>
+      {data.specification && (
+        <div className="opacity-50 small">{data.specification}</div>
+      )}
+    </components.Option>
+  );
+};
+
+const GearItemSingleValue = (props: any) => {
+  const { data } = props;
+  return (
+    <components.SingleValue {...props}>
+      <div className="d-flex align-items-baseline gap-2">
+        <span>{data.label}</span>
+        {data.specification && (
+          <span className="opacity-50 small">{data.specification}</span>
+        )}
+      </div>
+    </components.SingleValue>
+  );
+};
+
 type Props = {
   value: string | null;
   onChange: (person: GearSummary | null | undefined) => void;
@@ -21,7 +53,7 @@ export function GearItemSelect({ value, onChange, className, invalid }: Props) {
     retired: false,
   });
 
-  const options =
+  const options: GearOption[] =
     gearList?.map((gear) => {
       return {
         value: gear.id,
@@ -33,14 +65,20 @@ export function GearItemSelect({ value, onChange, className, invalid }: Props) {
   const selectedOption = options.find((o) => o.value === value);
 
   return (
-    <Select
-      className={className}
-      options={options}
-      value={selectedOption}
-      onChange={onChange}
-      onInputChange={debouncedSetInput}
-      isLoading={isFetching || pending}
-      invalid={invalid}
-    />
+    <>
+      <Select
+        className={className}
+        options={options}
+        value={selectedOption}
+        onChange={onChange}
+        onInputChange={debouncedSetInput}
+        isLoading={isFetching || pending}
+        invalid={invalid}
+        components={{
+          Option: GearItemOption,
+          SingleValue: GearItemSingleValue,
+        }}
+      />
+    </>
   );
 }