refactor: add TitleIcon to Section

Author: gadomski

src/components/children.tsx

@@ -1,12 +1,4 @@
-import {
-  Card,
-  Checkbox,
-  HStack,
-  Icon,
-  Link,
-  Stack,
-  Text,
-} from "@chakra-ui/react";
+import { Card, Checkbox, Link, Stack, Text } from "@chakra-ui/react";
 import { useEffect, useState, type ReactNode } from "react";
 import { LuFolderPlus, LuFolderSearch } from "react-icons/lu";
 import { MarkdownHooks } from "react-markdown";
@@ -62,16 +54,7 @@ export function Children({
         filteredCollections &&
         filteredCollections?.length > 0 && (
           <>
-            <Section
-              title={
-                <HStack>
-                  <Icon>
-                    <LuFolderSearch></LuFolderSearch>
-                  </Icon>{" "}
-                  Collection search
-                </HStack>
-              }
-            >
+            <Section TitleIcon={LuFolderSearch} title={"Collection search"}>
               <CollectionSearch
                 href={selfHref}
                 setHref={setHref}
@@ -80,17 +63,13 @@ export function Children({
             </Section>
 
             <Section
+              TitleIcon={LuFolderPlus}
               title={
-                <HStack>
-                  <Icon>
-                    <LuFolderPlus></LuFolderPlus>
-                  </Icon>{" "}
-                  Collections (
-                  {(filterByViewport &&
-                    filteredCollections.length + "/" + collections.length) ||
-                    collections.length}
-                  )
-                </HStack>
+                "Collections (" +
+                ((filterByViewport &&
+                  filteredCollections.length + "/" + collections.length) ||
+                  collections.length) +
+                ")"
               }
             >
               <Stack>

src/components/collection.tsx

@@ -3,7 +3,7 @@ import {
   Box,
   DataList,
   HStack,
-  Icon,
+  Span,
   Stack,
   Text,
 } from "@chakra-ui/react";
@@ -47,14 +47,12 @@ export function Collection({
 
       {searchLinks.length > 0 && (
         <Section
+          TitleIcon={LuFileSearch}
           title={
-            <HStack>
-              <Icon>
-                <LuFileSearch></LuFileSearch>
-              </Icon>{" "}
-              Item search
+            <Span>
+              Item search{" "}
               <Badge colorPalette={"orange"}>Under development</Badge>
-            </HStack>
+            </Span>
           }
         >
           <ItemSearch

src/components/item.tsx

@@ -1,4 +1,4 @@
-import { HStack, Icon, Stack } from "@chakra-ui/react";
+import { Stack } from "@chakra-ui/react";
 import { LuFileImage } from "react-icons/lu";
 import type { StacItem } from "stac-ts";
 import Assets from "./assets";
@@ -9,16 +9,7 @@ export default function Item({ item }: { item: StacItem }) {
   return (
     <Stack>
       <Value value={item}></Value>
-      <Section
-        title={
-          <HStack>
-            <Icon>
-              <LuFileImage></LuFileImage>
-            </Icon>{" "}
-            Assets
-          </HStack>
-        }
-      >
+      <Section TitleIcon={LuFileImage} title={"Assets"}>
         <Assets assets={item.assets}></Assets>
       </Section>
     </Stack>

src/components/search/item.tsx

@@ -9,7 +9,6 @@ import {
   Group,
   Heading,
   HStack,
-  Icon,
   IconButton,
   Input,
   Link,
@@ -260,16 +259,7 @@ export function ItemSearchResults({
   const value = items?.length || 0;
 
   return (
-    <Section
-      title={
-        <HStack>
-          <Icon>
-            <LuFiles></LuFiles>
-          </Icon>
-          Item search results
-        </HStack>
-      }
-    >
+    <Section TitleIcon={LuFiles} title={"Item search results"}>
       <Stack>
         <Progress.Root
           value={results.isFetching && !numberMatched ? null : value}

src/components/section.tsx

@@ -1,13 +1,16 @@
 import { Collapsible, HStack, Heading, Icon } from "@chakra-ui/react";
 import { type ReactNode, useState } from "react";
+import type { IconType } from "react-icons/lib";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 
 export default function Section({
   title,
+  TitleIcon,
   titleSize = "lg",
   children,
 }: {
   title: ReactNode;
+  TitleIcon?: IconType;
   titleSize?:
     | "sm"
     | "md"
@@ -32,7 +35,14 @@ export default function Section({
       <Collapsible.Trigger>
         <HStack pb={4}>
           <Heading size={titleSize} textAlign="left">
-            {title}
+            <HStack>
+              {TitleIcon && (
+                <Icon>
+                  <TitleIcon></TitleIcon>
+                </Icon>
+              )}
+              {title}
+            </HStack>
           </Heading>
           <Icon size={"sm"}>
             {(open && <LuChevronDown></LuChevronDown>) || (