From 1f5dc86e26b9b421c5767a82d8d79fe9c34b0e94 Mon Sep 17 00:00:00 2001
From: "Tristan B." <tristan@infi.im>
Date: Mon, 20 May 2024 09:39:43 -0600
Subject: [PATCH] Use `tabTitles`

---
 .../DeviceDetails/NoiseSensorDeviceDetails.tsx   | 16 +++++++++++-----
 src/lib/ui/TabSet.tsx                            |  9 +++++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx
index 0dac0e43f..0798ad06d 100644
--- a/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx
+++ b/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx
@@ -13,7 +13,7 @@ import { NoiseSensorActivityList } from 'lib/ui/noise-sensor/NoiseSensorActivity
 import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
 import { TabSet } from 'lib/ui/TabSet.js'
 
-type TabType = 'Details' | 'Activity'
+type TabType = 'details' | 'activity'
 
 interface NoiseSensorDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
@@ -27,7 +27,7 @@ export function NoiseSensorDeviceDetails({
   onBack,
   className,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
-  const [tab, setTab] = useState<TabType>('Details')
+  const [tab, setTab] = useState<TabType>('details')
 
   return (
     <div className={classNames('seam-device-details', className)}>
@@ -57,7 +57,11 @@ export function NoiseSensorDeviceDetails({
           </div>
 
           <TabSet<TabType>
-            tabs={['Details', 'Activity']}
+            tabs={['details', 'activity']}
+            tabTitles={{
+              details: t.details,
+              activity: t.activity,
+            }}
             activeTab={tab}
             onTabChange={(tab) => {
               setTab(tab)
@@ -65,7 +69,7 @@ export function NoiseSensorDeviceDetails({
           />
         </div>
 
-        {tab === 'Details' && (
+        {tab === 'details' && (
           <div className='seam-padded-container'>
             <NoiseThresholdsList device={device} />
 
@@ -79,7 +83,7 @@ export function NoiseSensorDeviceDetails({
           </div>
         )}
 
-        {tab === 'Activity' && <NoiseSensorActivityList device={device} />}
+        {tab === 'activity' && <NoiseSensorActivityList device={device} />}
       </div>
     </div>
   )
@@ -89,4 +93,6 @@ const t = {
   noiseSensor: 'Noise Sensor',
   status: 'Status',
   noiseLevel: 'Noise level',
+  details: 'Details',
+  activity: 'Activity',
 }
diff --git a/src/lib/ui/TabSet.tsx b/src/lib/ui/TabSet.tsx
index 0aacb3d12..9e8e360bc 100644
--- a/src/lib/ui/TabSet.tsx
+++ b/src/lib/ui/TabSet.tsx
@@ -7,8 +7,9 @@ import {
   useState,
 } from 'react'
 
-interface TabSetProps<TabType> {
+interface TabSetProps<TabType extends string> {
   tabs: TabType[]
+  tabTitles: Record<TabType, string>
   activeTab: TabType
   onTabChange: (tab: TabType) => void
 }
@@ -20,6 +21,7 @@ interface HighlightStyle {
 
 export function TabSet<TabType extends string>({
   tabs,
+  tabTitles,
   activeTab,
   onTabChange,
 }: TabSetProps<TabType>): JSX.Element {
@@ -60,6 +62,7 @@ export function TabSet<TabType extends string>({
           <TabButton<TabType>
             key={tab}
             tab={tab}
+            title={tabTitles[tab]}
             isActive={activeTab === tab}
             onTabChange={onTabChange}
             setHighlightStyle={setHighlightStyle}
@@ -72,6 +75,7 @@ export function TabSet<TabType extends string>({
 
 interface TabButtonProps<TabType> {
   tab: TabType
+  title: string
   isActive: boolean
   onTabChange: (tab: TabType) => void
   setHighlightStyle: (style: HighlightStyle) => void
@@ -79,6 +83,7 @@ interface TabButtonProps<TabType> {
 
 function TabButton<TabType extends string>({
   tab,
+  title,
   isActive,
   onTabChange,
   setHighlightStyle,
@@ -99,7 +104,7 @@ function TabButton<TabType extends string>({
       )}
       onClick={handleClick}
     >
-      <p className='seam-tab-button-label'>{tab}</p>
+      <p className='seam-tab-button-label'>{title}</p>
     </button>
   )
 }