From f47bb973bebaa38cb1bda8c56076ec962516a9bb Mon Sep 17 00:00:00 2001 From: shadcn Date: Fri, 29 Mar 2024 00:14:32 +0400 Subject: [PATCH] feat: e-commerce dashboard blocks (#3236) * feat(blocks): add e-commerce dashboard * feat(blocks): add products pages * style(blocks): run prettier * feat(www): update dashboard-05 * feat(www): update gap for dashboard-05 * feat(www): update dashboards * fix(www): review a11y for new blocks * fix(blocks): a11y for dashboard-07 * fix(www): blocks background * chore: update registry --- .nvmrc | 2 +- apps/www/__registry__/index.tsx | 54 ++ .../(blocks)/blocks/[style]/[name]/page.tsx | 10 +- apps/www/components/block-preview.tsx | 19 +- apps/www/registry/blocks.ts | 63 ++ .../registry/default/block/dashboard-05.tsx | 720 ++++++++++++++++++ .../registry/default/block/dashboard-06.tsx | 637 ++++++++++++++++ .../registry/default/block/dashboard-07.tsx | 607 +++++++++++++++ .../registry/new-york/block/dashboard-05.tsx | 720 ++++++++++++++++++ .../registry/new-york/block/dashboard-06.tsx | 623 +++++++++++++++ .../registry/new-york/block/dashboard-07.tsx | 607 +++++++++++++++ 11 files changed, 4041 insertions(+), 21 deletions(-) create mode 100644 apps/www/registry/default/block/dashboard-05.tsx create mode 100644 apps/www/registry/default/block/dashboard-06.tsx create mode 100644 apps/www/registry/default/block/dashboard-07.tsx create mode 100644 apps/www/registry/new-york/block/dashboard-05.tsx create mode 100644 apps/www/registry/new-york/block/dashboard-06.tsx create mode 100644 apps/www/registry/new-york/block/dashboard-07.tsx diff --git a/.nvmrc b/.nvmrc index 7950a445767..8c60e1e54f3 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.17.0 +v20.5.1 diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index e0d1ceaaa7a..4182d4051eb 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -1697,6 +1697,33 @@ export const Index: Record = { category: "undefined", subcategory: "undefined", }, + "dashboard-05": { + name: "dashboard-05", + type: "components:block", + registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"], + component: React.lazy(() => import("@/registry/default/block/dashboard-05")), + files: ["registry/default/block/dashboard-05.tsx"], + category: "Application", + subcategory: "Dashboard", + }, + "dashboard-06": { + name: "dashboard-06", + type: "components:block", + registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"], + component: React.lazy(() => import("@/registry/default/block/dashboard-06")), + files: ["registry/default/block/dashboard-06.tsx"], + category: "Application", + subcategory: "Dashboard", + }, + "dashboard-07": { + name: "dashboard-07", + type: "components:block", + registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"], + component: React.lazy(() => import("@/registry/default/block/dashboard-07")), + files: ["registry/default/block/dashboard-07.tsx"], + category: "Application", + subcategory: "Dashboard", + }, "dashboard-01": { name: "dashboard-01", type: "components:block", @@ -3462,6 +3489,33 @@ export const Index: Record = { category: "undefined", subcategory: "undefined", }, + "dashboard-05": { + name: "dashboard-05", + type: "components:block", + registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"], + component: React.lazy(() => import("@/registry/new-york/block/dashboard-05")), + files: ["registry/new-york/block/dashboard-05.tsx"], + category: "Application", + subcategory: "Dashboard", + }, + "dashboard-06": { + name: "dashboard-06", + type: "components:block", + registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"], + component: React.lazy(() => import("@/registry/new-york/block/dashboard-06")), + files: ["registry/new-york/block/dashboard-06.tsx"], + category: "Application", + subcategory: "Dashboard", + }, + "dashboard-07": { + name: "dashboard-07", + type: "components:block", + registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"], + component: React.lazy(() => import("@/registry/new-york/block/dashboard-07")), + files: ["registry/new-york/block/dashboard-07.tsx"], + category: "Application", + subcategory: "Dashboard", + }, "dashboard-01": { name: "dashboard-01", type: "components:block", diff --git a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx index 75bd1b86c24..da42bd22253 100644 --- a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx +++ b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx @@ -1,11 +1,13 @@ +import { Metadata } from "next" +import { notFound } from "next/navigation" + import { siteConfig } from "@/config/site" import { getAllBlockIds, getBlock } from "@/lib/blocks" -import { absoluteUrl } from "@/lib/utils" +import { absoluteUrl, cn } from "@/lib/utils" import { Style, styles } from "@/registry/styles" import "@/styles/mdx.css" -import { Metadata } from "next" -import { notFound } from "next/navigation" +import "public/registry/themes.css" export async function generateMetadata({ params, @@ -79,7 +81,7 @@ export default async function BlockPage({ const Component = block.component return ( -
+
) diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx index 9925ba735a0..bf38c33570e 100644 --- a/apps/www/components/block-preview.tsx +++ b/apps/www/components/block-preview.tsx @@ -62,7 +62,7 @@ export function BlockPreview({ block }: { block: Block }) { >
- + Preview Code @@ -75,19 +75,6 @@ export function BlockPreview({ block }: { block: Block }) { {block.name} - - - - Block description - - - {block.description} - -
@@ -116,7 +103,7 @@ export function BlockPreview({ block }: { block: Block }) { @@ -177,7 +164,7 @@ export function BlockPreview({ block }: { block: Block }) { ref={ref} className="relative rounded-lg border bg-background transition-all" defaultSize={100} - minSize={25} + minSize={30} > {isLoading ? (
diff --git a/apps/www/registry/blocks.ts b/apps/www/registry/blocks.ts index f19c05a3570..1bee2adbc50 100644 --- a/apps/www/registry/blocks.ts +++ b/apps/www/registry/blocks.ts @@ -1,6 +1,69 @@ import { Registry } from "@/registry/schema" export const blocks: Registry = [ + { + name: "dashboard-05", + type: "components:block", + registryDependencies: [ + "badge", + "breadcrumb", + "button", + "card", + "dropdown-menu", + "input", + "pagination", + "progress", + "separator", + "sheet", + "table", + "tabs", + "tooltip", + ], + files: ["block/dashboard-05.tsx"], + category: "Application", + subcategory: "Dashboard", + }, + { + name: "dashboard-06", + type: "components:block", + registryDependencies: [ + "badge", + "breadcrumb", + "button", + "card", + "dropdown-menu", + "input", + "sheet", + "table", + "tabs", + "tooltip", + ], + files: ["block/dashboard-06.tsx"], + category: "Application", + subcategory: "Dashboard", + }, + { + name: "dashboard-07", + type: "components:block", + registryDependencies: [ + "badge", + "breadcrumb", + "button", + "card", + "dropdown-menu", + "input", + "pagination", + "progress", + "separator", + "sheet", + "table", + "tabs", + "tooltip", + ], + files: ["block/dashboard-07.tsx"], + category: "Application", + subcategory: "Dashboard", + }, { name: "dashboard-01", type: "components:block", diff --git a/apps/www/registry/default/block/dashboard-05.tsx b/apps/www/registry/default/block/dashboard-05.tsx new file mode 100644 index 00000000000..a2d163373e8 --- /dev/null +++ b/apps/www/registry/default/block/dashboard-05.tsx @@ -0,0 +1,720 @@ +import Image from "next/image" +import Link from "next/link" +import { + ChevronLeft, + ChevronRight, + Copy, + CreditCard, + File, + Home, + LineChart, + ListFilter, + MoreVertical, + Package, + Package2, + PanelLeft, + Search, + Settings, + ShoppingCart, + Truck, + Users2, +} from "lucide-react" + +import { Badge } from "@/registry/default/ui/badge" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { Input } from "@/registry/default/ui/input" +import { + Pagination, + PaginationContent, + PaginationItem, +} from "@/registry/default/ui/pagination" +import { Progress } from "@/registry/default/ui/progress" +import { Separator } from "@/registry/default/ui/separator" +import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/registry/default/ui/table" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/registry/default/ui/tabs" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/default/ui/tooltip" + +export const description = + "An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information." + +export const iframeHeight = "1112px" + +export const containerClassName = "w-full h-full" + +export default function Dashboard() { + 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 + $1329 + + +
+ +25% from last week +
+ + + + + + + + This Month + $5,329 + + +
+ +10% from last month +
+ + + + + +
+ +
+ + 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 ID: 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/apps/www/registry/default/block/dashboard-06.tsx b/apps/www/registry/default/block/dashboard-06.tsx new file mode 100644 index 00000000000..9436c274ac3 --- /dev/null +++ b/apps/www/registry/default/block/dashboard-06.tsx @@ -0,0 +1,637 @@ +import Image from "next/image" +import Link from "next/link" +import { + File, + Home, + LineChart, + ListFilter, + MoreHorizontal, + Package, + Package2, + PanelLeft, + PlusCircle, + Search, + Settings, + ShoppingCart, + Users2, +} from "lucide-react" + +import { Badge } from "@/registry/default/ui/badge" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { Input } from "@/registry/default/ui/input" +import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/registry/default/ui/table" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/registry/default/ui/tabs" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/default/ui/tooltip" + +export const description = + "An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions." + +export const iframeHeight = "938px" + +export const containerClassName = "w-full h-full" + +export default function Dashboard() { + return ( +
+ +
+
+ + + + + + + + + + + + + Dashboard + + + + + + Products + + + + + All Products + + + +
+ + +
+ + + + + + My Account + + Settings + Support + + Logout + + +
+
+ +
+ + All + Active + Draft + + Archived + + +
+ + + + + + Filter by + + + Active + + Draft + + Archived + + + + + +
+
+ + + + Products + + Manage your products and view their sales performance. + + + + + + + + Image + + Name + Status + + Price + + + Total Sales + + + Created at + + + Actions + + + + + + + + + + Laser Lemonade Machine + + + Draft + + + $499.99 + + + 25 + + + 2023-07-12 10:42 AM + + + + + + + + Actions + Edit + Delete + + + + + + + + + + Hypernova Headphones + + + Active + + + $129.99 + + + 100 + + + 2023-10-18 03:21 PM + + + + + + + + Actions + Edit + Delete + + + + + + + + + + AeroGlow Desk Lamp + + + Active + + + $39.99 + + + 50 + + + 2023-11-29 08:15 AM + + + + + + + + Actions + Edit + Delete + + + + + + + + + + TechTonic Energy Drink + + + Draft + + + $2.99 + + + 0 + + + 2023-12-25 11:59 PM + + + + + + + + Actions + Edit + Delete + + + + + + + + + + Gamer Gear Pro Controller + + + Active + + + $59.99 + + + 75 + + + 2024-01-01 12:00 AM + + + + + + + + Actions + Edit + Delete + + + + + + + + + + Luminous VR Headset + + + Active + + + $199.99 + + + 30 + + + 2024-02-14 02:14 PM + + + + + + + + Actions + Edit + Delete + + + + + +
+ + +
+ Showing 1-10 of 32{" "} + products +
+ + + + +
+
+
+ ) +} diff --git a/apps/www/registry/default/block/dashboard-07.tsx b/apps/www/registry/default/block/dashboard-07.tsx new file mode 100644 index 00000000000..936a07cc8a7 --- /dev/null +++ b/apps/www/registry/default/block/dashboard-07.tsx @@ -0,0 +1,607 @@ +import Image from "next/image" +import Link from "next/link" +import { + ChevronLeft, + Home, + LineChart, + Package, + Package2, + PanelLeft, + PlusCircle, + Search, + Settings, + ShoppingCart, + Upload, + Users2, +} from "lucide-react" + +import { Badge } from "@/registry/default/ui/badge" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" +import { Sheet, SheetContent, SheetTrigger } from "@/registry/default/ui/sheet" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/registry/default/ui/table" +import { Textarea } from "@/registry/default/ui/textarea" +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/default/ui/tooltip" + +export const description = + "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images." + +export const iframeHeight = "1200px" + +export const containerClassName = "w-full h-full" + +export default function Dashboard() { + return ( +
+ +
+
+ + + + + + + + + + + + + Dashboard + + + + + + Products + + + + + Edit Product + + + +
+ + +
+ + + + + + My Account + + Settings + Support + + Logout + + +
+
+
+
+ +

+ Pro Controller +

+ + In stock + +
+ + +
+
+
+
+ + + Product Details + + Lipsum dolor sit amet, consectetur adipiscing elit + + + +
+
+ + +
+
+ +