From 0e6b37e99a3f8b0d7ceb0529c4520ce22352774d Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 17 Oct 2024 16:28:09 +0400 Subject: [PATCH] feat: update preview for mobile --- apps/www/app/(app)/blocks/layout.tsx | 3 - apps/www/app/(app)/blocks/page.tsx | 2 +- apps/www/components/block-preview.tsx | 20 +- apps/www/components/block-toolbar.tsx | 6 +- apps/www/components/component-preview.tsx | 17 +- apps/www/components/tailwind-indicator.tsx | 5 +- apps/www/content/docs/components/sidebar.mdx | 8 +- apps/www/package.json | 1 + .../blocks/demo-sidebar-controlled-dark.png | Bin 0 -> 50019 bytes .../images/blocks/demo-sidebar-controlled.png | Bin 0 -> 50038 bytes .../images/blocks/demo-sidebar-dark.png | Bin 0 -> 40000 bytes .../blocks/demo-sidebar-footer-dark.png | Bin 0 -> 23391 bytes .../images/blocks/demo-sidebar-footer.png | Bin 0 -> 23321 bytes .../blocks/demo-sidebar-group-action-dark.png | Bin 0 -> 37070 bytes .../blocks/demo-sidebar-group-action.png | Bin 0 -> 37124 bytes .../demo-sidebar-group-collapsible-dark.png | Bin 0 -> 29356 bytes .../blocks/demo-sidebar-group-collapsible.png | Bin 0 -> 29374 bytes .../images/blocks/demo-sidebar-group-dark.png | Bin 0 -> 29012 bytes .../images/blocks/demo-sidebar-group.png | Bin 0 -> 29033 bytes .../blocks/demo-sidebar-header-dark.png | Bin 0 -> 26041 bytes .../images/blocks/demo-sidebar-header.png | Bin 0 -> 25986 bytes .../blocks/demo-sidebar-menu-action-dark.png | Bin 0 -> 46931 bytes .../blocks/demo-sidebar-menu-action.png | Bin 0 -> 46887 bytes .../blocks/demo-sidebar-menu-badge-dark.png | Bin 0 -> 48974 bytes .../images/blocks/demo-sidebar-menu-badge.png | Bin 0 -> 48998 bytes .../demo-sidebar-menu-collapsible-dark.png | Bin 0 -> 47744 bytes .../blocks/demo-sidebar-menu-collapsible.png | Bin 0 -> 47826 bytes .../images/blocks/demo-sidebar-menu-dark.png | Bin 0 -> 45430 bytes .../blocks/demo-sidebar-menu-sub-dark.png | Bin 0 -> 129693 bytes .../images/blocks/demo-sidebar-menu-sub.png | Bin 0 -> 129702 bytes .../images/blocks/demo-sidebar-menu.png | Bin 0 -> 45431 bytes .../images/blocks/demo-sidebar-rsc-dark.png | Bin 0 -> 45430 bytes .../public/images/blocks/demo-sidebar-rsc.png | Bin 0 -> 45431 bytes .../www/public/images/blocks/demo-sidebar.png | Bin 0 -> 39778 bytes .../public/images/blocks/login-01-dark.png | Bin 0 -> 71704 bytes apps/www/public/images/blocks/login-01.png | Bin 0 -> 71704 bytes .../public/images/blocks/sidebar-01-dark.png | Bin 0 -> 130812 bytes apps/www/public/images/blocks/sidebar-01.png | Bin 0 -> 129088 bytes .../public/images/blocks/sidebar-02-dark.png | Bin 0 -> 139217 bytes apps/www/public/images/blocks/sidebar-02.png | Bin 0 -> 135880 bytes .../public/images/blocks/sidebar-03-dark.png | Bin 0 -> 141551 bytes apps/www/public/images/blocks/sidebar-03.png | Bin 0 -> 140527 bytes .../public/images/blocks/sidebar-04-dark.png | Bin 0 -> 139341 bytes apps/www/public/images/blocks/sidebar-04.png | Bin 0 -> 139035 bytes .../public/images/blocks/sidebar-05-dark.png | Bin 0 -> 112448 bytes apps/www/public/images/blocks/sidebar-05.png | Bin 0 -> 111164 bytes .../public/images/blocks/sidebar-06-dark.png | Bin 0 -> 90569 bytes apps/www/public/images/blocks/sidebar-06.png | Bin 0 -> 89817 bytes .../public/images/blocks/sidebar-07-dark.png | Bin 0 -> 105932 bytes apps/www/public/images/blocks/sidebar-07.png | Bin 0 -> 105054 bytes .../public/images/blocks/sidebar-08-dark.png | Bin 0 -> 114901 bytes apps/www/public/images/blocks/sidebar-08.png | Bin 0 -> 114686 bytes .../public/images/blocks/sidebar-09-dark.png | Bin 0 -> 240306 bytes apps/www/public/images/blocks/sidebar-09.png | Bin 0 -> 236990 bytes .../public/images/blocks/sidebar-10-dark.png | Bin 0 -> 243595 bytes apps/www/public/images/blocks/sidebar-10.png | Bin 0 -> 244591 bytes .../public/images/blocks/sidebar-11-dark.png | Bin 0 -> 103634 bytes apps/www/public/images/blocks/sidebar-11.png | Bin 0 -> 102847 bytes .../public/images/blocks/sidebar-12-dark.png | Bin 0 -> 110515 bytes apps/www/public/images/blocks/sidebar-12.png | Bin 0 -> 100312 bytes .../public/images/blocks/sidebar-13-dark.png | Bin 0 -> 95328 bytes apps/www/public/images/blocks/sidebar-13.png | Bin 0 -> 24604 bytes .../public/images/blocks/sidebar-14-dark.png | Bin 0 -> 143486 bytes apps/www/public/images/blocks/sidebar-14.png | Bin 0 -> 142005 bytes .../public/images/blocks/sidebar-15-dark.png | Bin 0 -> 260468 bytes apps/www/public/images/blocks/sidebar-15.png | Bin 0 -> 250717 bytes apps/www/public/r/index.json | 4 +- .../public/r/styles/default/breadcrumb.json | 2 +- .../public/r/styles/default/sidebar-15.json | 2 +- apps/www/public/r/styles/default/sidebar.json | 6 +- .../public/r/styles/new-york/breadcrumb.json | 2 +- .../public/r/styles/new-york/sidebar-15.json | 2 +- .../www/public/r/styles/new-york/sidebar.json | 6 +- .../sidebar-15/components/sidebar-right.tsx | 1 - apps/www/registry/default/ui/breadcrumb.tsx | 2 +- apps/www/registry/default/ui/sidebar.tsx | 11 +- .../sidebar-15/components/sidebar-right.tsx | 1 - apps/www/registry/new-york/ui/breadcrumb.tsx | 2 +- apps/www/registry/new-york/ui/sidebar.tsx | 11 +- apps/www/registry/registry-ui.ts | 4 +- apps/www/scripts/capture-screenshots.mts | 100 ++++ apps/www/styles/globals.css | 4 +- package.json | 2 + pnpm-lock.yaml | 495 +++++++++++++++++- 84 files changed, 674 insertions(+), 45 deletions(-) create mode 100644 apps/www/public/images/blocks/demo-sidebar-controlled-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-controlled.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-footer-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-footer.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-group-action-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-group-action.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-group-collapsible-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-group-collapsible.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-group-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-group.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-header-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-header.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-action-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-action.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-badge-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-badge.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-collapsible-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-collapsible.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-sub-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu-sub.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-menu.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-rsc-dark.png create mode 100644 apps/www/public/images/blocks/demo-sidebar-rsc.png create mode 100644 apps/www/public/images/blocks/demo-sidebar.png create mode 100644 apps/www/public/images/blocks/login-01-dark.png create mode 100644 apps/www/public/images/blocks/login-01.png create mode 100644 apps/www/public/images/blocks/sidebar-01-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-01.png create mode 100644 apps/www/public/images/blocks/sidebar-02-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-02.png create mode 100644 apps/www/public/images/blocks/sidebar-03-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-03.png create mode 100644 apps/www/public/images/blocks/sidebar-04-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-04.png create mode 100644 apps/www/public/images/blocks/sidebar-05-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-05.png create mode 100644 apps/www/public/images/blocks/sidebar-06-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-06.png create mode 100644 apps/www/public/images/blocks/sidebar-07-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-07.png create mode 100644 apps/www/public/images/blocks/sidebar-08-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-08.png create mode 100644 apps/www/public/images/blocks/sidebar-09-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-09.png create mode 100644 apps/www/public/images/blocks/sidebar-10-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-10.png create mode 100644 apps/www/public/images/blocks/sidebar-11-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-11.png create mode 100644 apps/www/public/images/blocks/sidebar-12-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-12.png create mode 100644 apps/www/public/images/blocks/sidebar-13-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-13.png create mode 100644 apps/www/public/images/blocks/sidebar-14-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-14.png create mode 100644 apps/www/public/images/blocks/sidebar-15-dark.png create mode 100644 apps/www/public/images/blocks/sidebar-15.png create mode 100644 apps/www/scripts/capture-screenshots.mts diff --git a/apps/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx index 087eccfb9e..8b35b01098 100644 --- a/apps/www/app/(app)/blocks/layout.tsx +++ b/apps/www/app/(app)/blocks/layout.tsx @@ -43,9 +43,6 @@ export default function BlocksLayout({
-
- Note: The blocks preview does not work on mobile yet. -
{children}
diff --git a/apps/www/app/(app)/blocks/page.tsx b/apps/www/app/(app)/blocks/page.tsx index 150febbfd1..bc50d37215 100644 --- a/apps/www/app/(app)/blocks/page.tsx +++ b/apps/www/app/(app)/blocks/page.tsx @@ -17,7 +17,7 @@ export default async function BlocksPage() { return (
-
+
{blocks.map((name, index) => ( diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx index 18539ebe40..e3d0b1da1b 100644 --- a/apps/www/components/block-preview.tsx +++ b/apps/www/components/block-preview.tsx @@ -1,6 +1,7 @@ "use client" import * as React from "react" +import Image from "next/image" import { ImperativePanelHandle } from "react-resizable-panels" import { BlockToolbar } from "@/components/block-toolbar" @@ -32,14 +33,29 @@ export function BlockPreview({ + {block.name} + {block.name}