Separate lens and focal length, add more boyce thompson photos, tag existing appropriately

src/components/GalleryImage/GalleryImage.js

@@ -10,6 +10,7 @@ import Calendar from "@spectrum-icons/workflow/Calendar";
 import Stopwatch from "@spectrum-icons/workflow/Stopwatch";
 import Exposure from "@spectrum-icons/workflow/Exposure";
 import Filmroll from "@spectrum-icons/workflow/Filmroll";
+import Dolly from "@spectrum-icons/workflow/Dolly";
 import Camera from "@spectrum-icons/workflow/Camera";
 import Circle from "@spectrum-icons/workflow/Circle";
 import Location from "@spectrum-icons/workflow/Location";
@@ -272,7 +273,7 @@ const GalleryImage = ({ data, location: { state } }) => {
                   <MetadataItem
                     data={shutterSpeed}
                     icon={<Stopwatch UNSAFE_style={IconStyle} />}
-                    title="shutter speed"
+                    title="shutter"
                   />
                   {meta.FNumber && (
                     <MetadataItem
@@ -286,6 +287,11 @@ const GalleryImage = ({ data, location: { state } }) => {
                     icon={<Filmroll UNSAFE_style={IconStyle} />}
                     title="ISO"
                   />
+                  <MetadataItem
+                    data={meta.FocalLength + "mm"}
+                    icon={<Dolly UNSAFE_style={IconStyle} />}
+                    title="focal"
+                  />
                 </div>
                 <MetadataItem
                   data={locationString}
@@ -301,12 +307,7 @@ const GalleryImage = ({ data, location: { state } }) => {
                 )}
                 {(meta.LensModel || meta.FocalLength) && (
                   <MetadataItem
-                    data={[
+                    data={ meta.LensModel === "----" ? null : meta.LensModel}
-                      meta.LensModel === "----" ? null : meta.LensModel,
-                      meta.FocalLength && `${meta.FocalLength}mm`,
-                    ]
-                      .filter(Boolean)
-                      .join(" @")}
                     icon={<Circle UNSAFE_style={IconStyle} />}
                     title="lens"
                   />

src/components/KeywordsPicker.tsx

@@ -20,7 +20,7 @@ const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
             <li key={keyword}>
               <button
                 className={classNames(
-                  `py-[5px] px-3 rounded-full`,
+                  `py-[5px] px-3 rounded-full text-sm`,
                   `text-black border border-black`,
                   selected
                     ? "bg-transparentblack font-bold"

src/components/Select.tsx

@@ -53,10 +53,7 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
         } ${state.isOpen ? "bg-gray-100" : "bg-white"}`}
         ref={ref}
       >
-        <span
+        <span {...valueProps} className="text-sm">
-          {...valueProps}
-          className="text-sm"
-        >
           {state.selectedItem
             ? state.selectedItem.rendered
             : "Select an option"}

src/pages/photogallery.tsx

@@ -189,6 +189,8 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
         <div className="flex flex-col md:flex-row md:items-end justify-between px-4 md:px-8 sm:mx-auto">
           <KeywordsPicker
             keywords={[
+              "Boyce Thompson Arboretum",
+              "winter",
               "night",
               "coast",
               // "city",
@@ -199,8 +201,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
               "fireworks",
               "panoramic",
               "Portland Japanese Garden",
-              "shoot the light",
+              // "shoot the light",
-              "winter"
               // "sunset",
             ]}
             onChange={setKeyword}