add shadcn dashboard example (#1029)

paranext · Jul 25, 2024 · 99c79cd · 99c79cd
1 parent 3610073
commit 99c79cd
Show file tree

Hide file tree

Showing 5 changed files with 597 additions and 8 deletions.
diff --git a/lib/platform-bible-react/src/index.css b/lib/platform-bible-react/src/index.css
@@ -117,6 +117,10 @@
     .hover\:pr-bg-muted\/50:hover {
       background-color: hsl(33.9, 32.4%, 86.1%, 0.5);
     }
+
+    .pr-bg-muted\/40 {
+      background-color: hsl(33.9, 32.4%, 86.1%, 0.4);
+    }
   }
 
   .paratext-dark {
@@ -157,6 +161,10 @@
     .hover\:pr-bg-muted\/50:hover {
       background-color: hsl(15.5, 13.2%, 53.9%, 0.5);
     }
+
+    .pr-bg-muted\/40 {
+      background-color: hsl(15.5, 13.2%, 53.9%, 0.4);
+    }
   }
 }
 

diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx
@@ -3,7 +3,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '..';
 import Compositions from './components/advanced.component';
 import Basics from './components/basics.component';
 import Guide from './components/guide.component';
-import Examples from './components/layouts.component';
+import Layouts from './components/layouts.component';
 import Playground from './components/playground.component';
 import { DirToggle, Direction } from './preview-components/direction-toggle';
 import { ThemeProvider } from './preview-components/theme-provider.component';
@@ -38,7 +38,7 @@ function App() {
             <Compositions direction={direction} />
           </TabsContent>
           <TabsContent value="Layouts">
-            <Examples direction={direction} />
+            <Layouts direction={direction} />
           </TabsContent>
           <TabsContent value="Playground">
             <Playground />

diff --git a/lib/platform-bible-react/src/preview/components/layouts.component.tsx b/lib/platform-bible-react/src/preview/components/layouts.component.tsx
@@ -5,16 +5,18 @@ import {
   VerticalTabsTrigger,
 } from '@/components/basics/tabs-vertical';
 import { HasDirection } from '@/preview/preview-components/direction-toggle';
-import WindowOrTabExample from './examples/window.examples.component';
+import WindowOrTabExample from './layouts/window.layout.component';
+import Dashboard5Examples from './layouts/dashboard5.layout.component';
 
-function Examples({ direction }: HasDirection) {
+function Layouts({ direction }: HasDirection) {
   return (
     <div>
       <p className="pr-mb-2 pr-text-muted-foreground">A place to add examples for layouts</p>
       <VerticalTabs defaultValue="Window" dir={direction}>
         <VerticalTabsList>
           <VerticalTabsTrigger value="Window">Window or Tab</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Settings">Settings (n/a)</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Shadcn Dashboard 5">Shadcn Dashboard 5</VerticalTabsTrigger>
         </VerticalTabsList>
 
         <VerticalTabsContent value="Window">
@@ -26,9 +28,15 @@ function Examples({ direction }: HasDirection) {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Settings">TODO</VerticalTabsContent>
+
+        <VerticalTabsContent value="Shadcn Dashboard 5">
+          <div className="pr-h-[405px] pr-rounded-md pr-border">
+            <Dashboard5Examples />
+          </div>
+        </VerticalTabsContent>
       </VerticalTabs>
     </div>
   );
 }
 
-export default Examples;
+export default Layouts;