From 99c79cd10323d1e0f8c79487ec023ca7e4ca51f1 Mon Sep 17 00:00:00 2001 From: Sebastian-ubs <141921979+Sebastian-ubs@users.noreply.github.com> Date: Thu, 25 Jul 2024 19:20:28 +0200 Subject: [PATCH] add shadcn dashboard example (#1029) --- lib/platform-bible-react/src/index.css | 8 + .../src/preview/app.component.tsx | 4 +- .../preview/components/layouts.component.tsx | 14 +- .../layouts/dashboard5.layout.component.tsx | 573 ++++++++++++++++++ .../window.layout.component.tsx} | 6 +- 5 files changed, 597 insertions(+), 8 deletions(-) create mode 100644 lib/platform-bible-react/src/preview/components/layouts/dashboard5.layout.component.tsx rename lib/platform-bible-react/src/preview/components/{examples/window.examples.component.tsx => layouts/window.layout.component.tsx} (96%) diff --git a/lib/platform-bible-react/src/index.css b/lib/platform-bible-react/src/index.css index f1e7767607..e2c6fe2561 100644 --- 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 index 985c2f872d..2590d32cae 100644 --- 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() { - + diff --git a/lib/platform-bible-react/src/preview/components/layouts.component.tsx b/lib/platform-bible-react/src/preview/components/layouts.component.tsx index c723c734ae..bf98eb034e 100644 --- a/lib/platform-bible-react/src/preview/components/layouts.component.tsx +++ b/lib/platform-bible-react/src/preview/components/layouts.component.tsx @@ -5,9 +5,10 @@ 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 (

A place to add examples for layouts

@@ -15,6 +16,7 @@ function Examples({ direction }: HasDirection) { Window or Tab Settings (n/a) + Shadcn Dashboard 5 @@ -26,9 +28,15 @@ function Examples({ direction }: HasDirection) { TODO + + +
+ +
+
); } -export default Examples; +export default Layouts; diff --git a/lib/platform-bible-react/src/preview/components/layouts/dashboard5.layout.component.tsx b/lib/platform-bible-react/src/preview/components/layouts/dashboard5.layout.component.tsx new file mode 100644 index 0000000000..c12f864fed --- /dev/null +++ b/lib/platform-bible-react/src/preview/components/layouts/dashboard5.layout.component.tsx @@ -0,0 +1,573 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import { + Copy, + CreditCard, + File, + Home, + LineChart, + ListFilter, + MoreVertical, + Package, + Package2, + PanelLeft, + Search, + Settings, + ShoppingCart, + Truck, + User, + Users2, +} from 'lucide-react'; + +import { Button } from '@/components/shadcn-ui/button'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/shadcn-ui/card'; +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '@/components/shadcn-ui/dropdown-menu'; +import { Input } from '@/components/shadcn-ui/input'; + +import { Slider } from '@/components/shadcn-ui/slider'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/shadcn-ui/table'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/shadcn-ui/tabs'; +import { useState } from 'react'; + +export default function Dashboard5Examples() { + const [progress, setProgress] = useState([25]); + return ( +
+ +
+
+ + + + + + + + + {/* */} + + + + + {/* + + + +
Dashboard
+ + + + + +
Orders
+ + + + + Recent Orders + + + */} +
+ + +
+ + + + + + My Account + + Settings + Support + + Logout + + +
+
+
+
+ + + Your Orders + + Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful + Analysis. + + + + + + + + + This Week + $1,329 + + +
+ +{progress[0]}% from last week +
+ + + setProgress(value)} + aria-label={`${progress[0]}% increase`} + /> + + + + + This Month + $5,329 + + +
+10% from last month
+ + Progress value={10} + +
+ +
+ + Week + Month + Year + +
+ + + + + + Filter by + + Fulfilled + Declined + Refunded + + + +
+
+ + + + Orders + Recent orders from your store. + + + + + + Customer + Type + Status + Date + Amount + + + + + +
Liam Johnson
+
+ liam@example.com +
+ + Sale + +
Fulfilled
+ + 2023-06-23 + $250.00 + + + +
Olivia Smith
+
+ olivia@example.com +
+ + Refund + +
Declined
+ + 2023-06-24 + $150.00 + + + +
Noah Williams
+
+ noah@example.com +
+ + Subscription + +
Fulfilled
+ + 2023-06-25 + $350.00 + + + +
Emma Brown
+
+ emma@example.com +
+ + Sale + +
Fulfilled
+ + 2023-06-26 + $450.00 + + + +
Liam Johnson
+
+ liam@example.com +
+ + Sale + +
Fulfilled
+ + 2023-06-23 + $250.00 + + + +
Liam Johnson
+
+ liam@example.com +
+ + Sale + +
Fulfilled
+ + 2023-06-23 + $250.00 + + + +
Olivia Smith
+
+ olivia@example.com +
+ + Refund + +
Declined
+ + 2023-06-24 + $150.00 + + + +
Emma Brown
+
+ emma@example.com +
+ + Sale + +
Fulfilled
+ + 2023-06-26 + $450.00 + + +
+ + + + +
+
+ + +
+ + Order Oe31b70H + + + Date: November 23, 2023 +
+
+ + + + + + + Edit + Export + + Trash + + +
+ + +
+
Order Details
+
    +
  • + + Glimmer Lamps x 2 + + $250.00 +
    • +
  • + + Aqua Filters x 1 + + $49.00 +
    • +
+
+
    +
  • + Subtotal + $299.00 +
    • +
  • + Shipping + $5.00 +
    • +
  • + Tax + $25.00 +
    • +
  • + Total + $329.00 +
    • +
+
+
+
+
+
Shipping Information
+
+ Liam Johnson + 1234 Main St. + Anytown, CA 12345 +
+
+
+
Billing Information
+
Same as shipping address
+
+
+
+
+
Customer Information
+
+
+
Customer
+
Liam Johnson
+
+
+
Email
+
+ + liam@acme.com + +
+
+
+
Phone
+
+ + +1 234 567 890 + +
+
+
+
+
+
+
Payment Information
+
+
+
+ + Visa +
+
**** **** **** 4532
+
+
+
+ + +
+ Updated +
+ {/* + + + + + + + + + */} + + +
+
+
+
+ ); +} diff --git a/lib/platform-bible-react/src/preview/components/examples/window.examples.component.tsx b/lib/platform-bible-react/src/preview/components/layouts/window.layout.component.tsx similarity index 96% rename from lib/platform-bible-react/src/preview/components/examples/window.examples.component.tsx rename to lib/platform-bible-react/src/preview/components/layouts/window.layout.component.tsx index c25451f824..d266877f4d 100644 --- a/lib/platform-bible-react/src/preview/components/examples/window.examples.component.tsx +++ b/lib/platform-bible-react/src/preview/components/layouts/window.layout.component.tsx @@ -23,8 +23,8 @@ export default function WindowOrTabExample({ direction }: HasDirection) { }; const [scrRef, setScrRef] = useState(defaultScrRef); return ( -
-
+
+
@@ -116,7 +116,7 @@ export default function WindowOrTabExample({ direction }: HasDirection) {

+

-
+

Imagine here the text of {JSON.stringify(scrRef)}