simplify

catalog/app/containers/Bucket/Download/BucketOptions.tsx

@@ -40,10 +40,8 @@ interface OptionsProps {
 }
 
 export default function Options({ handle }: OptionsProps) {
-  const labels = ['Download', 'Code']
-
   return (
-    <OptionsTabs labels={labels}>
+    <OptionsTabs labels={['Download', 'Code']}>
       {(activeTab) => {
         switch (activeTab) {
           case 0:
@@ -54,15 +52,9 @@ export default function Options({ handle }: OptionsProps) {
             )
           case 1:
             return handle.version ? (
-              <FileCodeSamples
-                bucket={handle.bucket}
-                path={handle.key}
-              />
+              <FileCodeSamples bucket={handle.bucket} path={handle.key} />
             ) : (
-              <DirCodeSamples
-                bucket={handle.bucket}
-                path={handle.key}
-              />
+              <DirCodeSamples bucket={handle.bucket} path={handle.key} />
             )
           default:
             return null

catalog/app/containers/Bucket/Download/OptionsTabs.tsx

@@ -33,11 +33,6 @@ const useStyles = M.makeStyles((t) => ({
       backgroundColor: t.palette.primary.main,
     },
   },
-  quiltSync: {
-    padding: t.spacing(0, 0, 2),
-    borderBottom: `1px solid ${t.palette.divider}`,
-    marginBottom: t.spacing(1),
-  },
   tab: {
     padding: t.spacing(2, 2, 1),
     animation: `$show 150ms ease-out`,
@@ -61,35 +56,31 @@ const useStyles = M.makeStyles((t) => ({
 }))
 
 interface OptionsTabsProps {
-  labels: string[]
+  labels: [string, string]
   children: (activeTab: number) => React.ReactNode
-  initialTab?: number
 }
 
-export default function OptionsTabs({ labels, children, initialTab = 0 }: OptionsTabsProps) {
+export default function OptionsTabs({ labels, children }: OptionsTabsProps) {
   const classes = useStyles()
-  const [activeTab, setActiveTab] = React.useState(initialTab)
-  
+  const [activeTab, setActiveTab] = React.useState(0)
+
   return (
     <div className={classes.root}>
       <M.Paper className={classes.tabsContainer} elevation={1}>
-        {labels.map((label, index) => (
-          <React.Fragment key={index}>
-            {index > 0 && <M.Divider orientation="vertical" />}
-            <M.Button
-              className={`${classes.tabButton} ${activeTab === index ? classes.activeTab : ''}`}
-              onClick={() => setActiveTab(index)}
-            >
-              {label}
-            </M.Button>
-          </React.Fragment>
-        ))}
+        <M.Button
+          className={`${classes.tabButton} ${activeTab === 0 ? classes.activeTab : ''}`}
+          onClick={() => setActiveTab(0)}
+        >
+          {labels[0]}
+        </M.Button>
+        <M.Button
+          className={`${classes.tabButton} ${activeTab === 1 ? classes.activeTab : ''}`}
+          onClick={() => setActiveTab(1)}
+        >
+          {labels[1]}
+        </M.Button>
       </M.Paper>
-      <div className={classes.tab}>
-        {children(activeTab)}
-      </div>
+      <div className={classes.tab}>{children(activeTab)}</div>
     </div>
   )
 }
-
-export { useStyles }

catalog/app/containers/Bucket/Download/PackageOptions.tsx

@@ -12,7 +12,7 @@ import copyToClipboard from 'utils/clipboard'
 import * as FileView from '../FileView'
 import PackageCodeSamples from '../CodeSamples/Package'
 import * as Selection from '../Selection'
-import OptionsTabs, { useStyles } from './OptionsTabs'
+import OptionsTabs from './OptionsTabs'
 
 interface DownloadFileProps {
   fileHandle: Model.S3.S3ObjectLocation
@@ -110,6 +110,14 @@ function QuiltSync({ className, uri }: QuiltSyncProps) {
   )
 }
 
+const useStyles = M.makeStyles((t) => ({
+  quiltSync: {
+    padding: t.spacing(0, 0, 2),
+    borderBottom: `1px solid ${t.palette.divider}`,
+    marginBottom: t.spacing(1),
+  },
+}))
+
 interface OptionsProps {
   hashOrTag: string
   fileHandle?: Model.S3.S3ObjectLocation
@@ -119,10 +127,8 @@ interface OptionsProps {
 // FIXME: configure hiding tabs in Props, so we can manage it in Embed views
 export default function Options({ fileHandle, hashOrTag, uri }: OptionsProps) {
   const classes = useStyles()
-  const labels = ['QuiltSync', 'Code']
-
   return (
-    <OptionsTabs labels={labels}>
+    <OptionsTabs labels={['QuiltSync', 'Code']}>
       {(activeTab) => {
         switch (activeTab) {
           case 0:
@@ -137,9 +143,7 @@ export default function Options({ fileHandle, hashOrTag, uri }: OptionsProps) {
               </>
             )
           case 1:
-            return (
-              <PackageCodeSamples hashOrTag={hashOrTag} {...uri} />
-            )
+            return <PackageCodeSamples hashOrTag={hashOrTag} {...uri} />
           default:
             return null
         }