From ba6de1d0a611d6d6951c4583a6c7760bb6d4c868 Mon Sep 17 00:00:00 2001
From: Sebastian-ubs <slingk@biblesocieties.org>
Date: Wed, 5 Jun 2024 11:48:08 +0200
Subject: [PATCH] fix vertical tab ribbon + add more to preview app

---
 .../src/components/shadcn-ui/tabs-vertical.tsx              | 6 +-----
 .../src/preview/components/compositions.component.tsx       | 6 ++++++
 .../src/preview/components/examples.component.tsx           | 3 ++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx b/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx
index 9af341f5ee..93fe7a103c 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx
@@ -56,11 +56,7 @@ export const VerticalTabsTrigger = React.forwardRef<
       'overflow-clip pr-inline-flex pr-w-[116px] pr-cursor-pointer pr-items-center pr-justify-center pr-break-words pr-rounded-sm pr-border-0 pr-bg-muted pr-px-3 pr-py-1.5 pr-text-sm pr-font-medium pr-text-inherit pr-ring-offset-background pr-transition-all hover:pr-text-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-pointer-events-none disabled:pr-opacity-50 data-[state=active]:pr-bg-background data-[state=active]:pr-text-foreground data-[state=active]:pr-shadow-sm',
       className,
     )}
-  >
-    <div className="pr-flex pr-flex-col pr-justify-center">
-      <div>{props.value}</div>
-    </div>
-  </TabsPrimitive.Trigger>
+  />
 ));
 
 export const VerticalTabsContent = React.forwardRef<
diff --git a/lib/platform-bible-react/src/preview/components/compositions.component.tsx b/lib/platform-bible-react/src/preview/components/compositions.component.tsx
index a2377d7c63..fe463ea5da 100644
--- a/lib/platform-bible-react/src/preview/components/compositions.component.tsx
+++ b/lib/platform-bible-react/src/preview/components/compositions.component.tsx
@@ -4,6 +4,7 @@ import ThemeToggle from '@/preview/theme-toggle.component';
 import {
   BookChapterControl,
   RefSelector,
+  SearchBar,
   VerticalTabs,
   VerticalTabsContent,
   VerticalTabsList,
@@ -22,10 +23,15 @@ function Compositions() {
   return (
     <VerticalTabs defaultValue="Book Chapter Control">
       <VerticalTabsList>
+        <VerticalTabsTrigger value="Search Bar">Search Bar</VerticalTabsTrigger>
         <VerticalTabsTrigger value="Book Chapter Control">Book Chapter Control</VerticalTabsTrigger>
         <VerticalTabsTrigger value="Theme Toggle">Theme Toggle</VerticalTabsTrigger>
       </VerticalTabsList>
 
+      <VerticalTabsContent value="Search Bar">
+        <SearchBar onSearch={() => {}} />
+      </VerticalTabsContent>
+
       <VerticalTabsContent value="Book Chapter Control">
         <RefSelector scrRef={scrRef} handleSubmit={setScrRef} />
         <div className="bcv-control-div">
diff --git a/lib/platform-bible-react/src/preview/components/examples.component.tsx b/lib/platform-bible-react/src/preview/components/examples.component.tsx
index d14eb79732..5ac305dc16 100644
--- a/lib/platform-bible-react/src/preview/components/examples.component.tsx
+++ b/lib/platform-bible-react/src/preview/components/examples.component.tsx
@@ -21,7 +21,8 @@ function Example() {
   return (
     <VerticalTabs defaultValue="Window">
       <VerticalTabsList>
-        <VerticalTabsTrigger value="Window">Window / Tab</VerticalTabsTrigger>
+        <VerticalTabsTrigger value="Window">Window or Tab</VerticalTabsTrigger>
+        <VerticalTabsTrigger value="Settings">Settings (n/a)</VerticalTabsTrigger>
       </VerticalTabsList>
 
       <VerticalTabsContent value="Window">