From 15088156ac9679cd19b603c1d9fc0b79d55b9bb5 Mon Sep 17 00:00:00 2001
From: Jack Huang <jtxhuang@meta.com>
Date: Wed, 29 Jan 2025 12:36:35 -0800
Subject: [PATCH] add in optional setting component to the Panel component

Summary: Wanted to create a setting switch to toggle between show/hide for ineditor comments.

Differential Revision: D68719087

fbshipit-source-id: 0e1f2ede4b6ab3752abb437dee22df73108edd91
---
 addons/components/Panels.tsx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/addons/components/Panels.tsx b/addons/components/Panels.tsx
index ef1ba6dc7bd0a..c5b1b5cb67bc3 100644
--- a/addons/components/Panels.tsx
+++ b/addons/components/Panels.tsx
@@ -36,6 +36,9 @@ const styles = stylex.create({
   tabpanel: {
     padding: '0 6px 10px 6px',
   },
+  spaceBetween: {
+    justifyContent: 'space-between',
+  },
 });
 
 export type PanelInfo = {render: () => ReactNode; label: ReactNode};
@@ -47,6 +50,7 @@ export function Panels<T extends string>({
   alignmentProps,
   active,
   onSelect,
+  tabListOptionalComponent,
 }: {
   panels: Record<T, PanelInfo>;
   xstyle?: stylex.StyleXStyles;
@@ -55,22 +59,26 @@ export function Panels<T extends string>({
   alignmentProps?: ColumnAlignmentProps;
   active: T;
   onSelect: (item: T) => void;
+  tabListOptionalComponent?: ReactNode;
 }) {
   return (
     <Column xstyle={xstyle} {...(alignmentProps ?? {alignStart: true})}>
-      <Row xstyle={[styles.tabList, tabListXstyle]} role="tablist">
-        {(Object.entries(panels) as Array<[T, PanelInfo]>).map(([name, value]) => {
-          return (
-            <button
-              role="tab"
-              aria-selected={active === name}
-              key={name}
-              onClick={() => onSelect(name)}
-              {...stylex.props(styles.tab, active === name && styles.activeTab, tabXstyle)}>
-              {value.label}
-            </button>
-          );
-        })}
+      <Row xstyle={[styles.tabList, styles.spaceBetween, tabListXstyle]} role="tablist">
+        <Row>
+          {(Object.entries(panels) as Array<[T, PanelInfo]>).map(([name, value]) => {
+            return (
+              <button
+                role="tab"
+                aria-selected={active === name}
+                key={name}
+                onClick={() => onSelect(name)}
+                {...stylex.props(styles.tab, active === name && styles.activeTab, tabXstyle)}>
+                {value.label}
+              </button>
+            );
+          })}
+        </Row>
+        {tabListOptionalComponent}
       </Row>
       <div role="tabpanel" {...stylex.props(styles.tabpanel)}>
         {panels[active]?.render()}