Use tabTitles

seamapi · May 20, 2024 · 1f5dc86 · 1f5dc86
1 parent 4fc8500
commit 1f5dc86
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git 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,15 +57,19 @@ 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)
             }}
           />
         </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
@@ -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,13 +75,15 @@ export function TabSet<TabType extends string>({
 
 interface TabButtonProps<TabType> {
   tab: TabType
+  title: string
   isActive: boolean
   onTabChange: (tab: TabType) => void
   setHighlightStyle: (style: HighlightStyle) => void
 }
 
 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>
   )
 }