feat: custom select options

Author: gabitoesmiapodo

source/app.tsx

@@ -3,16 +3,16 @@ import React, { useState, type ReactNode } from 'react'
 import MainTitle from './import/MainTitle.js'
 import Step1 from './import/Step1.js'
 import Step2 from './import/Step2.js'
-import Step3, { type ItemProps } from './import/Step3.js'
+import Step3, { type Item } from './import/Step3.js'
 import { canShowStep } from './import/utils.js'
 
 const App = () => {
   const [projectName, setProjectName] = useState<string>('')
   const [currentStep, setCurrentStep] = useState(1)
-  const [setupOption, setSetupOption] = useState<ItemProps | undefined>()
+  const [setupOption, setSetupOption] = useState<Item | undefined>()
 
   const finishStep = () => setCurrentStep(currentStep + 1)
-  const onSelect = (item: ItemProps) => setSetupOption(item)
+  const onSelect = (item: Item) => setSetupOption(item)
 
   const steps: Array<ReactNode> = [
     <Step1

source/import/Step3.tsx

@@ -1,25 +1,30 @@
-import { Box, Text } from 'ink'
+import { Text } from 'ink'
 import Divider from 'ink-divider'
 import SelectInput from 'ink-select-input'
-import React, { type FC } from 'react'
+import React, { useState, type FC } from 'react'
 
-export interface ItemProps {
+type Installation = 'full' | 'custom'
+
+export interface Item {
   label: string
-  value: string
+  value: Installation
 }
 
 interface Props {
   onCompletion: () => void
-  onSelect: (item: ItemProps) => void
+  onSelect: (item: Item) => void
 }
 
 const Step3: FC<Props> = ({ onCompletion, onSelect }) => {
-  const handleSelect = (item: ItemProps) => {
+  const [isFocused, setIsFocused] = useState(true)
+
+  const handleSelect = (item: Item) => {
     onSelect(item)
     onCompletion()
+    setIsFocused(false)
   }
 
-  const items = [
+  const items: Array<Item> = [
     {
       label: 'Full',
       value: 'full',
@@ -39,6 +44,18 @@ const Step3: FC<Props> = ({ onCompletion, onSelect }) => {
       />
       <Text color={'whiteBright'}>Choose installation type</Text>
       <SelectInput
+        indicatorComponent={({ isSelected }) => (
+          <Text color="green">{isSelected ? '> ' : '  '}</Text>
+        )}
+        itemComponent={({ label, isSelected }) => (
+          <Text
+            color={isSelected ? 'green' : 'white'}
+            bold={isSelected}
+          >
+            {label}
+          </Text>
+        )}
+        isFocused={isFocused}
         items={items}
         onSelect={handleSelect}
       />