From c668c35bb93ca93984977c2b149b75b90c0916c1 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 15 Oct 2024 12:37:47 +0400 Subject: [PATCH 01/58] feat(www): add sidebar components --- apps/www/package.json | 2 +- .../default/block/demo-sidebar-footer.tsx | 66 ++ .../block/demo-sidebar-group-action.tsx | 69 ++ .../block/demo-sidebar-group-collapsible.tsx | 62 ++ .../default/block/demo-sidebar-group.tsx | 45 ++ .../default/block/demo-sidebar-header.tsx | 56 ++ .../block/demo-sidebar-menu-action.tsx | 104 +++ .../default/block/demo-sidebar-menu-badge.tsx | 95 +++ .../block/demo-sidebar-menu-collapsible.tsx | 197 +++++ .../default/block/demo-sidebar-menu-sub.tsx | 188 +++++ .../default/block/demo-sidebar-menu.tsx | 71 ++ .../registry/default/block/demo-sidebar.tsx | 79 ++ .../sidebar-01/components/app-sidebar.tsx | 279 +++---- .../block/sidebar-01/components/nav-main.tsx | 196 ----- .../sidebar-01/components/nav-projects.tsx | 69 -- .../sidebar-01/components/nav-secondary.tsx | 43 -- .../block/sidebar-01/components/nav-user.tsx | 97 --- .../sidebar-01/components/search-form.tsx | 28 + .../sidebar-01/components/storage-card.tsx | 25 - .../sidebar-01/components/team-switcher.tsx | 79 -- .../components/version-switcher.tsx | 64 ++ .../block/sidebar-01/hooks/use-sidebar.tsx | 12 - .../default/block/sidebar-01/page.tsx | 57 +- .../default/block/sidebar-01/ui/sidebar.tsx | 204 ----- .../sidebar-02/components/app-sidebar.tsx | 215 ++++++ .../sidebar-02/components/search-form.tsx | 28 + .../components/version-switcher.tsx | 64 ++ .../default/block/sidebar-02/page.tsx | 54 ++ .../sidebar-03/components/app-sidebar.tsx | 208 +++++ .../default/block/sidebar-03/page.tsx | 56 ++ .../sidebar-04/components/app-sidebar.tsx | 206 +++++ .../default/block/sidebar-04/page.tsx | 60 ++ .../sidebar-05/components/app-sidebar.tsx | 228 ++++++ .../sidebar-05/components/search-form.tsx | 28 + .../default/block/sidebar-05/page.tsx | 54 ++ .../sidebar-06/components/app-sidebar.tsx | 179 +++++ .../block/sidebar-06/components/nav-main.tsx | 65 ++ .../components/sidebar-opt-in-form.tsx | 33 + .../default/block/sidebar-06/page.tsx | 54 ++ .../sidebar-07/components/app-sidebar.tsx | 172 +++++ .../block/sidebar-07/components/nav-main.tsx | 78 ++ .../sidebar-07/components/nav-projects.tsx | 89 +++ .../block/sidebar-07/components/nav-user.tsx | 114 +++ .../default/block/sidebar-07/page.tsx | 56 ++ .../sidebar-08/components/app-sidebar.tsx | 185 +++++ .../block/sidebar-08/components/nav-main.tsx | 78 ++ .../sidebar-08/components/nav-projects.tsx | 89 +++ .../sidebar-08/components/nav-secondary.tsx | 40 + .../block/sidebar-08/components/nav-user.tsx | 114 +++ .../default/block/sidebar-08/page.tsx | 56 ++ .../sidebar-09/components/app-sidebar.tsx | 262 +++++++ .../block/sidebar-09/components/nav-main.tsx | 78 ++ .../sidebar-09/components/nav-projects.tsx | 89 +++ .../block/sidebar-09/components/nav-user.tsx | 114 +++ .../default/block/sidebar-09/page.tsx | 58 ++ .../sidebar-10/components/app-sidebar.tsx | 276 +++++++ .../sidebar-10/components/nav-actions.tsx | 153 ++++ .../sidebar-10/components/nav-favorites.tsx | 94 +++ .../block/sidebar-10/components/nav-main.tsx | 35 + .../sidebar-10/components/nav-secondary.tsx | 43 ++ .../sidebar-10/components/nav-workspaces.tsx | 85 ++ .../sidebar-10/components/team-switcher.tsx | 79 ++ .../default/block/sidebar-10/page.tsx | 50 ++ .../sidebar-11/components/app-sidebar.tsx | 141 ++++ .../default/block/sidebar-11/page.tsx | 56 ++ .../sidebar-12/components/app-sidebar.tsx | 66 ++ .../block/sidebar-12/components/calendars.tsx | 71 ++ .../sidebar-12/components/date-picker.tsx | 15 + .../block/sidebar-12/components/nav-user.tsx | 114 +++ .../default/block/sidebar-12/page.tsx | 45 ++ .../sidebar-13/components/settings-dialog.tsx | 123 +++ .../default/block/sidebar-13/page.tsx | 13 + .../sidebar-14/components/app-sidebar.tsx | 197 +++++ .../default/block/sidebar-14/page.tsx | 52 ++ .../block/sidebar-15/components/calendars.tsx | 72 ++ .../sidebar-15/components/date-picker.tsx | 15 + .../sidebar-15/components/nav-favorites.tsx | 94 +++ .../block/sidebar-15/components/nav-main.tsx | 35 + .../sidebar-15/components/nav-secondary.tsx | 43 ++ .../block/sidebar-15/components/nav-user.tsx | 114 +++ .../sidebar-15/components/nav-workspaces.tsx | 85 ++ .../sidebar-15/components/sidebar-left.tsx | 278 +++++++ .../sidebar-15/components/sidebar-right.tsx | 72 ++ .../sidebar-15/components/team-switcher.tsx | 79 ++ .../default/block/sidebar-15/page.tsx | 48 ++ apps/www/registry/default/ui/sidebar.tsx | 724 ++++++++++++++++++ .../new-york/block/demo-sidebar-footer.tsx | 66 ++ .../block/demo-sidebar-group-action.tsx | 69 ++ .../block/demo-sidebar-group-collapsible.tsx | 62 ++ .../new-york/block/demo-sidebar-group.tsx | 45 ++ .../new-york/block/demo-sidebar-header.tsx | 56 ++ .../block/demo-sidebar-menu-action.tsx | 104 +++ .../block/demo-sidebar-menu-badge.tsx | 95 +++ .../block/demo-sidebar-menu-collapsible.tsx | 197 +++++ .../new-york/block/demo-sidebar-menu-sub.tsx | 188 +++++ .../new-york/block/demo-sidebar-menu.tsx | 71 ++ .../registry/new-york/block/demo-sidebar.tsx | 79 ++ .../sidebar-01/components/app-sidebar.tsx | 279 +++---- .../block/sidebar-01/components/nav-main.tsx | 196 ----- .../sidebar-01/components/nav-projects.tsx | 69 -- .../sidebar-01/components/nav-secondary.tsx | 43 -- .../block/sidebar-01/components/nav-user.tsx | 97 --- .../sidebar-01/components/search-form.tsx | 28 + .../sidebar-01/components/storage-card.tsx | 25 - .../sidebar-01/components/team-switcher.tsx | 79 -- .../components/version-switcher.tsx | 64 ++ .../block/sidebar-01/hooks/use-sidebar.tsx | 12 - .../new-york/block/sidebar-01/page.tsx | 57 +- .../new-york/block/sidebar-01/ui/sidebar.tsx | 204 ----- .../sidebar-02/components/app-sidebar.tsx | 215 ++++++ .../sidebar-02/components/search-form.tsx | 28 + .../components/version-switcher.tsx | 64 ++ .../new-york/block/sidebar-02/page.tsx | 54 ++ .../sidebar-03/components/app-sidebar.tsx | 208 +++++ .../new-york/block/sidebar-03/page.tsx | 56 ++ .../sidebar-04/components/app-sidebar.tsx | 206 +++++ .../new-york/block/sidebar-04/page.tsx | 60 ++ .../sidebar-05/components/app-sidebar.tsx | 228 ++++++ .../sidebar-05/components/search-form.tsx | 28 + .../new-york/block/sidebar-05/page.tsx | 54 ++ .../sidebar-06/components/app-sidebar.tsx | 179 +++++ .../block/sidebar-06/components/nav-main.tsx | 65 ++ .../components/sidebar-opt-in-form.tsx | 33 + .../new-york/block/sidebar-06/page.tsx | 54 ++ .../sidebar-07/components/app-sidebar.tsx | 172 +++++ .../block/sidebar-07/components/nav-main.tsx | 78 ++ .../sidebar-07/components/nav-projects.tsx | 89 +++ .../block/sidebar-07/components/nav-user.tsx | 114 +++ .../new-york/block/sidebar-07/page.tsx | 56 ++ .../sidebar-08/components/app-sidebar.tsx | 185 +++++ .../block/sidebar-08/components/nav-main.tsx | 78 ++ .../sidebar-08/components/nav-projects.tsx | 89 +++ .../sidebar-08/components/nav-secondary.tsx | 40 + .../block/sidebar-08/components/nav-user.tsx | 114 +++ .../new-york/block/sidebar-08/page.tsx | 56 ++ .../sidebar-09/components/app-sidebar.tsx | 262 +++++++ .../block/sidebar-09/components/nav-main.tsx | 78 ++ .../sidebar-09/components/nav-projects.tsx | 89 +++ .../block/sidebar-09/components/nav-user.tsx | 114 +++ .../new-york/block/sidebar-09/page.tsx | 58 ++ .../sidebar-10/components/app-sidebar.tsx | 276 +++++++ .../sidebar-10/components/nav-actions.tsx | 153 ++++ .../sidebar-10/components/nav-favorites.tsx | 94 +++ .../block/sidebar-10/components/nav-main.tsx | 35 + .../sidebar-10/components/nav-secondary.tsx | 43 ++ .../sidebar-10/components/nav-workspaces.tsx | 85 ++ .../sidebar-10/components/team-switcher.tsx | 79 ++ .../new-york/block/sidebar-10/page.tsx | 50 ++ .../sidebar-11/components/app-sidebar.tsx | 141 ++++ .../new-york/block/sidebar-11/page.tsx | 56 ++ .../sidebar-12/components/app-sidebar.tsx | 66 ++ .../block/sidebar-12/components/calendars.tsx | 71 ++ .../sidebar-12/components/date-picker.tsx | 15 + .../block/sidebar-12/components/nav-user.tsx | 114 +++ .../new-york/block/sidebar-12/page.tsx | 45 ++ .../sidebar-13/components/settings-dialog.tsx | 123 +++ .../new-york/block/sidebar-13/page.tsx | 13 + .../sidebar-14/components/app-sidebar.tsx | 197 +++++ .../new-york/block/sidebar-14/page.tsx | 52 ++ .../block/sidebar-15/components/calendars.tsx | 72 ++ .../sidebar-15/components/date-picker.tsx | 15 + .../sidebar-15/components/nav-favorites.tsx | 94 +++ .../block/sidebar-15/components/nav-main.tsx | 35 + .../sidebar-15/components/nav-secondary.tsx | 43 ++ .../block/sidebar-15/components/nav-user.tsx | 114 +++ .../sidebar-15/components/nav-workspaces.tsx | 85 ++ .../sidebar-15/components/sidebar-left.tsx | 278 +++++++ .../sidebar-15/components/sidebar-right.tsx | 72 ++ .../sidebar-15/components/team-switcher.tsx | 79 ++ .../new-york/block/sidebar-15/page.tsx | 48 ++ apps/www/registry/new-york/ui/sidebar.tsx | 724 ++++++++++++++++++ apps/www/registry/registry-blocks.ts | 511 +++++++++--- apps/www/scripts/build-registry.mts | 22 +- apps/www/styles/globals.css | 18 + package.json | 2 +- pnpm-lock.yaml | 115 ++- tailwind.config.cjs | 10 + 177 files changed, 16172 insertions(+), 2020 deletions(-) create mode 100644 apps/www/registry/default/block/demo-sidebar-footer.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-group-action.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-group-collapsible.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-group.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-header.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-menu-action.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-menu-badge.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-menu-collapsible.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-menu-sub.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar-menu.tsx create mode 100644 apps/www/registry/default/block/demo-sidebar.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/components/nav-main.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/sidebar-01/components/search-form.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/components/storage-card.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx create mode 100644 apps/www/registry/default/block/sidebar-01/components/version-switcher.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx delete mode 100644 apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-02/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-02/components/search-form.tsx create mode 100644 apps/www/registry/default/block/sidebar-02/components/version-switcher.tsx create mode 100644 apps/www/registry/default/block/sidebar-02/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-03/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-03/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-04/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-04/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-05/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-05/components/search-form.tsx create mode 100644 apps/www/registry/default/block/sidebar-05/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-06/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-06/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx create mode 100644 apps/www/registry/default/block/sidebar-06/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-07/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-07/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/sidebar-07/components/nav-projects.tsx create mode 100644 apps/www/registry/default/block/sidebar-07/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/sidebar-07/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-08/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-08/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/sidebar-08/components/nav-projects.tsx create mode 100644 apps/www/registry/default/block/sidebar-08/components/nav-secondary.tsx create mode 100644 apps/www/registry/default/block/sidebar-08/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/sidebar-08/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-09/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-09/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/sidebar-09/components/nav-projects.tsx create mode 100644 apps/www/registry/default/block/sidebar-09/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/sidebar-09/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/nav-actions.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/nav-favorites.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/nav-secondary.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/nav-workspaces.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/components/team-switcher.tsx create mode 100644 apps/www/registry/default/block/sidebar-10/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-11/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-11/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-12/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-12/components/calendars.tsx create mode 100644 apps/www/registry/default/block/sidebar-12/components/date-picker.tsx create mode 100644 apps/www/registry/default/block/sidebar-12/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/sidebar-12/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-13/components/settings-dialog.tsx create mode 100644 apps/www/registry/default/block/sidebar-13/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-14/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/sidebar-14/page.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/calendars.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/date-picker.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/nav-favorites.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/nav-secondary.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/nav-workspaces.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/sidebar-left.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/sidebar-right.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/components/team-switcher.tsx create mode 100644 apps/www/registry/default/block/sidebar-15/page.tsx create mode 100644 apps/www/registry/default/ui/sidebar.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-footer.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-group-action.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-group-collapsible.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-group.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-header.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-menu-action.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-menu-badge.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-menu-collapsible.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-menu-sub.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar-menu.tsx create mode 100644 apps/www/registry/new-york/block/demo-sidebar.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/components/nav-main.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-01/components/search-form.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-01/components/version-switcher.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx delete mode 100644 apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-02/components/search-form.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-02/components/version-switcher.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-02/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-03/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-03/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-04/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-04/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-05/components/search-form.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-05/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-06/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-06/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-06/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-07/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-07/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-07/components/nav-projects.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-07/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-07/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-08/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-08/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-08/components/nav-projects.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-08/components/nav-secondary.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-08/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-08/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-09/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-09/components/nav-projects.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-09/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-09/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/nav-actions.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/nav-favorites.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/nav-secondary.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/nav-workspaces.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/components/team-switcher.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-10/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-11/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-11/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-12/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-12/components/calendars.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-12/components/date-picker.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-12/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-12/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-13/components/settings-dialog.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-13/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-14/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-14/page.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/calendars.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/date-picker.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/nav-favorites.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/nav-secondary.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/nav-workspaces.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/sidebar-left.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/sidebar-right.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/components/team-switcher.tsx create mode 100644 apps/www/registry/new-york/block/sidebar-15/page.tsx create mode 100644 apps/www/registry/new-york/ui/sidebar.tsx diff --git a/apps/www/package.json b/apps/www/package.json index 53529b19b79..88044d99e4c 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -106,7 +106,7 @@ "remark-gfm": "^4.0.0", "rimraf": "^4.1.3", "shiki": "^1.10.1", - "tailwindcss": "3.3.7", + "tailwindcss": "3.4.6", "typescript": "^5.5.3", "unist-builder": "3.0.0", "unist-util-visit": "^4.1.2" diff --git a/apps/www/registry/default/block/demo-sidebar-footer.tsx b/apps/www/registry/default/block/demo-sidebar-footer.tsx new file mode 100644 index 00000000000..ca01875a095 --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-footer.tsx @@ -0,0 +1,66 @@ +"use client" + +import { ChevronDown, ChevronUp, User2 } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export default function AppSidebar() { + return ( + + + + + + + + + + + Username + + + + + + Account + + + Billing + + + Sign out + + + + + + + + +
+ +
+ + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-group-action.tsx b/apps/www/registry/default/block/demo-sidebar-group-action.tsx new file mode 100644 index 00000000000..e465fac3566 --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-group-action.tsx @@ -0,0 +1,69 @@ +"use client" + +import { + ChevronDown, + Frame, + LifeBuoy, + Map, + PieChart, + Plus, + Send, +} from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupAction, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +export default function AppSidebar() { + return ( + + + + + Projects + + Add Project + + + + + + + + Design Engineering + + + + + + + + Sales & Marketing + + + + + + + + Travel + + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-group-collapsible.tsx b/apps/www/registry/default/block/demo-sidebar-group-collapsible.tsx new file mode 100644 index 00000000000..eb47f53f4d6 --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-group-collapsible.tsx @@ -0,0 +1,62 @@ +"use client" + +import { ChevronDown, LifeBuoy, Send } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +export default function AppSidebar() { + return ( + + + + + + + + Help + + + + + + + + + + Support + + + + + + Feedback + + + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-group.tsx b/apps/www/registry/default/block/demo-sidebar-group.tsx new file mode 100644 index 00000000000..65d1d41626a --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-group.tsx @@ -0,0 +1,45 @@ +"use client" + +import { LifeBuoy, Send } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +export default function AppSidebar() { + return ( + + + + + Help + + + + + + Support + + + + + + Feedback + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-header.tsx b/apps/www/registry/default/block/demo-sidebar-header.tsx new file mode 100644 index 00000000000..dbe5ed607cf --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-header.tsx @@ -0,0 +1,56 @@ +"use client" + +import { ChevronDown } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + Sidebar, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export default function AppSidebar() { + return ( + + + + + + + + + Select Workspace + + + + + + Acme Inc + + + Acme Corp. + + + + + + + + +
+ +
+ + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-menu-action.tsx b/apps/www/registry/default/block/demo-sidebar-menu-action.tsx new file mode 100644 index 00000000000..4887129c79c --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-menu-action.tsx @@ -0,0 +1,104 @@ +"use client" + +import { + Frame, + LifeBuoy, + Map, + MoreHorizontal, + PieChart, + Send, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +const projects = [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + { + name: "Support", + url: "#", + icon: LifeBuoy, + }, + { + name: "Feedback", + url: "#", + icon: Send, + }, +] + +export default function AppSidebar() { + return ( + + + + + Projects + + + {projects.map((project, index) => ( + + + + + {project.name} + + + + + + + More + + + + + Edit Project + + + Delete Project + + + + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-menu-badge.tsx b/apps/www/registry/default/block/demo-sidebar-menu-badge.tsx new file mode 100644 index 00000000000..f874a947785 --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-menu-badge.tsx @@ -0,0 +1,95 @@ +"use client" + +import { + Frame, + LifeBuoy, + Map, + MoreHorizontal, + PieChart, + Send, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +const projects = [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + badge: "24", + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + badge: "12", + }, + { + name: "Travel", + url: "#", + icon: Map, + badge: "3", + }, + { + name: "Support", + url: "#", + icon: LifeBuoy, + badge: "21", + }, + { + name: "Feedback", + url: "#", + icon: Send, + badge: "8", + }, +] + +export default function AppSidebar() { + return ( + + + + + Projects + + + {projects.map((project) => ( + + + + + {project.name} + + + {project.badge} + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-menu-collapsible.tsx b/apps/www/registry/default/block/demo-sidebar-menu-collapsible.tsx new file mode 100644 index 00000000000..a2745d08cef --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-menu-collapsible.tsx @@ -0,0 +1,197 @@ +"use client" + +import { ChevronRight } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +const items = [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, +] + +export default function AppSidebar() { + return ( + + + + + + + {items.map((item, index) => ( + + + + + {item.title} + + + + + + {item.items.map((subItem, subIndex) => ( + + + + {subItem.title} + + + + ))} + + + + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-menu-sub.tsx b/apps/www/registry/default/block/demo-sidebar-menu-sub.tsx new file mode 100644 index 00000000000..b44020569ff --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-menu-sub.tsx @@ -0,0 +1,188 @@ +"use client" + +import { ChevronRight } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +const items = [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, +] + +export default function AppSidebar() { + return ( + + + + + + + {items.map((item, index) => ( + + + + {item.title} + + + + {item.items.map((subItem, subIndex) => ( + + + + {subItem.title} + + + + ))} + + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar-menu.tsx b/apps/www/registry/default/block/demo-sidebar-menu.tsx new file mode 100644 index 00000000000..db3e83a8a0a --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar-menu.tsx @@ -0,0 +1,71 @@ +"use client" + +import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +const projects = [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + { + name: "Support", + url: "#", + icon: LifeBuoy, + }, + { + name: "Feedback", + url: "#", + icon: Send, + }, +] + +export default function AppSidebar() { + return ( + + + + + Projects + + + {projects.map((project) => ( + + + + + {project.name} + + + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/default/block/demo-sidebar.tsx b/apps/www/registry/default/block/demo-sidebar.tsx new file mode 100644 index 00000000000..75b173dfe45 --- /dev/null +++ b/apps/www/registry/default/block/demo-sidebar.tsx @@ -0,0 +1,79 @@ +"use client" + +import { Calendar, Home, Inbox, Search, Settings } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarInset, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +// Menu items. +const items = [ + { + title: "Home", + url: "#", + icon: Home, + }, + { + title: "Inbox", + url: "#", + icon: Inbox, + }, + { + title: "Calendar", + url: "#", + icon: Calendar, + }, + { + title: "Search", + url: "#", + icon: Search, + }, + { + title: "Settings", + url: "#", + icon: Settings, + }, +] + +export default function AppSidebar() { + return ( + + + + + Application + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + +
+ +
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx index 2c936c91541..67ac73c9a87 100644 --- a/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx +++ b/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx @@ -1,283 +1,182 @@ -"use client" +import * as React from "react" -import { - Atom, - Bird, - BookOpen, - Bot, - Code2, - Eclipse, - Frame, - History, - LifeBuoy, - Map, - PieChart, - Rabbit, - Send, - Settings2, - SquareTerminal, - Star, - Turtle, -} from "lucide-react" - -import { NavMain } from "@/registry/default/block/sidebar-01/components/nav-main" -import { NavProjects } from "@/registry/default/block/sidebar-01/components/nav-projects" -import { NavSecondary } from "@/registry/default/block/sidebar-01/components/nav-secondary" -import { NavUser } from "@/registry/default/block/sidebar-01/components/nav-user" -import { StorageCard } from "@/registry/default/block/sidebar-01/components/storage-card" -import { TeamSwitcher } from "@/registry/default/block/sidebar-01/components/team-switcher" +import { SearchForm } from "@/registry/default/block/sidebar-01/components/search-form" +import { VersionSwitcher } from "@/registry/default/block/sidebar-01/components/version-switcher" import { Sidebar, SidebarContent, - SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, SidebarHeader, - SidebarItem, - SidebarLabel, -} from "@/registry/default/block/sidebar-01/ui/sidebar" - -export const iframeHeight = "870px" - -export const containerClassName = "w-full h-full" + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" +// This is sample data. const data = { - teams: [ - { - name: "Acme Inc", - logo: Atom, - plan: "Enterprise", - }, - { - name: "Acme Corp.", - logo: Eclipse, - plan: "Startup", - }, - { - name: "Evil Corp.", - logo: Rabbit, - plan: "Free", - }, - ], - user: { - name: "shadcn", - email: "m@example.com", - avatar: "/avatars/shadcn.jpg", - }, + versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"], navMain: [ { - title: "Playground", + title: "Getting Started", url: "#", - icon: SquareTerminal, - isActive: true, items: [ { - title: "History", + title: "Installation", url: "#", - icon: History, - description: "View your recent prompts", }, { - title: "Starred", + title: "Project Structure", url: "#", - icon: Star, - description: "Browse your starred prompts", - }, - { - title: "Settings", - url: "#", - icon: Settings2, - description: "Configure your playground", }, ], }, { - title: "Models", + title: "Building Your Application", url: "#", - icon: Bot, items: [ { - title: "Genesis", + title: "Routing", url: "#", - icon: Rabbit, - description: "Our fastest model for general use cases.", }, { - title: "Explorer", + title: "Data Fetching", url: "#", - icon: Bird, - description: "Performance and speed for efficiency.", + isActive: true, }, { - title: "Quantum", + title: "Rendering", url: "#", - icon: Turtle, - description: "The most powerful model for complex computations.", }, - ], - }, - { - title: "Documentation", - url: "#", - icon: BookOpen, - items: [ { - title: "Introduction", + title: "Caching", url: "#", }, { - title: "Get Started", + title: "Styling", url: "#", }, { - title: "Tutorials", + title: "Optimizing", url: "#", }, { - title: "Changelog", + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", url: "#", }, ], }, { - title: "API", + title: "API Reference", url: "#", - icon: Code2, items: [ { - title: "Chat", + title: "Components", + url: "#", + }, + { + title: "File Conventions", url: "#", }, { - title: "Completion", + title: "Functions", url: "#", }, { - title: "Images", + title: "next.config.js Options", url: "#", }, { - title: "Video", + title: "CLI", url: "#", }, { - title: "Speech", + title: "Edge Runtime", url: "#", }, ], }, { - title: "Settings", + title: "Architecture", url: "#", - icon: Settings2, items: [ { - title: "General", + title: "Accessibility", url: "#", }, { - title: "Team", + title: "Fast Refresh", url: "#", }, { - title: "Billing", + title: "Next.js Compiler", url: "#", }, { - title: "Limits", + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", url: "#", }, ], }, ], - - navSecondary: [ - { - title: "Support", - url: "#", - icon: LifeBuoy, - }, - { - title: "Feedback", - url: "#", - icon: Send, - }, - ], - projects: [ - { - name: "Design Engineering", - url: "#", - icon: Frame, - }, - { - name: "Sales & Marketing", - url: "#", - icon: PieChart, - }, - { - name: "Travel", - url: "#", - icon: Map, - }, - ], - searchResults: [ - { - title: "Routing Fundamentals", - teaser: - "The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.", - url: "#", - }, - { - title: "Layouts and Templates", - teaser: - "The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.", - url: "#", - }, - { - title: "Data Fetching, Caching, and Revalidating", - teaser: - "Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.", - url: "#", - }, - { - title: "Server and Client Composition Patterns", - teaser: - "When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. ", - url: "#", - }, - { - title: "Server Actions and Mutations", - teaser: - "Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.", - url: "#", - }, - ], } -export function AppSidebar() { +export function AppSidebar({ ...props }: React.ComponentProps) { return ( - + - + + - - Platform - - - - Projects - - - - Help - - - - - + {/* We create a SidebarGroup for each parent. */} + {data.navMain.map((item) => ( + + {item.title} + + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + + + ))} - - - + ) } diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx deleted file mode 100644 index a3b214f85ec..00000000000 --- a/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx +++ /dev/null @@ -1,196 +0,0 @@ -"use client" - -import Link from "next/link" -import { ChevronRight, Search, type LucideIcon } from "lucide-react" - -import { useIsMobile } from "@/registry/default/hooks/use-mobile" -import { cn } from "@/registry/default/lib/utils" -import { Button } from "@/registry/default/ui/button" -import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, -} from "@/registry/default/ui/collapsible" -import { - Drawer, - DrawerContent, - DrawerTrigger, -} from "@/registry/default/ui/drawer" -import { Input } from "@/registry/default/ui/input" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/registry/default/ui/popover" -import { Separator } from "@/registry/default/ui/separator" - -export function NavMain({ - className, - items, - searchResults, -}: { - items: { - title: string - url: string - icon: LucideIcon - isActive?: boolean - items?: { - title: string - url: string - }[] - }[] - searchResults: React.ComponentProps["results"] -} & React.ComponentProps<"ul">) { - return ( -
    -
  • - -
    • - {items.map((item) => ( - -
  • -
    - - -
    -
    {item.title}
    -
    - - - - -
    - -
      - {item.items?.map((subItem) => ( -
    • - -
      {subItem.title}
      - -
      • - ))} -
    -     -
    • -     - ))} -
- ) -} - -function SidebarSearch({ - results, -}: { - results: { - title: string - teaser: string - url: string - }[] -}) { - const isMobile = useIsMobile() - - if (isMobile) { - return ( - - - -
-
Search
-
- - -
-
- -
-
-
- {results.map((result) => ( - -
{result.title}
-
- {result.teaser} -
- - ))} - - - See all results - -
- - - ) - } - - return ( - - - -
-
Search
-
- - -
-
- -
-
-
- {results.map((result) => ( - -
{result.title}
-
- {result.teaser} -
- - ))} - - - See all results - -
- - - ) -} diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx deleted file mode 100644 index fd9b7cfbc72..00000000000 --- a/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import Link from "next/link" -import { MoreHorizontal, PlusSquare, type LucideIcon } from "lucide-react" - -import { cn } from "@/registry/default/lib/utils" -import { Button } from "@/registry/default/ui/button" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/registry/default/ui/dropdown-menu" - -export function NavProjects({ - projects, - className, -}: { - projects: { - name: string - url: string - icon: LucideIcon - }[] -} & React.ComponentProps<"ul">) { - return ( -
    - {projects.map((item) => ( -
  • - - -
    - {item.name} -
    - - - - - - - Share - Rename - - Archive - - -
    • - ))} -
  • - -
    • -
- ) -} diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx deleted file mode 100644 index 6da69097471..00000000000 --- a/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client" - -import Link from "next/link" -import { type LucideIcon } from "lucide-react" - -import { cn } from "@/registry/default/lib/utils" - -export function NavSecondary({ - className, - items, -}: { - items: { - title: string - url: string - icon: LucideIcon - items?: { - title: string - url: string - }[] - }[] -} & React.ComponentProps<"ul">) { - if (!items?.length) { - return null - } - - return ( -
    - {items.map((item) => ( -
  • - - -
    - {item.title} -
    - -
    • - ))} -
- ) -} diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-user.tsx deleted file mode 100644 index 82955e5a439..00000000000 --- a/apps/www/registry/default/block/sidebar-01/components/nav-user.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { - BadgeCheck, - Bell, - ChevronsUpDown, - CreditCard, - LogOut, -} from "lucide-react" - -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/registry/default/ui/avatar" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/registry/default/ui/dropdown-menu" - -export function NavUser({ - user, -}: { - user: { - name: string - email: string - avatar: string - } -}) { - return ( - - -
- - - CN - -
-
{user.name}
-
-
{user.email}
-
-
- -
- - - -
- - - CN - -
-
{user.name}
-
-
{user.email}
-
-
-
- - - - - - Account - - - - Billing - - - - Notifications - - - - - - Log out - - - - ) -} diff --git a/apps/www/registry/default/block/sidebar-01/components/search-form.tsx b/apps/www/registry/default/block/sidebar-01/components/search-form.tsx new file mode 100644 index 00000000000..0126dc6e7e9 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-01/components/search-form.tsx @@ -0,0 +1,28 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/default/ui/label" +import { + SidebarGroup, + SidebarGroupContent, + SidebarInput, +} from "@/registry/default/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
+ + + + + + + +
+ ) +} diff --git a/apps/www/registry/default/block/sidebar-01/components/storage-card.tsx b/apps/www/registry/default/block/sidebar-01/components/storage-card.tsx deleted file mode 100644 index 714c1c16264..00000000000 --- a/apps/www/registry/default/block/sidebar-01/components/storage-card.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Database } from "lucide-react" - -import { Card, CardContent } from "@/registry/default/ui/card" -import { Progress } from "@/registry/default/ui/progress" - -export function StorageCard() { - return ( - - -
- -
-
-

Running out of space?

-

79.2 GB / 100 GB used

- -
- - - ) -} diff --git a/apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx b/apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx deleted file mode 100644 index 48e2da68c48..00000000000 --- a/apps/www/registry/default/block/sidebar-01/components/team-switcher.tsx +++ /dev/null @@ -1,79 +0,0 @@ -"use client" - -import * as React from "react" -import { ChevronsUpDown, Plus } from "lucide-react" - -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuTrigger, -} from "@/registry/default/ui/dropdown-menu" - -export function TeamSwitcher({ - teams, -}: { - teams: { - name: string - logo: React.ElementType - plan: string - }[] -}) { - const [activeTeam, setActiveTeam] = React.useState(teams[0]) - - return ( - - -
-
- -
-
- {activeTeam.name} -
- -
- - - - Teams - - {teams.map((team, index) => ( - setActiveTeam(team)} - className="items-start gap-2 px-1.5" - > -
- -
-
-
{team.name}
-
-
{team.plan}
-
-
- - ⌘{index + 1} - - - ))} - - -
- -
-
Add workspace
- - - - ) -} diff --git a/apps/www/registry/default/block/sidebar-01/components/version-switcher.tsx b/apps/www/registry/default/block/sidebar-01/components/version-switcher.tsx new file mode 100644 index 00000000000..b448357a8b3 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-01/components/version-switcher.tsx @@ -0,0 +1,64 @@ +"use client" + +import * as React from "react" +import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function VersionSwitcher({ + versions, + defaultVersion, +}: { + versions: string[] + defaultVersion: string +}) { + const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion) + + return ( + + + + + +
+ +
+
+ Documentation + v{selectedVersion} +
+ + + + + {versions.map((version) => ( + setSelectedVersion(version)} + > + v{version}{" "} + {version === selectedVersion && } + + ))} + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx b/apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx deleted file mode 100644 index 61208293d61..00000000000 --- a/apps/www/registry/default/block/sidebar-01/hooks/use-sidebar.tsx +++ /dev/null @@ -1,12 +0,0 @@ -"use client" - -import * as React from "react" - -export function useSidebar() { - const [state, setState] = React.useState<"closed" | "open">("open") - - return { - open: state === "open", - onOpenChange: (open: boolean) => setState(open ? "open" : "closed"), - } -} diff --git a/apps/www/registry/default/block/sidebar-01/page.tsx b/apps/www/registry/default/block/sidebar-01/page.tsx index 335bb25e163..d40124f0c9a 100644 --- a/apps/www/registry/default/block/sidebar-01/page.tsx +++ b/apps/www/registry/default/block/sidebar-01/page.tsx @@ -1,25 +1,54 @@ import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar" import { - SidebarLayout, + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, SidebarTrigger, -} from "@/registry/default/block/sidebar-01/ui/sidebar" +} from "@/registry/default/ui/sidebar" -export const iframeHeight = "870px" +export const iframeHeight = "800px" -export const containerClassName = "w-full h-full" +export const teaser = "A simple sidebar with navigation grouped by section." -export default async function Page() { - const { cookies } = await import("next/headers") +export default function Page() { return ( - + -
-
- + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
-
- + + ) } diff --git a/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx b/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx deleted file mode 100644 index e9037f34bdc..00000000000 --- a/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx +++ /dev/null @@ -1,204 +0,0 @@ -"use client" - -import * as React from "react" -import { PanelLeft } from "lucide-react" - -import { useIsMobile } from "@/registry/default/hooks/use-mobile" -import { cn } from "@/registry/default/lib/utils" -import { Button } from "@/registry/default/ui/button" -import { Sheet, SheetContent } from "@/registry/default/ui/sheet" - -export const SIDEBAR_STATE_COOKIE = "sidebar:state" - -type SidebarContext = { - state: "open" | "closed" - open: boolean - onOpenChange: (open: boolean) => void -} - -const SidebarContext = React.createContext({ - state: "open", - open: true, - onOpenChange: () => {}, -}) - -function useSidebar() { - return React.useContext(SidebarContext) -} - -const SidebarLayout = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> & { - defaultOpen?: boolean - } ->(({ defaultOpen, className, ...props }, ref) => { - const [open, setOpen] = React.useState(defaultOpen ?? true) - - const onOpenChange = React.useCallback((open: boolean) => { - setOpen(open) - document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${ - 60 * 60 * 24 * 7 - }` - }, []) - - const state = open ? "open" : "closed" - - return ( - -
- - ) -}) -SidebarLayout.displayName = "SidebarLayout" - -const SidebarTrigger = React.forwardRef< - HTMLButtonElement, - React.ComponentProps<"button"> ->(({ className, ...props }, ref) => { - const { open, onOpenChange } = useSidebar() - - return ( - - ) -}) -SidebarTrigger.displayName = "SidebarTrigger" - -const Sidebar = React.forwardRef>( - ({ className, children }, ref) => { - const isMobile = useIsMobile() - const { open, onOpenChange } = useSidebar() - - const sidebar = ( -
- {children} -
- ) - - if (isMobile) { - return ( - - - {sidebar} - - - ) - } - - return ( - - ) - } -) -Sidebar.displayName = "Sidebar" - -const SidebarHeader = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarHeader.displayName = "SidebarHeader" - -const SidebarFooter = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarFooter.displayName = "SidebarFooter" - -const SidebarContent = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarContent.displayName = "SidebarContent" - -const SidebarItem = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarItem.displayName = "SidebarItem" - -const SidebarLabel = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarLabel.displayName = "SidebarLabel" - -export { - Sidebar, - SidebarContent, - SidebarFooter, - SidebarHeader, - SidebarItem, - SidebarLabel, - SidebarLayout, - SidebarTrigger, - useSidebar, -} diff --git a/apps/www/registry/default/block/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-02/components/app-sidebar.tsx new file mode 100644 index 00000000000..e5d3354ce0f --- /dev/null +++ b/apps/www/registry/default/block/sidebar-02/components/app-sidebar.tsx @@ -0,0 +1,215 @@ +import * as React from "react" +import { ChevronRight } from "lucide-react" + +import { SearchForm } from "@/registry/default/block/sidebar-02/components/search-form" +import { VersionSwitcher } from "@/registry/default/block/sidebar-02/components/version-switcher" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"], + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + {/* We create a collapsible SidebarGroup for each parent. */} + {data.navMain.map((item) => ( + + + + + {item.title}{" "} + + + + + + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + + + + + ))} + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-02/components/search-form.tsx b/apps/www/registry/default/block/sidebar-02/components/search-form.tsx new file mode 100644 index 00000000000..0126dc6e7e9 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-02/components/search-form.tsx @@ -0,0 +1,28 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/default/ui/label" +import { + SidebarGroup, + SidebarGroupContent, + SidebarInput, +} from "@/registry/default/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
+ + + + + + + +
+ ) +} diff --git a/apps/www/registry/default/block/sidebar-02/components/version-switcher.tsx b/apps/www/registry/default/block/sidebar-02/components/version-switcher.tsx new file mode 100644 index 00000000000..b448357a8b3 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-02/components/version-switcher.tsx @@ -0,0 +1,64 @@ +"use client" + +import * as React from "react" +import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function VersionSwitcher({ + versions, + defaultVersion, +}: { + versions: string[] + defaultVersion: string +}) { + const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion) + + return ( + + + + + +
+ +
+
+ Documentation + v{selectedVersion} +
+ + + + + {versions.map((version) => ( + setSelectedVersion(version)} + > + v{version}{" "} + {version === selectedVersion && } + + ))} + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-02/page.tsx b/apps/www/registry/default/block/sidebar-02/page.tsx new file mode 100644 index 00000000000..0f3eaac254f --- /dev/null +++ b/apps/www/registry/default/block/sidebar-02/page.tsx @@ -0,0 +1,54 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-02/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with collapsible sections." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+ {Array.from({ length: 24 }).map((_, index) => ( +
+ ))} +
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-03/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-03/components/app-sidebar.tsx new file mode 100644 index 00000000000..473cb03f4e2 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-03/components/app-sidebar.tsx @@ -0,0 +1,208 @@ +import * as React from "react" +import { GalleryVerticalEnd } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + {data.navMain.map((item) => ( + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + ) : null} + + ))} + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-03/page.tsx b/apps/www/registry/default/block/sidebar-03/page.tsx new file mode 100644 index 00000000000..8bf084c3aed --- /dev/null +++ b/apps/www/registry/default/block/sidebar-03/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-03/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with submenus." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-04/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-04/components/app-sidebar.tsx new file mode 100644 index 00000000000..12be284e58c --- /dev/null +++ b/apps/www/registry/default/block/sidebar-04/components/app-sidebar.tsx @@ -0,0 +1,206 @@ +import * as React from "react" +import { GalleryVerticalEnd } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + {data.navMain.map((item) => ( + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + ) : null} + + ))} + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-04/page.tsx b/apps/www/registry/default/block/sidebar-04/page.tsx new file mode 100644 index 00000000000..e4a95cfb381 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-04/page.tsx @@ -0,0 +1,60 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-04/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A floating sidebar with submenus." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-05/components/app-sidebar.tsx new file mode 100644 index 00000000000..ab86a3573ed --- /dev/null +++ b/apps/www/registry/default/block/sidebar-05/components/app-sidebar.tsx @@ -0,0 +1,228 @@ +import * as React from "react" +import { GalleryVerticalEnd, Minus, Plus } from "lucide-react" + +import { SearchForm } from "@/registry/default/block/sidebar-05/components/search-form" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + + {data.navMain.map((item, index) => ( + + + + + {item.title}{" "} + + + + + {item.items?.length ? ( + + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + + ) : null} + + + ))} + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-05/components/search-form.tsx b/apps/www/registry/default/block/sidebar-05/components/search-form.tsx new file mode 100644 index 00000000000..0126dc6e7e9 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-05/components/search-form.tsx @@ -0,0 +1,28 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/default/ui/label" +import { + SidebarGroup, + SidebarGroupContent, + SidebarInput, +} from "@/registry/default/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
+ + + + + + + +
+ ) +} diff --git a/apps/www/registry/default/block/sidebar-05/page.tsx b/apps/www/registry/default/block/sidebar-05/page.tsx new file mode 100644 index 00000000000..75eeda2451e --- /dev/null +++ b/apps/www/registry/default/block/sidebar-05/page.tsx @@ -0,0 +1,54 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-05/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with collapsible submenus." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-06/components/app-sidebar.tsx new file mode 100644 index 00000000000..8f9f1b355a3 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-06/components/app-sidebar.tsx @@ -0,0 +1,179 @@ +import * as React from "react" +import { GalleryVerticalEnd } from "lucide-react" + +import { NavMain } from "@/registry/default/block/sidebar-06/components/nav-main" +import { SidebarOptInForm } from "@/registry/default/block/sidebar-06/components/sidebar-opt-in-form" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + +
+ +
+ + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-06/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-06/components/nav-main.tsx new file mode 100644 index 00000000000..42fc952f33c --- /dev/null +++ b/apps/www/registry/default/block/sidebar-06/components/nav-main.tsx @@ -0,0 +1,65 @@ +"use client" + +import { MoreHorizontal, type LucideIcon } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon?: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + + {items.map((item) => ( + + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + {item.title} + + ))} + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/www/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx new file mode 100644 index 00000000000..a9111f3a15d --- /dev/null +++ b/apps/www/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx @@ -0,0 +1,33 @@ +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { SidebarInput } from "@/registry/default/ui/sidebar" + +export function SidebarOptInForm() { + return ( + +
+ + Subscribe to our newsletter + + Opt-in to receive updates and news about the sidebar. + + + + + + +
+ + ) +} diff --git a/apps/www/registry/default/block/sidebar-06/page.tsx b/apps/www/registry/default/block/sidebar-06/page.tsx new file mode 100644 index 00000000000..1775ec2ebe8 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-06/page.tsx @@ -0,0 +1,54 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-06/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with submenus as dropdowns." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-07/components/app-sidebar.tsx new file mode 100644 index 00000000000..4b1fb3db445 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-07/components/app-sidebar.tsx @@ -0,0 +1,172 @@ +"use client" + +import * as React from "react" +import { + BookOpen, + Bot, + Command, + Frame, + Map, + PieChart, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/registry/default/block/sidebar-07/components/nav-main" +import { NavProjects } from "@/registry/default/block/sidebar-07/components/nav-projects" +import { NavUser } from "@/registry/default/block/sidebar-07/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Acme Inc + Enterprise +
+ + + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-07/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-07/components/nav-main.tsx new file mode 100644 index 00000000000..bcfd5a59e50 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-07/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon?: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + {item.icon && } + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-07/components/nav-projects.tsx b/apps/www/registry/default/block/sidebar-07/components/nav-projects.tsx new file mode 100644 index 00000000000..859912e1237 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-07/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + Forward, + MoreHorizontal, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-07/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-07/components/nav-user.tsx new file mode 100644 index 00000000000..e22c32af62e --- /dev/null +++ b/apps/www/registry/default/block/sidebar-07/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-07/page.tsx b/apps/www/registry/default/block/sidebar-07/page.tsx new file mode 100644 index 00000000000..ab87a3176a0 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-07/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-07/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar that collapses to icons." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-08/components/app-sidebar.tsx new file mode 100644 index 00000000000..497472727b8 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-08/components/app-sidebar.tsx @@ -0,0 +1,185 @@ +"use client" + +import * as React from "react" +import { + BookOpen, + Bot, + Command, + Frame, + LifeBuoy, + Map, + PieChart, + Send, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/registry/default/block/sidebar-08/components/nav-main" +import { NavProjects } from "@/registry/default/block/sidebar-08/components/nav-projects" +import { NavSecondary } from "@/registry/default/block/sidebar-08/components/nav-secondary" +import { NavUser } from "@/registry/default/block/sidebar-08/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Acme Inc + Enterprise +
+ + + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-08/components/nav-main.tsx new file mode 100644 index 00000000000..10b836a2e3d --- /dev/null +++ b/apps/www/registry/default/block/sidebar-08/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-projects.tsx b/apps/www/registry/default/block/sidebar-08/components/nav-projects.tsx new file mode 100644 index 00000000000..85caea25e0b --- /dev/null +++ b/apps/www/registry/default/block/sidebar-08/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + MoreHorizontal, + Share, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-secondary.tsx b/apps/www/registry/default/block/sidebar-08/components/nav-secondary.tsx new file mode 100644 index 00000000000..e2d1e0f9ed1 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-08/components/nav-secondary.tsx @@ -0,0 +1,40 @@ +import React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-08/components/nav-user.tsx new file mode 100644 index 00000000000..e22c32af62e --- /dev/null +++ b/apps/www/registry/default/block/sidebar-08/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-08/page.tsx b/apps/www/registry/default/block/sidebar-08/page.tsx new file mode 100644 index 00000000000..4388a2fecac --- /dev/null +++ b/apps/www/registry/default/block/sidebar-08/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-08/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "An inset sidebar with secondary navigation." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-09/components/app-sidebar.tsx new file mode 100644 index 00000000000..be5b0223ed4 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-09/components/app-sidebar.tsx @@ -0,0 +1,262 @@ +"use client" + +import * as React from "react" +import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react" + +import { NavUser } from "@/registry/default/block/sidebar-09/components/nav-user" +import { Label } from "@/registry/default/ui/label" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarHeader, + SidebarInput, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" +import { Switch } from "@/registry/default/ui/switch" + +// This is sample data +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Inbox", + url: "#", + icon: Inbox, + isActive: true, + }, + { + title: "Drafts", + url: "#", + icon: File, + isActive: false, + }, + { + title: "Sent", + url: "#", + icon: Send, + isActive: false, + }, + { + title: "Junk", + url: "#", + icon: ArchiveX, + isActive: false, + }, + { + title: "Trash", + url: "#", + icon: Trash2, + isActive: false, + }, + ], + mails: [ + { + name: "William Smith", + email: "williamsmith@example.com", + subject: "Meeting Tomorrow", + date: "09:34 AM", + teaser: + "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.", + }, + { + name: "Alice Smith", + email: "alicesmith@example.com", + subject: "Re: Project Update", + date: "Yesterday", + teaser: + "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.", + }, + { + name: "Bob Johnson", + email: "bobjohnson@example.com", + subject: "Weekend Plans", + date: "2 days ago", + teaser: + "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?", + }, + { + name: "Emily Davis", + email: "emilydavis@example.com", + subject: "Re: Question about Budget", + date: "2 days ago", + teaser: + "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?", + }, + { + name: "Michael Wilson", + email: "michaelwilson@example.com", + subject: "Important Announcement", + date: "1 week ago", + teaser: + "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.", + }, + { + name: "Sarah Brown", + email: "sarahbrown@example.com", + subject: "Re: Feedback on Proposal", + date: "1 week ago", + teaser: + "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?", + }, + { + name: "David Lee", + email: "davidlee@example.com", + subject: "New Project Idea", + date: "1 week ago", + teaser: + "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?", + }, + { + name: "Olivia Wilson", + email: "oliviawilson@example.com", + subject: "Vacation Plans", + date: "1 week ago", + teaser: + "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.", + }, + { + name: "James Martin", + email: "jamesmartin@example.com", + subject: "Re: Conference Registration", + date: "1 week ago", + teaser: + "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.", + }, + { + name: "Sophia White", + email: "sophiawhite@example.com", + subject: "Team Dinner", + date: "1 week ago", + teaser: + "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.", + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + // Note: I'm using state to show active item. + // IRL you should use the url/router. + const [activeItem, setActiveItem] = React.useState(data.navMain[0]) + const [mails, setMails] = React.useState(data.mails) + const { setOpen } = useSidebar() + + return ( + + {/* This is the first sidebar */} + {/* We disable collapsible and adjust width to icon. */} + {/* This will make the sidebar appear as icons. */} + + + + + + +
+ +
+
+ Acme Inc + Enterprise +
+ + + + + + + + + + {data.navMain.map((item) => ( + + { + setActiveItem(item) + const mail = data.mails.sort(() => Math.random() - 0.5) + setMails( + mail.slice( + 0, + Math.max(5, Math.floor(Math.random() * 10) + 1) + ) + ) + setOpen(true) + }} + isActive={activeItem.title === item.title} + className="px-2.5 md:px-2" + > + + {item.title} + + + ))} + + + + + + + + + + {/* This is the second sidebar */} + {/* We disable collapsible and let it fill remaining space */} + + +
+
+ {activeItem.title} +
+ +
+ + + + + + {mails.map((mail) => ( + +
+ {mail.name}{" "} + {mail.date} +
+ {mail.subject} + + {mail.teaser} + + + ))} + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-09/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-09/components/nav-main.tsx new file mode 100644 index 00000000000..10b836a2e3d --- /dev/null +++ b/apps/www/registry/default/block/sidebar-09/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-09/components/nav-projects.tsx b/apps/www/registry/default/block/sidebar-09/components/nav-projects.tsx new file mode 100644 index 00000000000..85caea25e0b --- /dev/null +++ b/apps/www/registry/default/block/sidebar-09/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + MoreHorizontal, + Share, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-09/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-09/components/nav-user.tsx new file mode 100644 index 00000000000..03cae1fb290 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-09/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-09/page.tsx b/apps/www/registry/default/block/sidebar-09/page.tsx new file mode 100644 index 00000000000..a11e6d0ad29 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-09/page.tsx @@ -0,0 +1,58 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-09/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "Collapsible nested sidebars" + +export default function Page() { + return ( + + + +
+ + + + + + All Inboxes + + + + Inbox + + + +
+
+ {Array.from({ length: 24 }).map((_, index) => ( +
+ ))} +
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-10/components/app-sidebar.tsx new file mode 100644 index 00000000000..81f2d3c9342 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/app-sidebar.tsx @@ -0,0 +1,276 @@ +"use client" + +import * as React from "react" +import { + AudioWaveform, + Blocks, + Calendar, + Command, + Home, + Inbox, + MessageCircleQuestion, + Search, + Settings2, + Sparkles, + Trash2, +} from "lucide-react" + +import { NavFavorites } from "@/registry/default/block/sidebar-10/components/nav-favorites" +import { NavMain } from "@/registry/default/block/sidebar-10/components/nav-main" +import { NavSecondary } from "@/registry/default/block/sidebar-10/components/nav-secondary" +import { NavWorkspaces } from "@/registry/default/block/sidebar-10/components/nav-workspaces" +import { TeamSwitcher } from "@/registry/default/block/sidebar-10/components/team-switcher" +import { + Sidebar, + SidebarContent, + SidebarHeader, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + teams: [ + { + name: "Acme Inc", + logo: Command, + plan: "Enterprise", + }, + { + name: "Acme Corp.", + logo: AudioWaveform, + plan: "Startup", + }, + { + name: "Evil Corp.", + logo: Command, + plan: "Free", + }, + ], + navMain: [ + { + title: "Search", + url: "#", + icon: Search, + }, + { + title: "Ask AI", + url: "#", + icon: Sparkles, + }, + { + title: "Home", + url: "#", + icon: Home, + isActive: true, + }, + { + title: "Inbox", + url: "#", + icon: Inbox, + badge: "10", + }, + ], + navSecondary: [ + { + title: "Calendar", + url: "#", + icon: Calendar, + }, + { + title: "Settings", + url: "#", + icon: Settings2, + }, + { + title: "Templates", + url: "#", + icon: Blocks, + }, + { + title: "Trash", + url: "#", + icon: Trash2, + }, + { + title: "Help", + url: "#", + icon: MessageCircleQuestion, + }, + ], + favorites: [ + { + name: "Project Management & Task Tracking", + url: "#", + emoji: "📊", + }, + { + name: "Family Recipe Collection & Meal Planning", + url: "#", + emoji: "🍳", + }, + { + name: "Fitness Tracker & Workout Routines", + url: "#", + emoji: "💪", + }, + { + name: "Book Notes & Reading List", + url: "#", + emoji: "📚", + }, + { + name: "Sustainable Gardening Tips & Plant Care", + url: "#", + emoji: "🌱", + }, + { + name: "Language Learning Progress & Resources", + url: "#", + emoji: "🗣️", + }, + { + name: "Home Renovation Ideas & Budget Tracker", + url: "#", + emoji: "🏠", + }, + { + name: "Personal Finance & Investment Portfolio", + url: "#", + emoji: "💰", + }, + { + name: "Movie & TV Show Watchlist with Reviews", + url: "#", + emoji: "🎬", + }, + { + name: "Daily Habit Tracker & Goal Setting", + url: "#", + emoji: "✅", + }, + ], + workspaces: [ + { + name: "Personal Life Management", + emoji: "🏠", + pages: [ + { + name: "Daily Journal & Reflection", + url: "#", + emoji: "📔", + }, + { + name: "Health & Wellness Tracker", + url: "#", + emoji: "🍏", + }, + { + name: "Personal Growth & Learning Goals", + url: "#", + emoji: "🌟", + }, + ], + }, + { + name: "Professional Development", + emoji: "💼", + pages: [ + { + name: "Career Objectives & Milestones", + url: "#", + emoji: "🎯", + }, + { + name: "Skill Acquisition & Training Log", + url: "#", + emoji: "🧠", + }, + { + name: "Networking Contacts & Events", + url: "#", + emoji: "🤝", + }, + ], + }, + { + name: "Creative Projects", + emoji: "🎨", + pages: [ + { + name: "Writing Ideas & Story Outlines", + url: "#", + emoji: "✍️", + }, + { + name: "Art & Design Portfolio", + url: "#", + emoji: "🖼️", + }, + { + name: "Music Composition & Practice Log", + url: "#", + emoji: "🎵", + }, + ], + }, + { + name: "Home Management", + emoji: "🏡", + pages: [ + { + name: "Household Budget & Expense Tracking", + url: "#", + emoji: "💰", + }, + { + name: "Home Maintenance Schedule & Tasks", + url: "#", + emoji: "🔧", + }, + { + name: "Family Calendar & Event Planning", + url: "#", + emoji: "📅", + }, + ], + }, + { + name: "Travel & Adventure", + emoji: "🧳", + pages: [ + { + name: "Trip Planning & Itineraries", + url: "#", + emoji: "🗺️", + }, + { + name: "Travel Bucket List & Inspiration", + url: "#", + emoji: "🌎", + }, + { + name: "Travel Journal & Photo Gallery", + url: "#", + emoji: "📸", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-actions.tsx b/apps/www/registry/default/block/sidebar-10/components/nav-actions.tsx new file mode 100644 index 00000000000..41613beb8aa --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/nav-actions.tsx @@ -0,0 +1,153 @@ +"use client" + +import * as React from "react" +import { + ArrowDown, + ArrowUp, + Bell, + Copy, + CornerUpLeft, + CornerUpRight, + FileText, + GalleryVerticalEnd, + LineChart, + Link, + MoreHorizontal, + Settings2, + Star, + Trash, + Trash2, +} from "lucide-react" + +import { Button } from "@/registry/default/ui/button" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/registry/default/ui/popover" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +const data = [ + [ + { + label: "Customize Page", + icon: Settings2, + }, + { + label: "Turn into wiki", + icon: FileText, + }, + ], + [ + { + label: "Copy Link", + icon: Link, + }, + { + label: "Duplicate", + icon: Copy, + }, + { + label: "Move to", + icon: CornerUpRight, + }, + { + label: "Move to Trash", + icon: Trash2, + }, + ], + [ + { + label: "Undo", + icon: CornerUpLeft, + }, + { + label: "View analytics", + icon: LineChart, + }, + { + label: "Version History", + icon: GalleryVerticalEnd, + }, + { + label: "Show delete pages", + icon: Trash, + }, + { + label: "Notifications", + icon: Bell, + }, + ], + [ + { + label: "Import", + icon: ArrowUp, + }, + { + label: "Export", + icon: ArrowDown, + }, + ], +] + +export function NavActions() { + const [isOpen, setIsOpen] = React.useState(false) + + React.useEffect(() => { + setIsOpen(true) + }, []) + + return ( +
+
+ Edit Oct 08 +
+ + + + + + + + + {data.map((group, index) => ( + + + + {group.map((item, index) => ( + + + {item.label} + + + ))} + + + + ))} + + + + +
+ ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-favorites.tsx b/apps/www/registry/default/block/sidebar-10/components/nav-favorites.tsx new file mode 100644 index 00000000000..6cdd8545398 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/nav-favorites.tsx @@ -0,0 +1,94 @@ +"use client" + +import { + ArrowUpRight, + Link, + MoreHorizontal, + StarOff, + Trash2, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavFavorites({ + favorites, +}: { + favorites: { + name: string + url: string + emoji: string + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Favorites + + {favorites.map((item) => ( + + + + {item.emoji} + {item.name} + + + + + + + More + + + + + + Remove from Favorites + + + + + Copy Link + + + + Open in New Tab + + + + + Delete + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-10/components/nav-main.tsx new file mode 100644 index 00000000000..062803adb9b --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/nav-main.tsx @@ -0,0 +1,35 @@ +"use client" + +import { type LucideIcon } from "lucide-react" + +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + }[] +}) { + return ( + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-secondary.tsx b/apps/www/registry/default/block/sidebar-10/components/nav-secondary.tsx new file mode 100644 index 00000000000..e215151694d --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/nav-secondary.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + badge?: React.ReactNode + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + {item.badge && {item.badge}} + + ))} + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-workspaces.tsx b/apps/www/registry/default/block/sidebar-10/components/nav-workspaces.tsx new file mode 100644 index 00000000000..74883dadeb6 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/nav-workspaces.tsx @@ -0,0 +1,85 @@ +import { ChevronRight, MoreHorizontal, Plus } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +export function NavWorkspaces({ + workspaces, +}: { + workspaces: { + name: string + emoji: React.ReactNode + pages: { + name: string + emoji: React.ReactNode + }[] + }[] +}) { + return ( + + Workspaces + + + {workspaces.map((workspace) => ( + + + + + {workspace.emoji} + {workspace.name} + + + + + + + + + + + + + {workspace.pages.map((page) => ( + + + + {page.emoji} + {page.name} + + + + ))} + + + + + ))} + + + + More + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/components/team-switcher.tsx b/apps/www/registry/default/block/sidebar-10/components/team-switcher.tsx new file mode 100644 index 00000000000..d95881f57ce --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/components/team-switcher.tsx @@ -0,0 +1,79 @@ +"use client" + +import * as React from "react" +import { ChevronDown, Plus } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function TeamSwitcher({ + teams, +}: { + teams: { + name: string + logo: React.ElementType + plan: string + }[] +}) { + const [activeTeam, setActiveTeam] = React.useState(teams[0]) + + return ( + + + + + +
+ +
+ {activeTeam.name} + + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+ +
+ {team.name} + ⌘{index + 1} + + ))} + + +
+ +
+
Add team
+ + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-10/page.tsx b/apps/www/registry/default/block/sidebar-10/page.tsx new file mode 100644 index 00000000000..16e902897ac --- /dev/null +++ b/apps/www/registry/default/block/sidebar-10/page.tsx @@ -0,0 +1,50 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-10/components/app-sidebar" +import { NavActions } from "@/registry/default/block/sidebar-10/components/nav-actions" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar in a popover." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Project Management & Task Tracking + + + + +
+
+ +
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-11/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-11/components/app-sidebar.tsx new file mode 100644 index 00000000000..1e5d95bdc37 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-11/components/app-sidebar.tsx @@ -0,0 +1,141 @@ +import * as React from "react" +import { ChevronRight, File, Folder } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + changes: [ + { + file: "README.md", + state: "M", + }, + { + file: "api/hello/route.ts", + state: "U", + }, + { + file: "app/layout.tsx", + state: "M", + }, + ], + tree: [ + [ + "app", + [ + "api", + ["hello", ["route.ts"]], + "page.tsx", + "layout.tsx", + ["blog", ["page.tsx"]], + ], + ], + [ + "components", + ["ui", "button.tsx", "card.tsx"], + "header.tsx", + "footer.tsx", + ], + ["lib", ["util.ts"]], + ["public", "favicon.ico", "vercel.svg"], + ".eslintrc.json", + ".gitignore", + "next.config.js", + "tailwind.config.js", + "package.json", + "README.md", + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + Changes + + + {data.changes.map((item, index) => ( + + + + {item.file} + + {item.state} + + ))} + + + + + Files + + + {data.tree.map((item, index) => ( + + ))} + + + + + + + ) +} + +function Tree({ item }: { item: string | any[] }) { + const [name, ...items] = Array.isArray(item) ? item : [item] + + if (!items.length) { + return ( + + + {name} + + ) + } + + return ( + + + + + + + {name} + + + + + {items.map((subItem, index) => ( + + ))} + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-11/page.tsx b/apps/www/registry/default/block/sidebar-11/page.tsx new file mode 100644 index 00000000000..ed987d47676 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-11/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-11/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with a collapsible file tree." + +export default function Page() { + return ( + + + +
+ + + + + + components + + + + ui + + + + button.tsx + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-12/components/app-sidebar.tsx new file mode 100644 index 00000000000..fab237283f8 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-12/components/app-sidebar.tsx @@ -0,0 +1,66 @@ +import * as React from "react" +import { Plus } from "lucide-react" + +import { Calendars } from "@/registry/default/block/sidebar-12/components/calendars" +import { DatePicker } from "@/registry/default/block/sidebar-12/components/date-picker" +import { NavUser } from "@/registry/default/block/sidebar-12/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, + SidebarSeparator, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + calendars: [ + { + name: "My Calendars", + items: ["Personal", "Work", "Family"], + }, + { + name: "Favorites", + items: ["Holidays", "Birthdays"], + }, + { + name: "Other", + items: ["Travel", "Reminders", "Deadlines"], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + + + + + + + + + New Calendar + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-12/components/calendars.tsx b/apps/www/registry/default/block/sidebar-12/components/calendars.tsx new file mode 100644 index 00000000000..96b36ad4462 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-12/components/calendars.tsx @@ -0,0 +1,71 @@ +import * as React from "react" +import { Check, ChevronRight } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarSeparator, +} from "@/registry/default/ui/sidebar" + +export function Calendars({ + calendars, +}: { + calendars: { + name: string + items: string[] + }[] +}) { + return ( + <> + {calendars.map((calendar, index) => ( + + + + + + {calendar.name}{" "} + + + + + + + {calendar.items.map((item, index) => ( + + +
+ +
+ {item} + + + ))} + + + + + + + + ))} + + ) +} diff --git a/apps/www/registry/default/block/sidebar-12/components/date-picker.tsx b/apps/www/registry/default/block/sidebar-12/components/date-picker.tsx new file mode 100644 index 00000000000..5e2b6c7f056 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-12/components/date-picker.tsx @@ -0,0 +1,15 @@ +import { Calendar } from "@/registry/default/ui/calendar" +import { + SidebarGroup, + SidebarGroupContent, +} from "@/registry/default/ui/sidebar" + +export function DatePicker() { + return ( + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-12/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-12/components/nav-user.tsx new file mode 100644 index 00000000000..a0b0dcf2dbd --- /dev/null +++ b/apps/www/registry/default/block/sidebar-12/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-12/page.tsx b/apps/www/registry/default/block/sidebar-12/page.tsx new file mode 100644 index 00000000000..f434f2d5e76 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-12/page.tsx @@ -0,0 +1,45 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-12/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with a calendar." + +export default function Page() { + return ( + + + +
+ + + + + + October 2024 + + + +
+
+
+ {Array.from({ length: 20 }).map((_, i) => ( +
+ ))} +
+
+ + + ) +} diff --git a/apps/www/registry/default/block/sidebar-13/components/settings-dialog.tsx b/apps/www/registry/default/block/sidebar-13/components/settings-dialog.tsx new file mode 100644 index 00000000000..0952ae0fd4b --- /dev/null +++ b/apps/www/registry/default/block/sidebar-13/components/settings-dialog.tsx @@ -0,0 +1,123 @@ +"use client" + +import * as React from "react" +import { + Bell, + Check, + Globe, + Home, + Keyboard, + Link, + Lock, + Menu, + MessageCircle, + Paintbrush, + Settings, + Video, +} from "lucide-react" + +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Button } from "@/registry/default/ui/button" +import { + Dialog, + DialogContent, + DialogTrigger, +} from "@/registry/default/ui/dialog" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/default/ui/sidebar" + +const data = { + nav: [ + { name: "Notifications", icon: Bell }, + { name: "Navigation", icon: Menu }, + { name: "Home", icon: Home }, + { name: "Appearance", icon: Paintbrush }, + { name: "Messages & media", icon: MessageCircle }, + { name: "Language & region", icon: Globe }, + { name: "Accessibility", icon: Keyboard }, + { name: "Mark as read", icon: Check }, + { name: "Audio & video", icon: Video }, + { name: "Connected accounts", icon: Link }, + { name: "Privacy & visibility", icon: Lock }, + { name: "Advanced", icon: Settings }, + ], +} + +export function SettingsDialog() { + const [open, setOpen] = React.useState(true) + + return ( + + + + + + + + + + + + {data.nav.map((item) => ( + + + + + {item.name} + + + + ))} + + + + + +
+
+
+ + + + Settings + + + + Messages & media + + + +
+
+
+ {Array.from({ length: 10 }).map((_, i) => ( +
+ ))} +
+
+ + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-13/page.tsx b/apps/www/registry/default/block/sidebar-13/page.tsx new file mode 100644 index 00000000000..f64dd476801 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-13/page.tsx @@ -0,0 +1,13 @@ +import { SettingsDialog } from "@/registry/default/block/sidebar-13/components/settings-dialog" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar in a dialog." + +export default function Page() { + return ( +
+ +
+ ) +} diff --git a/apps/www/registry/default/block/sidebar-14/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-14/components/app-sidebar.tsx new file mode 100644 index 00000000000..dbb53de8615 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-14/components/app-sidebar.tsx @@ -0,0 +1,197 @@ +import * as React from "react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + Table of Contents + + + {data.navMain.map((item) => ( + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + ) : null} + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-14/page.tsx b/apps/www/registry/default/block/sidebar-14/page.tsx new file mode 100644 index 00000000000..15caabb0e8a --- /dev/null +++ b/apps/www/registry/default/block/sidebar-14/page.tsx @@ -0,0 +1,52 @@ +import { AppSidebar } from "@/registry/default/block/sidebar-14/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar on the right." + +export default function Page() { + return ( + + +
+ + + + + Building Your Application + + + + + Data Fetching + + + + +
+
+
+
+
+
+
+
+
+ + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/calendars.tsx b/apps/www/registry/default/block/sidebar-15/components/calendars.tsx new file mode 100644 index 00000000000..460a722a8e5 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/calendars.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import { Check, ChevronRight } from "lucide-react" + +import { Checkbox } from "@/registry/default/ui/checkbox" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarSeparator, +} from "@/registry/default/ui/sidebar" + +export function Calendars({ + calendars, +}: { + calendars: { + name: string + items: string[] + }[] +}) { + return ( + <> + {calendars.map((calendar, index) => ( + + + + + + {calendar.name}{" "} + + + + + + + {calendar.items.map((item, index) => ( + + +
+ +
+ {item} + + + ))} + + + + + + + + ))} + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/date-picker.tsx b/apps/www/registry/default/block/sidebar-15/components/date-picker.tsx new file mode 100644 index 00000000000..5e2b6c7f056 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/date-picker.tsx @@ -0,0 +1,15 @@ +import { Calendar } from "@/registry/default/ui/calendar" +import { + SidebarGroup, + SidebarGroupContent, +} from "@/registry/default/ui/sidebar" + +export function DatePicker() { + return ( + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-favorites.tsx b/apps/www/registry/default/block/sidebar-15/components/nav-favorites.tsx new file mode 100644 index 00000000000..6cdd8545398 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/nav-favorites.tsx @@ -0,0 +1,94 @@ +"use client" + +import { + ArrowUpRight, + Link, + MoreHorizontal, + StarOff, + Trash2, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavFavorites({ + favorites, +}: { + favorites: { + name: string + url: string + emoji: string + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Favorites + + {favorites.map((item) => ( + + + + {item.emoji} + {item.name} + + + + + + + More + + + + + + Remove from Favorites + + + + + Copy Link + + + + Open in New Tab + + + + + Delete + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-15/components/nav-main.tsx new file mode 100644 index 00000000000..062803adb9b --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/nav-main.tsx @@ -0,0 +1,35 @@ +"use client" + +import { type LucideIcon } from "lucide-react" + +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + }[] +}) { + return ( + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-secondary.tsx b/apps/www/registry/default/block/sidebar-15/components/nav-secondary.tsx new file mode 100644 index 00000000000..e215151694d --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/nav-secondary.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + badge?: React.ReactNode + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + {item.badge && {item.badge}} + + ))} + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-user.tsx b/apps/www/registry/default/block/sidebar-15/components/nav-user.tsx new file mode 100644 index 00000000000..a0b0dcf2dbd --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/default/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-workspaces.tsx b/apps/www/registry/default/block/sidebar-15/components/nav-workspaces.tsx new file mode 100644 index 00000000000..74883dadeb6 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/nav-workspaces.tsx @@ -0,0 +1,85 @@ +import { ChevronRight, MoreHorizontal, Plus } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/default/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/default/ui/sidebar" + +export function NavWorkspaces({ + workspaces, +}: { + workspaces: { + name: string + emoji: React.ReactNode + pages: { + name: string + emoji: React.ReactNode + }[] + }[] +}) { + return ( + + Workspaces + + + {workspaces.map((workspace) => ( + + + + + {workspace.emoji} + {workspace.name} + + + + + + + + + + + + + {workspace.pages.map((page) => ( + + + + {page.emoji} + {page.name} + + + + ))} + + + + + ))} + + + + More + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/default/block/sidebar-15/components/sidebar-left.tsx new file mode 100644 index 00000000000..f61eb945985 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/sidebar-left.tsx @@ -0,0 +1,278 @@ +"use client" + +import * as React from "react" +import { + AudioWaveform, + Blocks, + Calendar, + Command, + Home, + Inbox, + MessageCircleQuestion, + Search, + Settings2, + Sparkles, + Trash2, +} from "lucide-react" + +import { NavFavorites } from "@/registry/default/block/sidebar-15/components/nav-favorites" +import { NavMain } from "@/registry/default/block/sidebar-15/components/nav-main" +import { NavSecondary } from "@/registry/default/block/sidebar-15/components/nav-secondary" +import { NavWorkspaces } from "@/registry/default/block/sidebar-15/components/nav-workspaces" +import { TeamSwitcher } from "@/registry/default/block/sidebar-15/components/team-switcher" +import { + Sidebar, + SidebarContent, + SidebarHeader, + SidebarRail, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + teams: [ + { + name: "Acme Inc", + logo: Command, + plan: "Enterprise", + }, + { + name: "Acme Corp.", + logo: AudioWaveform, + plan: "Startup", + }, + { + name: "Evil Corp.", + logo: Command, + plan: "Free", + }, + ], + navMain: [ + { + title: "Search", + url: "#", + icon: Search, + }, + { + title: "Ask AI", + url: "#", + icon: Sparkles, + }, + { + title: "Home", + url: "#", + icon: Home, + isActive: true, + }, + { + title: "Inbox", + url: "#", + icon: Inbox, + badge: "10", + }, + ], + navSecondary: [ + { + title: "Calendar", + url: "#", + icon: Calendar, + }, + { + title: "Settings", + url: "#", + icon: Settings2, + }, + { + title: "Templates", + url: "#", + icon: Blocks, + }, + { + title: "Trash", + url: "#", + icon: Trash2, + }, + { + title: "Help", + url: "#", + icon: MessageCircleQuestion, + }, + ], + favorites: [ + { + name: "Project Management & Task Tracking", + url: "#", + emoji: "📊", + }, + { + name: "Family Recipe Collection & Meal Planning", + url: "#", + emoji: "🍳", + }, + { + name: "Fitness Tracker & Workout Routines", + url: "#", + emoji: "💪", + }, + { + name: "Book Notes & Reading List", + url: "#", + emoji: "📚", + }, + { + name: "Sustainable Gardening Tips & Plant Care", + url: "#", + emoji: "🌱", + }, + { + name: "Language Learning Progress & Resources", + url: "#", + emoji: "🗣️", + }, + { + name: "Home Renovation Ideas & Budget Tracker", + url: "#", + emoji: "🏠", + }, + { + name: "Personal Finance & Investment Portfolio", + url: "#", + emoji: "💰", + }, + { + name: "Movie & TV Show Watchlist with Reviews", + url: "#", + emoji: "🎬", + }, + { + name: "Daily Habit Tracker & Goal Setting", + url: "#", + emoji: "✅", + }, + ], + workspaces: [ + { + name: "Personal Life Management", + emoji: "🏠", + pages: [ + { + name: "Daily Journal & Reflection", + url: "#", + emoji: "📔", + }, + { + name: "Health & Wellness Tracker", + url: "#", + emoji: "🍏", + }, + { + name: "Personal Growth & Learning Goals", + url: "#", + emoji: "🌟", + }, + ], + }, + { + name: "Professional Development", + emoji: "💼", + pages: [ + { + name: "Career Objectives & Milestones", + url: "#", + emoji: "🎯", + }, + { + name: "Skill Acquisition & Training Log", + url: "#", + emoji: "🧠", + }, + { + name: "Networking Contacts & Events", + url: "#", + emoji: "🤝", + }, + ], + }, + { + name: "Creative Projects", + emoji: "🎨", + pages: [ + { + name: "Writing Ideas & Story Outlines", + url: "#", + emoji: "✍️", + }, + { + name: "Art & Design Portfolio", + url: "#", + emoji: "🖼️", + }, + { + name: "Music Composition & Practice Log", + url: "#", + emoji: "🎵", + }, + ], + }, + { + name: "Home Management", + emoji: "🏡", + pages: [ + { + name: "Household Budget & Expense Tracking", + url: "#", + emoji: "💰", + }, + { + name: "Home Maintenance Schedule & Tasks", + url: "#", + emoji: "🔧", + }, + { + name: "Family Calendar & Event Planning", + url: "#", + emoji: "📅", + }, + ], + }, + { + name: "Travel & Adventure", + emoji: "🧳", + pages: [ + { + name: "Trip Planning & Itineraries", + url: "#", + emoji: "🗺️", + }, + { + name: "Travel Bucket List & Inspiration", + url: "#", + emoji: "🌎", + }, + { + name: "Travel Journal & Photo Gallery", + url: "#", + emoji: "📸", + }, + ], + }, + ], +} + +export function SidebarLeft({ + ...props +}: React.ComponentProps) { + return ( + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/default/block/sidebar-15/components/sidebar-right.tsx new file mode 100644 index 00000000000..e74c544db52 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/sidebar-right.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import { Plus } from "lucide-react" + +import { Calendars } from "@/registry/default/block/sidebar-15/components/calendars" +import { DatePicker } from "@/registry/default/block/sidebar-15/components/date-picker" +import { NavUser } from "@/registry/default/block/sidebar-15/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, + SidebarSeparator, +} from "@/registry/default/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + calendars: [ + { + name: "My Calendars", + items: ["Personal", "Work", "Family"], + }, + { + name: "Favorites", + items: ["Holidays", "Birthdays"], + }, + { + name: "Other", + items: ["Travel", "Reminders", "Deadlines"], + }, + ], +} + +export function SidebarRight({ + ...props +}: React.ComponentProps) { + return ( + + + + + + + + + + + + + + + New Calendar + + + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/components/team-switcher.tsx b/apps/www/registry/default/block/sidebar-15/components/team-switcher.tsx new file mode 100644 index 00000000000..d95881f57ce --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/components/team-switcher.tsx @@ -0,0 +1,79 @@ +"use client" + +import * as React from "react" +import { ChevronDown, Plus } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/default/ui/sidebar" + +export function TeamSwitcher({ + teams, +}: { + teams: { + name: string + logo: React.ElementType + plan: string + }[] +}) { + const [activeTeam, setActiveTeam] = React.useState(teams[0]) + + return ( + + + + + +
+ +
+ {activeTeam.name} + + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+ +
+ {team.name} + ⌘{index + 1} + + ))} + + +
+ +
+
Add team
+ + + + + + ) +} diff --git a/apps/www/registry/default/block/sidebar-15/page.tsx b/apps/www/registry/default/block/sidebar-15/page.tsx new file mode 100644 index 00000000000..0ba624170c2 --- /dev/null +++ b/apps/www/registry/default/block/sidebar-15/page.tsx @@ -0,0 +1,48 @@ +import { SidebarLeft } from "@/registry/default/block/sidebar-15/components/sidebar-left" +import { SidebarRight } from "@/registry/default/block/sidebar-15/components/sidebar-right" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A left and right sidebar." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Project Management & Task Tracking + + + + +
+
+
+
+
+
+ + + + ) +} diff --git a/apps/www/registry/default/ui/sidebar.tsx b/apps/www/registry/default/ui/sidebar.tsx new file mode 100644 index 00000000000..f8d3340b537 --- /dev/null +++ b/apps/www/registry/default/ui/sidebar.tsx @@ -0,0 +1,724 @@ +"use client" + +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { VariantProps, cva } from "class-variance-authority" +import { PanelLeft } from "lucide-react" + +import { useIsMobile } from "@/registry/default/hooks/use-mobile" +import { cn } from "@/registry/default/lib/utils" +import { Button } from "@/registry/default/ui/button" +import { Input } from "@/registry/default/ui/input" +import { Separator } from "@/registry/default/ui/separator" +import { Sheet, SheetContent } from "@/registry/default/ui/sheet" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/registry/default/ui/tooltip" + +const SIDEBAR_COOKIE_NAME = "sidebar:state" +const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 +const SIDEBAR_WIDTH = "16rem" +const SIDEBAR_WIDTH_MOBILE = "18rem" +const SIDEBAR_WIDTH_ICON = "3rem" +const SIDEBAR_ANIMATION_DURATION = "200ms" +const SIDEBAR_KEYBOARD_SHORTCUT = "b" + +type SidebarContext = { + state: "expanded" | "collapsed" + open: boolean + setOpen: (open: boolean) => void + openMobile: boolean + setOpenMobile: (open: boolean) => void + isMobile: boolean + toggleSidebar: () => void +} + +const SidebarContext = React.createContext(null) + +function useSidebar() { + const context = React.useContext(SidebarContext) + if (!context) { + throw new Error("useSidebar must be used within a Sidebar.") + } + + return context +} + +const SidebarProvider = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + defaultOpen?: boolean + open?: boolean + setOpen?: (open: boolean) => void + } +>( + ( + { + defaultOpen = true, + open: openProp, + setOpen: setOpenProp, + className, + style, + children, + ...props + }, + ref + ) => { + const isMobile = useIsMobile() + const [openMobile, setOpenMobile] = React.useState(false) + + // This is the internal state of the sidebar. + // We use openProp and setOpenProp for control from outside the component. + const [_open, _setOpen] = React.useState(defaultOpen) + const open = openProp ?? _open + const setOpen = React.useCallback( + (open: boolean) => { + if (setOpenProp) { + return setOpenProp?.(open) + } + + _setOpen(open) + + // This sets the cookie to keep the sidebar state. + document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` + }, + [setOpenProp] + ) + + // Helper to toggle the sidebar. + const toggleSidebar = React.useCallback(() => { + if (isMobile) { + return setOpenMobile(!openMobile) + } + return setOpen(!open) + }, [isMobile, open, setOpen, openMobile, setOpenMobile]) + + // Adds a keyboard shortcut to toggle the sidebar. + const handleKeyDown = React.useCallback( + (event: KeyboardEvent) => { + if ( + event.key === SIDEBAR_KEYBOARD_SHORTCUT && + (event.metaKey || event.ctrlKey) + ) { + event.preventDefault() + toggleSidebar() + } + }, + [toggleSidebar] + ) + React.useEffect(() => { + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [handleKeyDown]) + + // We add a state so that we can do data-state="expanded" or "collapsed". + // This makes it easier to style the sidebar with Tailwind classes. + const state = open ? "expanded" : "collapsed" + + const contextValue = React.useMemo( + () => ({ + state, + open, + setOpen, + isMobile, + openMobile, + setOpenMobile, + toggleSidebar, + }), + [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] + ) + + return ( + + +
+ {children} +
+ + + ) + } +) +SidebarProvider.displayName = "SidebarProvider" + +const Sidebar = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + side?: "left" | "right" + variant?: "sidebar" | "floating" | "inset" + collapsible?: "offcanvas" | "icon" | "none" + } +>( + ( + { + side = "left", + variant = "sidebar", + collapsible = "offcanvas", + className, + children, + ...props + }, + ref + ) => { + const { isMobile, state, openMobile, setOpenMobile } = useSidebar() + + if (collapsible === "none") { + return ( +
+ {children} +
+ ) + } + + if (isMobile) { + return ( + + +
{children}
+ + + ) + } + + return ( +
+ {/* This is what handles the sidebar gap on desktop */} +
+ +
+ ) + } +) +Sidebar.displayName = "Sidebar" + +const SidebarTrigger = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, onClick, ...props }, ref) => { + const { toggleSidebar } = useSidebar() + + return ( + + ) +}) +SidebarTrigger.displayName = "SidebarTrigger" + +const SidebarRail = React.forwardRef< + HTMLButtonElement, + React.ComponentProps<"button"> +>(({ className, ...props }, ref) => { + const { toggleSidebar } = useSidebar() + + return ( + - -
- -
    - {item.items?.map((subItem) => ( -
  • - -
    {subItem.title}
    - -
    • - ))} -
- - - - ))} - - ) -} - -function SidebarSearch({ - results, -}: { - results: { - title: string - teaser: string - url: string - }[] -}) { - const isMobile = useIsMobile() - - if (isMobile) { - return ( - - - -
-
Search
-
- - -
-
- -
-
-
- {results.map((result) => ( - -
{result.title}
-
- {result.teaser} -
- - ))} - - - See all results - -
- - - ) - } - - return ( - - - -
-
Search
-
- - -
-
- -
-
-
- {results.map((result) => ( - -
{result.title}
-
- {result.teaser} -
- - ))} - - - See all results - -
- - - ) -} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx deleted file mode 100644 index 4ddd8a937af..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/components/nav-projects.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import Link from "next/link" -import { MoreHorizontal, PlusSquare, type LucideIcon } from "lucide-react" - -import { cn } from "@/registry/new-york/lib/utils" -import { Button } from "@/registry/new-york/ui/button" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/registry/new-york/ui/dropdown-menu" - -export function NavProjects({ - projects, - className, -}: { - projects: { - name: string - url: string - icon: LucideIcon - }[] -} & React.ComponentProps<"ul">) { - return ( -
    - {projects.map((item) => ( -
  • - - -
    - {item.name} -
    - - - - - - - Share - Rename - - Archive - - -
    • - ))} -
  • - -
    • -
- ) -} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx deleted file mode 100644 index bdf9a84a967..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/components/nav-secondary.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client" - -import Link from "next/link" -import { type LucideIcon } from "lucide-react" - -import { cn } from "@/registry/new-york/lib/utils" - -export function NavSecondary({ - className, - items, -}: { - items: { - title: string - url: string - icon: LucideIcon - items?: { - title: string - url: string - }[] - }[] -} & React.ComponentProps<"ul">) { - if (!items?.length) { - return null - } - - return ( -
    - {items.map((item) => ( -
  • - - -
    - {item.title} -
    - -
    • - ))} -
- ) -} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx deleted file mode 100644 index a321aa0194d..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/components/nav-user.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { - BadgeCheck, - Bell, - ChevronsUpDown, - CreditCard, - LogOut, -} from "lucide-react" - -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/registry/new-york/ui/avatar" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/registry/new-york/ui/dropdown-menu" - -export function NavUser({ - user, -}: { - user: { - name: string - email: string - avatar: string - } -}) { - return ( - - -
- - - CN - -
-
{user.name}
-
-
{user.email}
-
-
- -
- - - -
- - - CN - -
-
{user.name}
-
-
{user.email}
-
-
-
- - - - - - Account - - - - Billing - - - - Notifications - - - - - - Log out - - - - ) -} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/search-form.tsx b/apps/www/registry/new-york/block/sidebar-01/components/search-form.tsx new file mode 100644 index 00000000000..d89c7a3a842 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-01/components/search-form.tsx @@ -0,0 +1,28 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/new-york/ui/label" +import { + SidebarGroup, + SidebarGroupContent, + SidebarInput, +} from "@/registry/new-york/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
+ + + + + + + +
+ ) +} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx b/apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx deleted file mode 100644 index c4672ab6060..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/components/storage-card.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Database } from "lucide-react" - -import { Card, CardContent } from "@/registry/new-york/ui/card" -import { Progress } from "@/registry/new-york/ui/progress" - -export function StorageCard() { - return ( - - -
- -
-
-

Running out of space?

-

79.2 GB / 100 GB used

- -
- - - ) -} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx b/apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx deleted file mode 100644 index 0298377c752..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/components/team-switcher.tsx +++ /dev/null @@ -1,79 +0,0 @@ -"use client" - -import * as React from "react" -import { ChevronsUpDown, Plus } from "lucide-react" - -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuTrigger, -} from "@/registry/new-york/ui/dropdown-menu" - -export function TeamSwitcher({ - teams, -}: { - teams: { - name: string - logo: React.ElementType - plan: string - }[] -}) { - const [activeTeam, setActiveTeam] = React.useState(teams[0]) - - return ( - - -
-
- -
-
- {activeTeam.name} -
- -
- - - - Teams - - {teams.map((team, index) => ( - setActiveTeam(team)} - className="items-start gap-2 px-1.5" - > -
- -
-
-
{team.name}
-
-
{team.plan}
-
-
- - ⌘{index + 1} - - - ))} - - -
- -
-
Add workspace
- - - - ) -} diff --git a/apps/www/registry/new-york/block/sidebar-01/components/version-switcher.tsx b/apps/www/registry/new-york/block/sidebar-01/components/version-switcher.tsx new file mode 100644 index 00000000000..7e523109200 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-01/components/version-switcher.tsx @@ -0,0 +1,64 @@ +"use client" + +import * as React from "react" +import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function VersionSwitcher({ + versions, + defaultVersion, +}: { + versions: string[] + defaultVersion: string +}) { + const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion) + + return ( + + + + + +
+ +
+
+ Documentation + v{selectedVersion} +
+ + + + + {versions.map((version) => ( + setSelectedVersion(version)} + > + v{version}{" "} + {version === selectedVersion && } + + ))} + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx deleted file mode 100644 index 61208293d61..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/hooks/use-sidebar.tsx +++ /dev/null @@ -1,12 +0,0 @@ -"use client" - -import * as React from "react" - -export function useSidebar() { - const [state, setState] = React.useState<"closed" | "open">("open") - - return { - open: state === "open", - onOpenChange: (open: boolean) => setState(open ? "open" : "closed"), - } -} diff --git a/apps/www/registry/new-york/block/sidebar-01/page.tsx b/apps/www/registry/new-york/block/sidebar-01/page.tsx index 3e39cd9948b..40bd16f6b0a 100644 --- a/apps/www/registry/new-york/block/sidebar-01/page.tsx +++ b/apps/www/registry/new-york/block/sidebar-01/page.tsx @@ -1,25 +1,54 @@ import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar" import { - SidebarLayout, + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, SidebarTrigger, -} from "@/registry/new-york/block/sidebar-01/ui/sidebar" +} from "@/registry/new-york/ui/sidebar" -export const iframeHeight = "870px" +export const iframeHeight = "800px" -export const containerClassName = "w-full h-full" +export const teaser = "A simple sidebar with navigation grouped by section." -export default async function Page() { - const { cookies } = await import("next/headers") +export default function Page() { return ( - + -
-
- + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
-
- + + ) } diff --git a/apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx b/apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx deleted file mode 100644 index 37ef332e2a7..00000000000 --- a/apps/www/registry/new-york/block/sidebar-01/ui/sidebar.tsx +++ /dev/null @@ -1,204 +0,0 @@ -"use client" - -import * as React from "react" -import { PanelLeft } from "lucide-react" - -import { useIsMobile } from "@/registry/new-york/hooks/use-mobile" -import { cn } from "@/registry/new-york/lib/utils" -import { Button } from "@/registry/new-york/ui/button" -import { Sheet, SheetContent } from "@/registry/new-york/ui/sheet" - -export const SIDEBAR_STATE_COOKIE = "sidebar:state" - -type SidebarContext = { - state: "open" | "closed" - open: boolean - onOpenChange: (open: boolean) => void -} - -const SidebarContext = React.createContext({ - state: "open", - open: true, - onOpenChange: () => {}, -}) - -function useSidebar() { - return React.useContext(SidebarContext) -} - -const SidebarLayout = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> & { - defaultOpen?: boolean - } ->(({ defaultOpen, className, ...props }, ref) => { - const [open, setOpen] = React.useState(defaultOpen ?? true) - - const onOpenChange = React.useCallback((open: boolean) => { - setOpen(open) - document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${ - 60 * 60 * 24 * 7 - }` - }, []) - - const state = open ? "open" : "closed" - - return ( - -
- - ) -}) -SidebarLayout.displayName = "SidebarLayout" - -const SidebarTrigger = React.forwardRef< - HTMLButtonElement, - React.ComponentProps<"button"> ->(({ className, ...props }, ref) => { - const { open, onOpenChange } = useSidebar() - - return ( - - ) -}) -SidebarTrigger.displayName = "SidebarTrigger" - -const Sidebar = React.forwardRef>( - ({ className, children }, ref) => { - const isMobile = useIsMobile() - const { open, onOpenChange } = useSidebar() - - const sidebar = ( -
- {children} -
- ) - - if (isMobile) { - return ( - - - {sidebar} - - - ) - } - - return ( - - ) - } -) -Sidebar.displayName = "Sidebar" - -const SidebarHeader = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarHeader.displayName = "SidebarHeader" - -const SidebarFooter = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarFooter.displayName = "SidebarFooter" - -const SidebarContent = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarContent.displayName = "SidebarContent" - -const SidebarItem = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarItem.displayName = "SidebarItem" - -const SidebarLabel = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> ->(({ className, ...props }, ref) => { - return ( -
- ) -}) -SidebarLabel.displayName = "SidebarLabel" - -export { - Sidebar, - SidebarContent, - SidebarFooter, - SidebarHeader, - SidebarItem, - SidebarLabel, - SidebarLayout, - SidebarTrigger, - useSidebar, -} diff --git a/apps/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx new file mode 100644 index 00000000000..820bfa61a72 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx @@ -0,0 +1,215 @@ +import * as React from "react" +import { ChevronRight } from "lucide-react" + +import { SearchForm } from "@/registry/new-york/block/sidebar-02/components/search-form" +import { VersionSwitcher } from "@/registry/new-york/block/sidebar-02/components/version-switcher" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"], + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + {/* We create a collapsible SidebarGroup for each parent. */} + {data.navMain.map((item) => ( + + + + + {item.title}{" "} + + + + + + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + + + + + ))} + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-02/components/search-form.tsx b/apps/www/registry/new-york/block/sidebar-02/components/search-form.tsx new file mode 100644 index 00000000000..d89c7a3a842 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-02/components/search-form.tsx @@ -0,0 +1,28 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/new-york/ui/label" +import { + SidebarGroup, + SidebarGroupContent, + SidebarInput, +} from "@/registry/new-york/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
+ + + + + + + +
+ ) +} diff --git a/apps/www/registry/new-york/block/sidebar-02/components/version-switcher.tsx b/apps/www/registry/new-york/block/sidebar-02/components/version-switcher.tsx new file mode 100644 index 00000000000..7e523109200 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-02/components/version-switcher.tsx @@ -0,0 +1,64 @@ +"use client" + +import * as React from "react" +import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function VersionSwitcher({ + versions, + defaultVersion, +}: { + versions: string[] + defaultVersion: string +}) { + const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion) + + return ( + + + + + +
+ +
+
+ Documentation + v{selectedVersion} +
+ + + + + {versions.map((version) => ( + setSelectedVersion(version)} + > + v{version}{" "} + {version === selectedVersion && } + + ))} + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-02/page.tsx b/apps/www/registry/new-york/block/sidebar-02/page.tsx new file mode 100644 index 00000000000..7d26848bcfd --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-02/page.tsx @@ -0,0 +1,54 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-02/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with collapsible sections." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+ {Array.from({ length: 24 }).map((_, index) => ( +
+ ))} +
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-03/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-03/components/app-sidebar.tsx new file mode 100644 index 00000000000..804f7682157 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-03/components/app-sidebar.tsx @@ -0,0 +1,208 @@ +import * as React from "react" +import { GalleryVerticalEnd } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + {data.navMain.map((item) => ( + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + ) : null} + + ))} + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-03/page.tsx b/apps/www/registry/new-york/block/sidebar-03/page.tsx new file mode 100644 index 00000000000..ef8d7fdefd2 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-03/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-03/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with submenus." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-04/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-04/components/app-sidebar.tsx new file mode 100644 index 00000000000..f2dc8498b6d --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-04/components/app-sidebar.tsx @@ -0,0 +1,206 @@ +import * as React from "react" +import { GalleryVerticalEnd } from "lucide-react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + {data.navMain.map((item) => ( + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + ) : null} + + ))} + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-04/page.tsx b/apps/www/registry/new-york/block/sidebar-04/page.tsx new file mode 100644 index 00000000000..1e6fa569f85 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-04/page.tsx @@ -0,0 +1,60 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-04/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A floating sidebar with submenus." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx new file mode 100644 index 00000000000..3ff44d7d4f9 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx @@ -0,0 +1,228 @@ +import * as React from "react" +import { GalleryVerticalEnd, Minus, Plus } from "lucide-react" + +import { SearchForm } from "@/registry/new-york/block/sidebar-05/components/search-form" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + + {data.navMain.map((item, index) => ( + + + + + {item.title}{" "} + + + + + {item.items?.length ? ( + + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + + ) : null} + + + ))} + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-05/components/search-form.tsx b/apps/www/registry/new-york/block/sidebar-05/components/search-form.tsx new file mode 100644 index 00000000000..d89c7a3a842 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-05/components/search-form.tsx @@ -0,0 +1,28 @@ +import { Search } from "lucide-react" + +import { Label } from "@/registry/new-york/ui/label" +import { + SidebarGroup, + SidebarGroupContent, + SidebarInput, +} from "@/registry/new-york/ui/sidebar" + +export function SearchForm({ ...props }: React.ComponentProps<"form">) { + return ( +
+ + + + + + + +
+ ) +} diff --git a/apps/www/registry/new-york/block/sidebar-05/page.tsx b/apps/www/registry/new-york/block/sidebar-05/page.tsx new file mode 100644 index 00000000000..0facde80147 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-05/page.tsx @@ -0,0 +1,54 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-05/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with collapsible submenus." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-06/components/app-sidebar.tsx new file mode 100644 index 00000000000..868205a18ed --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-06/components/app-sidebar.tsx @@ -0,0 +1,179 @@ +import * as React from "react" +import { GalleryVerticalEnd } from "lucide-react" + +import { NavMain } from "@/registry/new-york/block/sidebar-06/components/nav-main" +import { SidebarOptInForm } from "@/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Documentation + v1.0.0 +
+ + + + + + + + + +
+ +
+ + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-06/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-06/components/nav-main.tsx new file mode 100644 index 00000000000..92031be909c --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-06/components/nav-main.tsx @@ -0,0 +1,65 @@ +"use client" + +import { MoreHorizontal, type LucideIcon } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon?: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + + {items.map((item) => ( + + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + {item.title} + + ))} + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/www/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx new file mode 100644 index 00000000000..a9fbaed9c07 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx @@ -0,0 +1,33 @@ +import { Button } from "@/registry/new-york/ui/button" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york/ui/card" +import { SidebarInput } from "@/registry/new-york/ui/sidebar" + +export function SidebarOptInForm() { + return ( + +
+ + Subscribe to our newsletter + + Opt-in to receive updates and news about the sidebar. + + + + + + +
+ + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-06/page.tsx b/apps/www/registry/new-york/block/sidebar-06/page.tsx new file mode 100644 index 00000000000..ef998ebf0f1 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-06/page.tsx @@ -0,0 +1,54 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-06/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with submenus as dropdowns." + +export default function Page() { + return ( + + + +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-07/components/app-sidebar.tsx new file mode 100644 index 00000000000..31398ab562a --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-07/components/app-sidebar.tsx @@ -0,0 +1,172 @@ +"use client" + +import * as React from "react" +import { + BookOpen, + Bot, + Command, + Frame, + Map, + PieChart, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/registry/new-york/block/sidebar-07/components/nav-main" +import { NavProjects } from "@/registry/new-york/block/sidebar-07/components/nav-projects" +import { NavUser } from "@/registry/new-york/block/sidebar-07/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Acme Inc + Enterprise +
+ + + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-07/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-07/components/nav-main.tsx new file mode 100644 index 00000000000..150a5af1f86 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-07/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon?: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + {item.icon && } + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-07/components/nav-projects.tsx b/apps/www/registry/new-york/block/sidebar-07/components/nav-projects.tsx new file mode 100644 index 00000000000..052042ea959 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-07/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + Forward, + MoreHorizontal, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-07/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-07/components/nav-user.tsx new file mode 100644 index 00000000000..a12cf07ff8f --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-07/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-07/page.tsx b/apps/www/registry/new-york/block/sidebar-07/page.tsx new file mode 100644 index 00000000000..bae427d3940 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-07/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-07/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar that collapses to icons." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-08/components/app-sidebar.tsx new file mode 100644 index 00000000000..e882693a340 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-08/components/app-sidebar.tsx @@ -0,0 +1,185 @@ +"use client" + +import * as React from "react" +import { + BookOpen, + Bot, + Command, + Frame, + LifeBuoy, + Map, + PieChart, + Send, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/registry/new-york/block/sidebar-08/components/nav-main" +import { NavProjects } from "@/registry/new-york/block/sidebar-08/components/nav-projects" +import { NavSecondary } from "@/registry/new-york/block/sidebar-08/components/nav-secondary" +import { NavUser } from "@/registry/new-york/block/sidebar-08/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + +
+ +
+
+ Acme Inc + Enterprise +
+ + + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-08/components/nav-main.tsx new file mode 100644 index 00000000000..34737f61628 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-08/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-projects.tsx b/apps/www/registry/new-york/block/sidebar-08/components/nav-projects.tsx new file mode 100644 index 00000000000..3cd543cbbf0 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-08/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + MoreHorizontal, + Share, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-secondary.tsx b/apps/www/registry/new-york/block/sidebar-08/components/nav-secondary.tsx new file mode 100644 index 00000000000..ea7e8be0f18 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-08/components/nav-secondary.tsx @@ -0,0 +1,40 @@ +import React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-08/components/nav-user.tsx new file mode 100644 index 00000000000..a12cf07ff8f --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-08/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-08/page.tsx b/apps/www/registry/new-york/block/sidebar-08/page.tsx new file mode 100644 index 00000000000..8a433452277 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-08/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-08/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "An inset sidebar with secondary navigation." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx new file mode 100644 index 00000000000..e9b07656553 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx @@ -0,0 +1,262 @@ +"use client" + +import * as React from "react" +import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react" + +import { NavUser } from "@/registry/new-york/block/sidebar-09/components/nav-user" +import { Label } from "@/registry/new-york/ui/label" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarHeader, + SidebarInput, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" +import { Switch } from "@/registry/new-york/ui/switch" + +// This is sample data +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + navMain: [ + { + title: "Inbox", + url: "#", + icon: Inbox, + isActive: true, + }, + { + title: "Drafts", + url: "#", + icon: File, + isActive: false, + }, + { + title: "Sent", + url: "#", + icon: Send, + isActive: false, + }, + { + title: "Junk", + url: "#", + icon: ArchiveX, + isActive: false, + }, + { + title: "Trash", + url: "#", + icon: Trash2, + isActive: false, + }, + ], + mails: [ + { + name: "William Smith", + email: "williamsmith@example.com", + subject: "Meeting Tomorrow", + date: "09:34 AM", + teaser: + "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.", + }, + { + name: "Alice Smith", + email: "alicesmith@example.com", + subject: "Re: Project Update", + date: "Yesterday", + teaser: + "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.", + }, + { + name: "Bob Johnson", + email: "bobjohnson@example.com", + subject: "Weekend Plans", + date: "2 days ago", + teaser: + "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?", + }, + { + name: "Emily Davis", + email: "emilydavis@example.com", + subject: "Re: Question about Budget", + date: "2 days ago", + teaser: + "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?", + }, + { + name: "Michael Wilson", + email: "michaelwilson@example.com", + subject: "Important Announcement", + date: "1 week ago", + teaser: + "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.", + }, + { + name: "Sarah Brown", + email: "sarahbrown@example.com", + subject: "Re: Feedback on Proposal", + date: "1 week ago", + teaser: + "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?", + }, + { + name: "David Lee", + email: "davidlee@example.com", + subject: "New Project Idea", + date: "1 week ago", + teaser: + "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?", + }, + { + name: "Olivia Wilson", + email: "oliviawilson@example.com", + subject: "Vacation Plans", + date: "1 week ago", + teaser: + "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.", + }, + { + name: "James Martin", + email: "jamesmartin@example.com", + subject: "Re: Conference Registration", + date: "1 week ago", + teaser: + "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.", + }, + { + name: "Sophia White", + email: "sophiawhite@example.com", + subject: "Team Dinner", + date: "1 week ago", + teaser: + "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.", + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + // Note: I'm using state to show active item. + // IRL you should use the url/router. + const [activeItem, setActiveItem] = React.useState(data.navMain[0]) + const [mails, setMails] = React.useState(data.mails) + const { setOpen } = useSidebar() + + return ( + + {/* This is the first sidebar */} + {/* We disable collapsible and adjust width to icon. */} + {/* This will make the sidebar appear as icons. */} + + + + + + +
+ +
+
+ Acme Inc + Enterprise +
+ + + + + + + + + + {data.navMain.map((item) => ( + + { + setActiveItem(item) + const mail = data.mails.sort(() => Math.random() - 0.5) + setMails( + mail.slice( + 0, + Math.max(5, Math.floor(Math.random() * 10) + 1) + ) + ) + setOpen(true) + }} + isActive={activeItem.title === item.title} + className="px-2.5 md:px-2" + > + + {item.title} + + + ))} + + + + + + + + + + {/* This is the second sidebar */} + {/* We disable collapsible and let it fill remaining space */} + + +
+
+ {activeItem.title} +
+ +
+ + + + + + {mails.map((mail) => ( + +
+ {mail.name}{" "} + {mail.date} +
+ {mail.subject} + + {mail.teaser} + + + ))} + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-09/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-09/components/nav-main.tsx new file mode 100644 index 00000000000..34737f61628 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-09/components/nav-main.tsx @@ -0,0 +1,78 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-09/components/nav-projects.tsx b/apps/www/registry/new-york/block/sidebar-09/components/nav-projects.tsx new file mode 100644 index 00000000000..3cd543cbbf0 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-09/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + MoreHorizontal, + Share, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-09/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-09/components/nav-user.tsx new file mode 100644 index 00000000000..52e540522f7 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-09/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-09/page.tsx b/apps/www/registry/new-york/block/sidebar-09/page.tsx new file mode 100644 index 00000000000..b85e7d37f53 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-09/page.tsx @@ -0,0 +1,58 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-09/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "Collapsible nested sidebars." + +export default function Page() { + return ( + + + +
+ + + + + + All Inboxes + + + + Inbox + + + +
+
+ {Array.from({ length: 24 }).map((_, index) => ( +
+ ))} +
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-10/components/app-sidebar.tsx new file mode 100644 index 00000000000..d7e53083f6d --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/app-sidebar.tsx @@ -0,0 +1,276 @@ +"use client" + +import * as React from "react" +import { + AudioWaveform, + Blocks, + Calendar, + Command, + Home, + Inbox, + MessageCircleQuestion, + Search, + Settings2, + Sparkles, + Trash2, +} from "lucide-react" + +import { NavFavorites } from "@/registry/new-york/block/sidebar-10/components/nav-favorites" +import { NavMain } from "@/registry/new-york/block/sidebar-10/components/nav-main" +import { NavSecondary } from "@/registry/new-york/block/sidebar-10/components/nav-secondary" +import { NavWorkspaces } from "@/registry/new-york/block/sidebar-10/components/nav-workspaces" +import { TeamSwitcher } from "@/registry/new-york/block/sidebar-10/components/team-switcher" +import { + Sidebar, + SidebarContent, + SidebarHeader, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + teams: [ + { + name: "Acme Inc", + logo: Command, + plan: "Enterprise", + }, + { + name: "Acme Corp.", + logo: AudioWaveform, + plan: "Startup", + }, + { + name: "Evil Corp.", + logo: Command, + plan: "Free", + }, + ], + navMain: [ + { + title: "Search", + url: "#", + icon: Search, + }, + { + title: "Ask AI", + url: "#", + icon: Sparkles, + }, + { + title: "Home", + url: "#", + icon: Home, + isActive: true, + }, + { + title: "Inbox", + url: "#", + icon: Inbox, + badge: "10", + }, + ], + navSecondary: [ + { + title: "Calendar", + url: "#", + icon: Calendar, + }, + { + title: "Settings", + url: "#", + icon: Settings2, + }, + { + title: "Templates", + url: "#", + icon: Blocks, + }, + { + title: "Trash", + url: "#", + icon: Trash2, + }, + { + title: "Help", + url: "#", + icon: MessageCircleQuestion, + }, + ], + favorites: [ + { + name: "Project Management & Task Tracking", + url: "#", + emoji: "📊", + }, + { + name: "Family Recipe Collection & Meal Planning", + url: "#", + emoji: "🍳", + }, + { + name: "Fitness Tracker & Workout Routines", + url: "#", + emoji: "💪", + }, + { + name: "Book Notes & Reading List", + url: "#", + emoji: "📚", + }, + { + name: "Sustainable Gardening Tips & Plant Care", + url: "#", + emoji: "🌱", + }, + { + name: "Language Learning Progress & Resources", + url: "#", + emoji: "🗣️", + }, + { + name: "Home Renovation Ideas & Budget Tracker", + url: "#", + emoji: "🏠", + }, + { + name: "Personal Finance & Investment Portfolio", + url: "#", + emoji: "💰", + }, + { + name: "Movie & TV Show Watchlist with Reviews", + url: "#", + emoji: "🎬", + }, + { + name: "Daily Habit Tracker & Goal Setting", + url: "#", + emoji: "✅", + }, + ], + workspaces: [ + { + name: "Personal Life Management", + emoji: "🏠", + pages: [ + { + name: "Daily Journal & Reflection", + url: "#", + emoji: "📔", + }, + { + name: "Health & Wellness Tracker", + url: "#", + emoji: "🍏", + }, + { + name: "Personal Growth & Learning Goals", + url: "#", + emoji: "🌟", + }, + ], + }, + { + name: "Professional Development", + emoji: "💼", + pages: [ + { + name: "Career Objectives & Milestones", + url: "#", + emoji: "🎯", + }, + { + name: "Skill Acquisition & Training Log", + url: "#", + emoji: "🧠", + }, + { + name: "Networking Contacts & Events", + url: "#", + emoji: "🤝", + }, + ], + }, + { + name: "Creative Projects", + emoji: "🎨", + pages: [ + { + name: "Writing Ideas & Story Outlines", + url: "#", + emoji: "✍️", + }, + { + name: "Art & Design Portfolio", + url: "#", + emoji: "🖼️", + }, + { + name: "Music Composition & Practice Log", + url: "#", + emoji: "🎵", + }, + ], + }, + { + name: "Home Management", + emoji: "🏡", + pages: [ + { + name: "Household Budget & Expense Tracking", + url: "#", + emoji: "💰", + }, + { + name: "Home Maintenance Schedule & Tasks", + url: "#", + emoji: "🔧", + }, + { + name: "Family Calendar & Event Planning", + url: "#", + emoji: "📅", + }, + ], + }, + { + name: "Travel & Adventure", + emoji: "🧳", + pages: [ + { + name: "Trip Planning & Itineraries", + url: "#", + emoji: "🗺️", + }, + { + name: "Travel Bucket List & Inspiration", + url: "#", + emoji: "🌎", + }, + { + name: "Travel Journal & Photo Gallery", + url: "#", + emoji: "📸", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-actions.tsx b/apps/www/registry/new-york/block/sidebar-10/components/nav-actions.tsx new file mode 100644 index 00000000000..6234aa22551 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/nav-actions.tsx @@ -0,0 +1,153 @@ +"use client" + +import * as React from "react" +import { + ArrowDown, + ArrowUp, + Bell, + Copy, + CornerUpLeft, + CornerUpRight, + FileText, + GalleryVerticalEnd, + LineChart, + Link, + MoreHorizontal, + Settings2, + Star, + Trash, + Trash2, +} from "lucide-react" + +import { Button } from "@/registry/new-york/ui/button" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/registry/new-york/ui/popover" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +const data = [ + [ + { + label: "Customize Page", + icon: Settings2, + }, + { + label: "Turn into wiki", + icon: FileText, + }, + ], + [ + { + label: "Copy Link", + icon: Link, + }, + { + label: "Duplicate", + icon: Copy, + }, + { + label: "Move to", + icon: CornerUpRight, + }, + { + label: "Move to Trash", + icon: Trash2, + }, + ], + [ + { + label: "Undo", + icon: CornerUpLeft, + }, + { + label: "View analytics", + icon: LineChart, + }, + { + label: "Version History", + icon: GalleryVerticalEnd, + }, + { + label: "Show delete pages", + icon: Trash, + }, + { + label: "Notifications", + icon: Bell, + }, + ], + [ + { + label: "Import", + icon: ArrowUp, + }, + { + label: "Export", + icon: ArrowDown, + }, + ], +] + +export function NavActions() { + const [isOpen, setIsOpen] = React.useState(false) + + React.useEffect(() => { + setIsOpen(true) + }, []) + + return ( +
+
+ Edit Oct 08 +
+ + + + + + + + + {data.map((group, index) => ( + + + + {group.map((item, index) => ( + + + {item.label} + + + ))} + + + + ))} + + + + +
+ ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-favorites.tsx b/apps/www/registry/new-york/block/sidebar-10/components/nav-favorites.tsx new file mode 100644 index 00000000000..673649069bf --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/nav-favorites.tsx @@ -0,0 +1,94 @@ +"use client" + +import { + ArrowUpRight, + Link, + MoreHorizontal, + StarOff, + Trash2, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavFavorites({ + favorites, +}: { + favorites: { + name: string + url: string + emoji: string + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Favorites + + {favorites.map((item) => ( + + + + {item.emoji} + {item.name} + + + + + + + More + + + + + + Remove from Favorites + + + + + Copy Link + + + + Open in New Tab + + + + + Delete + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-10/components/nav-main.tsx new file mode 100644 index 00000000000..c79844d391c --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/nav-main.tsx @@ -0,0 +1,35 @@ +"use client" + +import { type LucideIcon } from "lucide-react" + +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + }[] +}) { + return ( + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-secondary.tsx b/apps/www/registry/new-york/block/sidebar-10/components/nav-secondary.tsx new file mode 100644 index 00000000000..e72e1afd6b5 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/nav-secondary.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + badge?: React.ReactNode + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + {item.badge && {item.badge}} + + ))} + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-workspaces.tsx b/apps/www/registry/new-york/block/sidebar-10/components/nav-workspaces.tsx new file mode 100644 index 00000000000..d92a40c5c20 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/nav-workspaces.tsx @@ -0,0 +1,85 @@ +import { ChevronRight, MoreHorizontal, Plus } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavWorkspaces({ + workspaces, +}: { + workspaces: { + name: string + emoji: React.ReactNode + pages: { + name: string + emoji: React.ReactNode + }[] + }[] +}) { + return ( + + Workspaces + + + {workspaces.map((workspace) => ( + + + + + {workspace.emoji} + {workspace.name} + + + + + + + + + + + + + {workspace.pages.map((page) => ( + + + + {page.emoji} + {page.name} + + + + ))} + + + + + ))} + + + + More + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/components/team-switcher.tsx b/apps/www/registry/new-york/block/sidebar-10/components/team-switcher.tsx new file mode 100644 index 00000000000..08d3a6f6f37 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/components/team-switcher.tsx @@ -0,0 +1,79 @@ +"use client" + +import * as React from "react" +import { ChevronDown, Plus } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function TeamSwitcher({ + teams, +}: { + teams: { + name: string + logo: React.ElementType + plan: string + }[] +}) { + const [activeTeam, setActiveTeam] = React.useState(teams[0]) + + return ( + + + + + +
+ +
+ {activeTeam.name} + + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+ +
+ {team.name} + ⌘{index + 1} + + ))} + + +
+ +
+
Add team
+ + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-10/page.tsx b/apps/www/registry/new-york/block/sidebar-10/page.tsx new file mode 100644 index 00000000000..7fac1a96041 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-10/page.tsx @@ -0,0 +1,50 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-10/components/app-sidebar" +import { NavActions } from "@/registry/new-york/block/sidebar-10/components/nav-actions" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar in a popover." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Project Management & Task Tracking + + + + +
+
+ +
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-11/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-11/components/app-sidebar.tsx new file mode 100644 index 00000000000..0e19233a564 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-11/components/app-sidebar.tsx @@ -0,0 +1,141 @@ +import * as React from "react" +import { ChevronRight, File, Folder } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + changes: [ + { + file: "README.md", + state: "M", + }, + { + file: "api/hello/route.ts", + state: "U", + }, + { + file: "app/layout.tsx", + state: "M", + }, + ], + tree: [ + [ + "app", + [ + "api", + ["hello", ["route.ts"]], + "page.tsx", + "layout.tsx", + ["blog", ["page.tsx"]], + ], + ], + [ + "components", + ["ui", "button.tsx", "card.tsx"], + "header.tsx", + "footer.tsx", + ], + ["lib", ["util.ts"]], + ["public", "favicon.ico", "vercel.svg"], + ".eslintrc.json", + ".gitignore", + "next.config.js", + "tailwind.config.js", + "package.json", + "README.md", + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + Changes + + + {data.changes.map((item, index) => ( + + + + {item.file} + + {item.state} + + ))} + + + + + Files + + + {data.tree.map((item, index) => ( + + ))} + + + + + + + ) +} + +function Tree({ item }: { item: string | any[] }) { + const [name, ...items] = Array.isArray(item) ? item : [item] + + if (!items.length) { + return ( + + + {name} + + ) + } + + return ( + + + + + + + {name} + + + + + {items.map((subItem, index) => ( + + ))} + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-11/page.tsx b/apps/www/registry/new-york/block/sidebar-11/page.tsx new file mode 100644 index 00000000000..ece5dfde2de --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-11/page.tsx @@ -0,0 +1,56 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-11/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with a collapsible file tree." + +export default function Page() { + return ( + + + +
+ + + + + + components + + + + ui + + + + button.tsx + + + +
+
+
+
+
+
+
+
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-12/components/app-sidebar.tsx new file mode 100644 index 00000000000..2276d0930cf --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-12/components/app-sidebar.tsx @@ -0,0 +1,66 @@ +import * as React from "react" +import { Plus } from "lucide-react" + +import { Calendars } from "@/registry/new-york/block/sidebar-12/components/calendars" +import { DatePicker } from "@/registry/new-york/block/sidebar-12/components/date-picker" +import { NavUser } from "@/registry/new-york/block/sidebar-12/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, + SidebarSeparator, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + calendars: [ + { + name: "My Calendars", + items: ["Personal", "Work", "Family"], + }, + { + name: "Favorites", + items: ["Holidays", "Birthdays"], + }, + { + name: "Other", + items: ["Travel", "Reminders", "Deadlines"], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + + + + + + + + + New Calendar + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-12/components/calendars.tsx b/apps/www/registry/new-york/block/sidebar-12/components/calendars.tsx new file mode 100644 index 00000000000..dd0aa7d2068 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-12/components/calendars.tsx @@ -0,0 +1,71 @@ +import * as React from "react" +import { Check, ChevronRight } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarSeparator, +} from "@/registry/new-york/ui/sidebar" + +export function Calendars({ + calendars, +}: { + calendars: { + name: string + items: string[] + }[] +}) { + return ( + <> + {calendars.map((calendar, index) => ( + + + + + + {calendar.name}{" "} + + + + + + + {calendar.items.map((item, index) => ( + + +
+ +
+ {item} + + + ))} + + + + + + + + ))} + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-12/components/date-picker.tsx b/apps/www/registry/new-york/block/sidebar-12/components/date-picker.tsx new file mode 100644 index 00000000000..4db1f78829e --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-12/components/date-picker.tsx @@ -0,0 +1,15 @@ +import { Calendar } from "@/registry/new-york/ui/calendar" +import { + SidebarGroup, + SidebarGroupContent, +} from "@/registry/new-york/ui/sidebar" + +export function DatePicker() { + return ( + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-12/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-12/components/nav-user.tsx new file mode 100644 index 00000000000..a69086501d8 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-12/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-12/page.tsx b/apps/www/registry/new-york/block/sidebar-12/page.tsx new file mode 100644 index 00000000000..daa6fc67095 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-12/page.tsx @@ -0,0 +1,45 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-12/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar with a calendar." + +export default function Page() { + return ( + + + +
+ + + + + + October 2024 + + + +
+
+
+ {Array.from({ length: 20 }).map((_, i) => ( +
+ ))} +
+
+ + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-13/components/settings-dialog.tsx b/apps/www/registry/new-york/block/sidebar-13/components/settings-dialog.tsx new file mode 100644 index 00000000000..474385fdfe7 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-13/components/settings-dialog.tsx @@ -0,0 +1,123 @@ +"use client" + +import * as React from "react" +import { + Bell, + Check, + Globe, + Home, + Keyboard, + Link, + Lock, + Menu, + MessageCircle, + Paintbrush, + Settings, + Video, +} from "lucide-react" + +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Button } from "@/registry/new-york/ui/button" +import { + Dialog, + DialogContent, + DialogTrigger, +} from "@/registry/new-york/ui/dialog" +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "@/registry/new-york/ui/sidebar" + +const data = { + nav: [ + { name: "Notifications", icon: Bell }, + { name: "Navigation", icon: Menu }, + { name: "Home", icon: Home }, + { name: "Appearance", icon: Paintbrush }, + { name: "Messages & media", icon: MessageCircle }, + { name: "Language & region", icon: Globe }, + { name: "Accessibility", icon: Keyboard }, + { name: "Mark as read", icon: Check }, + { name: "Audio & video", icon: Video }, + { name: "Connected accounts", icon: Link }, + { name: "Privacy & visibility", icon: Lock }, + { name: "Advanced", icon: Settings }, + ], +} + +export function SettingsDialog() { + const [open, setOpen] = React.useState(true) + + return ( + + + + + + + + + + + + {data.nav.map((item) => ( + + + + + {item.name} + + + + ))} + + + + + +
+
+
+ + + + Settings + + + + Messages & media + + + +
+
+
+ {Array.from({ length: 10 }).map((_, i) => ( +
+ ))} +
+
+ + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-13/page.tsx b/apps/www/registry/new-york/block/sidebar-13/page.tsx new file mode 100644 index 00000000000..4c19ec43a57 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-13/page.tsx @@ -0,0 +1,13 @@ +import { SettingsDialog } from "@/registry/new-york/block/sidebar-13/components/settings-dialog" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar in a dialog." + +export default function Page() { + return ( +
+ +
+ ) +} diff --git a/apps/www/registry/new-york/block/sidebar-14/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-14/components/app-sidebar.tsx new file mode 100644 index 00000000000..f939fc54329 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-14/components/app-sidebar.tsx @@ -0,0 +1,197 @@ +import * as React from "react" + +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + navMain: [ + { + title: "Getting Started", + url: "#", + items: [ + { + title: "Installation", + url: "#", + }, + { + title: "Project Structure", + url: "#", + }, + ], + }, + { + title: "Building Your Application", + url: "#", + items: [ + { + title: "Routing", + url: "#", + }, + { + title: "Data Fetching", + url: "#", + isActive: true, + }, + { + title: "Rendering", + url: "#", + }, + { + title: "Caching", + url: "#", + }, + { + title: "Styling", + url: "#", + }, + { + title: "Optimizing", + url: "#", + }, + { + title: "Configuring", + url: "#", + }, + { + title: "Testing", + url: "#", + }, + { + title: "Authentication", + url: "#", + }, + { + title: "Deploying", + url: "#", + }, + { + title: "Upgrading", + url: "#", + }, + { + title: "Examples", + url: "#", + }, + ], + }, + { + title: "API Reference", + url: "#", + items: [ + { + title: "Components", + url: "#", + }, + { + title: "File Conventions", + url: "#", + }, + { + title: "Functions", + url: "#", + }, + { + title: "next.config.js Options", + url: "#", + }, + { + title: "CLI", + url: "#", + }, + { + title: "Edge Runtime", + url: "#", + }, + ], + }, + { + title: "Architecture", + url: "#", + items: [ + { + title: "Accessibility", + url: "#", + }, + { + title: "Fast Refresh", + url: "#", + }, + { + title: "Next.js Compiler", + url: "#", + }, + { + title: "Supported Browsers", + url: "#", + }, + { + title: "Turbopack", + url: "#", + }, + ], + }, + { + title: "Community", + url: "#", + items: [ + { + title: "Contribution Guide", + url: "#", + }, + ], + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + Table of Contents + + + {data.navMain.map((item) => ( + + + + {item.title} + + + {item.items?.length ? ( + + {item.items.map((item) => ( + + + {item.title} + + + ))} + + ) : null} + + ))} + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-14/page.tsx b/apps/www/registry/new-york/block/sidebar-14/page.tsx new file mode 100644 index 00000000000..01c14cbe90b --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-14/page.tsx @@ -0,0 +1,52 @@ +import { AppSidebar } from "@/registry/new-york/block/sidebar-14/components/app-sidebar" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A sidebar on the right." + +export default function Page() { + return ( + + +
+ + + + + Building Your Application + + + + + Data Fetching + + + + +
+
+
+
+
+
+
+
+
+ + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/calendars.tsx b/apps/www/registry/new-york/block/sidebar-15/components/calendars.tsx new file mode 100644 index 00000000000..50cfcef26bc --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/calendars.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import { Check, ChevronRight } from "lucide-react" + +import { Checkbox } from "@/registry/new-york/ui/checkbox" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarSeparator, +} from "@/registry/new-york/ui/sidebar" + +export function Calendars({ + calendars, +}: { + calendars: { + name: string + items: string[] + }[] +}) { + return ( + <> + {calendars.map((calendar, index) => ( + + + + + + {calendar.name}{" "} + + + + + + + {calendar.items.map((item, index) => ( + + +
+ +
+ {item} + + + ))} + + + + + + + + ))} + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/date-picker.tsx b/apps/www/registry/new-york/block/sidebar-15/components/date-picker.tsx new file mode 100644 index 00000000000..4db1f78829e --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/date-picker.tsx @@ -0,0 +1,15 @@ +import { Calendar } from "@/registry/new-york/ui/calendar" +import { + SidebarGroup, + SidebarGroupContent, +} from "@/registry/new-york/ui/sidebar" + +export function DatePicker() { + return ( + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-favorites.tsx b/apps/www/registry/new-york/block/sidebar-15/components/nav-favorites.tsx new file mode 100644 index 00000000000..673649069bf --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/nav-favorites.tsx @@ -0,0 +1,94 @@ +"use client" + +import { + ArrowUpRight, + Link, + MoreHorizontal, + StarOff, + Trash2, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavFavorites({ + favorites, +}: { + favorites: { + name: string + url: string + emoji: string + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Favorites + + {favorites.map((item) => ( + + + + {item.emoji} + {item.name} + + + + + + + More + + + + + + Remove from Favorites + + + + + Copy Link + + + + Open in New Tab + + + + + Delete + + + + + ))} + + + + More + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-main.tsx b/apps/www/registry/new-york/block/sidebar-15/components/nav-main.tsx new file mode 100644 index 00000000000..c79844d391c --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/nav-main.tsx @@ -0,0 +1,35 @@ +"use client" + +import { type LucideIcon } from "lucide-react" + +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + }[] +}) { + return ( + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-secondary.tsx b/apps/www/registry/new-york/block/sidebar-15/components/nav-secondary.tsx new file mode 100644 index 00000000000..e72e1afd6b5 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/nav-secondary.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavSecondary({ + items, + ...props +}: { + items: { + title: string + url: string + icon: LucideIcon + badge?: React.ReactNode + }[] +} & React.ComponentPropsWithoutRef) { + return ( + + + + {items.map((item) => ( + + + + + {item.title} + + + {item.badge && {item.badge}} + + ))} + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-user.tsx b/apps/www/registry/new-york/block/sidebar-15/components/nav-user.tsx new file mode 100644 index 00000000000..a69086501d8 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-workspaces.tsx b/apps/www/registry/new-york/block/sidebar-15/components/nav-workspaces.tsx new file mode 100644 index 00000000000..d92a40c5c20 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/nav-workspaces.tsx @@ -0,0 +1,85 @@ +import { ChevronRight, MoreHorizontal, Plus } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york/ui/collapsible" +import { + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york/ui/sidebar" + +export function NavWorkspaces({ + workspaces, +}: { + workspaces: { + name: string + emoji: React.ReactNode + pages: { + name: string + emoji: React.ReactNode + }[] + }[] +}) { + return ( + + Workspaces + + + {workspaces.map((workspace) => ( + + + + + {workspace.emoji} + {workspace.name} + + + + + + + + + + + + + {workspace.pages.map((page) => ( + + + + {page.emoji} + {page.name} + + + + ))} + + + + + ))} + + + + More + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/new-york/block/sidebar-15/components/sidebar-left.tsx new file mode 100644 index 00000000000..0e17ca0f28b --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/sidebar-left.tsx @@ -0,0 +1,278 @@ +"use client" + +import * as React from "react" +import { + AudioWaveform, + Blocks, + Calendar, + Command, + Home, + Inbox, + MessageCircleQuestion, + Search, + Settings2, + Sparkles, + Trash2, +} from "lucide-react" + +import { NavFavorites } from "@/registry/new-york/block/sidebar-15/components/nav-favorites" +import { NavMain } from "@/registry/new-york/block/sidebar-15/components/nav-main" +import { NavSecondary } from "@/registry/new-york/block/sidebar-15/components/nav-secondary" +import { NavWorkspaces } from "@/registry/new-york/block/sidebar-15/components/nav-workspaces" +import { TeamSwitcher } from "@/registry/new-york/block/sidebar-15/components/team-switcher" +import { + Sidebar, + SidebarContent, + SidebarHeader, + SidebarRail, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + teams: [ + { + name: "Acme Inc", + logo: Command, + plan: "Enterprise", + }, + { + name: "Acme Corp.", + logo: AudioWaveform, + plan: "Startup", + }, + { + name: "Evil Corp.", + logo: Command, + plan: "Free", + }, + ], + navMain: [ + { + title: "Search", + url: "#", + icon: Search, + }, + { + title: "Ask AI", + url: "#", + icon: Sparkles, + }, + { + title: "Home", + url: "#", + icon: Home, + isActive: true, + }, + { + title: "Inbox", + url: "#", + icon: Inbox, + badge: "10", + }, + ], + navSecondary: [ + { + title: "Calendar", + url: "#", + icon: Calendar, + }, + { + title: "Settings", + url: "#", + icon: Settings2, + }, + { + title: "Templates", + url: "#", + icon: Blocks, + }, + { + title: "Trash", + url: "#", + icon: Trash2, + }, + { + title: "Help", + url: "#", + icon: MessageCircleQuestion, + }, + ], + favorites: [ + { + name: "Project Management & Task Tracking", + url: "#", + emoji: "📊", + }, + { + name: "Family Recipe Collection & Meal Planning", + url: "#", + emoji: "🍳", + }, + { + name: "Fitness Tracker & Workout Routines", + url: "#", + emoji: "💪", + }, + { + name: "Book Notes & Reading List", + url: "#", + emoji: "📚", + }, + { + name: "Sustainable Gardening Tips & Plant Care", + url: "#", + emoji: "🌱", + }, + { + name: "Language Learning Progress & Resources", + url: "#", + emoji: "🗣️", + }, + { + name: "Home Renovation Ideas & Budget Tracker", + url: "#", + emoji: "🏠", + }, + { + name: "Personal Finance & Investment Portfolio", + url: "#", + emoji: "💰", + }, + { + name: "Movie & TV Show Watchlist with Reviews", + url: "#", + emoji: "🎬", + }, + { + name: "Daily Habit Tracker & Goal Setting", + url: "#", + emoji: "✅", + }, + ], + workspaces: [ + { + name: "Personal Life Management", + emoji: "🏠", + pages: [ + { + name: "Daily Journal & Reflection", + url: "#", + emoji: "📔", + }, + { + name: "Health & Wellness Tracker", + url: "#", + emoji: "🍏", + }, + { + name: "Personal Growth & Learning Goals", + url: "#", + emoji: "🌟", + }, + ], + }, + { + name: "Professional Development", + emoji: "💼", + pages: [ + { + name: "Career Objectives & Milestones", + url: "#", + emoji: "🎯", + }, + { + name: "Skill Acquisition & Training Log", + url: "#", + emoji: "🧠", + }, + { + name: "Networking Contacts & Events", + url: "#", + emoji: "🤝", + }, + ], + }, + { + name: "Creative Projects", + emoji: "🎨", + pages: [ + { + name: "Writing Ideas & Story Outlines", + url: "#", + emoji: "✍️", + }, + { + name: "Art & Design Portfolio", + url: "#", + emoji: "🖼️", + }, + { + name: "Music Composition & Practice Log", + url: "#", + emoji: "🎵", + }, + ], + }, + { + name: "Home Management", + emoji: "🏡", + pages: [ + { + name: "Household Budget & Expense Tracking", + url: "#", + emoji: "💰", + }, + { + name: "Home Maintenance Schedule & Tasks", + url: "#", + emoji: "🔧", + }, + { + name: "Family Calendar & Event Planning", + url: "#", + emoji: "📅", + }, + ], + }, + { + name: "Travel & Adventure", + emoji: "🧳", + pages: [ + { + name: "Trip Planning & Itineraries", + url: "#", + emoji: "🗺️", + }, + { + name: "Travel Bucket List & Inspiration", + url: "#", + emoji: "🌎", + }, + { + name: "Travel Journal & Photo Gallery", + url: "#", + emoji: "📸", + }, + ], + }, + ], +} + +export function SidebarLeft({ + ...props +}: React.ComponentProps) { + return ( + + + + + + + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/new-york/block/sidebar-15/components/sidebar-right.tsx new file mode 100644 index 00000000000..e0eb053cc79 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/sidebar-right.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import { Plus } from "lucide-react" + +import { Calendars } from "@/registry/new-york/block/sidebar-15/components/calendars" +import { DatePicker } from "@/registry/new-york/block/sidebar-15/components/date-picker" +import { NavUser } from "@/registry/new-york/block/sidebar-15/components/nav-user" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarRail, + SidebarSeparator, +} from "@/registry/new-york/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + calendars: [ + { + name: "My Calendars", + items: ["Personal", "Work", "Family"], + }, + { + name: "Favorites", + items: ["Holidays", "Birthdays"], + }, + { + name: "Other", + items: ["Travel", "Reminders", "Deadlines"], + }, + ], +} + +export function SidebarRight({ + ...props +}: React.ComponentProps) { + return ( + + + + + + + + + + + + + + + New Calendar + + + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/components/team-switcher.tsx b/apps/www/registry/new-york/block/sidebar-15/components/team-switcher.tsx new file mode 100644 index 00000000000..08d3a6f6f37 --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/components/team-switcher.tsx @@ -0,0 +1,79 @@ +"use client" + +import * as React from "react" +import { ChevronDown, Plus } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/registry/new-york/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york/ui/sidebar" + +export function TeamSwitcher({ + teams, +}: { + teams: { + name: string + logo: React.ElementType + plan: string + }[] +}) { + const [activeTeam, setActiveTeam] = React.useState(teams[0]) + + return ( + + + + + +
+ +
+ {activeTeam.name} + + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+ +
+ {team.name} + ⌘{index + 1} + + ))} + + +
+ +
+
Add team
+ + + + + + ) +} diff --git a/apps/www/registry/new-york/block/sidebar-15/page.tsx b/apps/www/registry/new-york/block/sidebar-15/page.tsx new file mode 100644 index 00000000000..762f6734adf --- /dev/null +++ b/apps/www/registry/new-york/block/sidebar-15/page.tsx @@ -0,0 +1,48 @@ +import { SidebarLeft } from "@/registry/new-york/block/sidebar-15/components/sidebar-left" +import { SidebarRight } from "@/registry/new-york/block/sidebar-15/components/sidebar-right" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export const iframeHeight = "800px" + +export const teaser = "A left and right sidebar." + +export default function Page() { + return ( + + + +
+
+ + + + + + + Project Management & Task Tracking + + + + +
+
+
+
+
+
+ + + + ) +} diff --git a/apps/www/registry/new-york/ui/sidebar.tsx b/apps/www/registry/new-york/ui/sidebar.tsx new file mode 100644 index 00000000000..f714c583916 --- /dev/null +++ b/apps/www/registry/new-york/ui/sidebar.tsx @@ -0,0 +1,724 @@ +"use client" + +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { VariantProps, cva } from "class-variance-authority" +import { PanelLeft } from "lucide-react" + +import { useIsMobile } from "@/registry/new-york/hooks/use-mobile" +import { cn } from "@/registry/new-york/lib/utils" +import { Button } from "@/registry/new-york/ui/button" +import { Input } from "@/registry/new-york/ui/input" +import { Separator } from "@/registry/new-york/ui/separator" +import { Sheet, SheetContent } from "@/registry/new-york/ui/sheet" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/registry/new-york/ui/tooltip" + +const SIDEBAR_COOKIE_NAME = "sidebar:state" +const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 +const SIDEBAR_WIDTH = "16rem" +const SIDEBAR_WIDTH_MOBILE = "18rem" +const SIDEBAR_WIDTH_ICON = "3rem" +const SIDEBAR_ANIMATION_DURATION = "200ms" +const SIDEBAR_KEYBOARD_SHORTCUT = "b" + +type SidebarContext = { + state: "expanded" | "collapsed" + open: boolean + setOpen: (open: boolean) => void + openMobile: boolean + setOpenMobile: (open: boolean) => void + isMobile: boolean + toggleSidebar: () => void +} + +const SidebarContext = React.createContext(null) + +function useSidebar() { + const context = React.useContext(SidebarContext) + if (!context) { + throw new Error("useSidebar must be used within a Sidebar.") + } + + return context +} + +const SidebarProvider = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + defaultOpen?: boolean + open?: boolean + setOpen?: (open: boolean) => void + } +>( + ( + { + defaultOpen = true, + open: openProp, + setOpen: setOpenProp, + className, + style, + children, + ...props + }, + ref + ) => { + const isMobile = useIsMobile() + const [openMobile, setOpenMobile] = React.useState(false) + + // This is the internal state of the sidebar. + // We use openProp and setOpenProp for control from outside the component. + const [_open, _setOpen] = React.useState(defaultOpen) + const open = openProp ?? _open + const setOpen = React.useCallback( + (open: boolean) => { + if (setOpenProp) { + return setOpenProp?.(open) + } + + _setOpen(open) + + // This sets the cookie to keep the sidebar state. + document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` + }, + [setOpenProp] + ) + + // Helper to toggle the sidebar. + const toggleSidebar = React.useCallback(() => { + if (isMobile) { + return setOpenMobile(!openMobile) + } + return setOpen(!open) + }, [isMobile, open, setOpen, openMobile, setOpenMobile]) + + // Adds a keyboard shortcut to toggle the sidebar. + const handleKeyDown = React.useCallback( + (event: KeyboardEvent) => { + if ( + event.key === SIDEBAR_KEYBOARD_SHORTCUT && + (event.metaKey || event.ctrlKey) + ) { + event.preventDefault() + toggleSidebar() + } + }, + [toggleSidebar] + ) + React.useEffect(() => { + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [handleKeyDown]) + + // We add a state so that we can do data-state="expanded" or "collapsed". + // This makes it easier to style the sidebar with Tailwind classes. + const state = open ? "expanded" : "collapsed" + + const contextValue = React.useMemo( + () => ({ + state, + open, + setOpen, + isMobile, + openMobile, + setOpenMobile, + toggleSidebar, + }), + [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] + ) + + return ( + + +
+ {children} +
+ + + ) + } +) +SidebarProvider.displayName = "SidebarProvider" + +const Sidebar = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + side?: "left" | "right" + variant?: "sidebar" | "floating" | "inset" + collapsible?: "offcanvas" | "icon" | "none" + } +>( + ( + { + side = "left", + variant = "sidebar", + collapsible = "offcanvas", + className, + children, + ...props + }, + ref + ) => { + const { isMobile, state, openMobile, setOpenMobile } = useSidebar() + + if (collapsible === "none") { + return ( +
+ {children} +
+ ) + } + + if (isMobile) { + return ( + + +
{children}
+ + + ) + } + + return ( +
+ {/* This is what handles the sidebar gap on desktop */} +
+ +
+ ) + } +) +Sidebar.displayName = "Sidebar" + +const SidebarTrigger = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, onClick, ...props }, ref) => { + const { toggleSidebar } = useSidebar() + + return ( + + ) +}) +SidebarTrigger.displayName = "SidebarTrigger" + +const SidebarRail = React.forwardRef< + HTMLButtonElement, + React.ComponentProps<"button"> +>(({ className, ...props }, ref) => { + const { toggleSidebar } = useSidebar() + + return ( + ) } diff --git a/apps/www/registry/default/example/card-demo.tsx b/apps/www/registry/default/example/card-demo.tsx index 136f42ab848..72758a6ae5a 100644 --- a/apps/www/registry/default/example/card-demo.tsx +++ b/apps/www/registry/default/example/card-demo.tsx @@ -70,7 +70,7 @@ export default function CardDemo({ className, ...props }: CardProps) { diff --git a/apps/www/registry/default/example/cards/create-account.tsx b/apps/www/registry/default/example/cards/create-account.tsx index ef7ef5b81ae..d4e9632c0fe 100644 --- a/apps/www/registry/default/example/cards/create-account.tsx +++ b/apps/www/registry/default/example/cards/create-account.tsx @@ -25,11 +25,11 @@ export function CardsCreateAccount() {
diff --git a/apps/www/registry/default/example/combobox-dropdown-menu.tsx b/apps/www/registry/default/example/combobox-dropdown-menu.tsx index de1a35afba8..52ade1b03e7 100644 --- a/apps/www/registry/default/example/combobox-dropdown-menu.tsx +++ b/apps/www/registry/default/example/combobox-dropdown-menu.tsx @@ -58,17 +58,17 @@ export default function ComboboxDropdownMenu() { Actions - + Assign to... - + Set due date... - + Apply label @@ -99,7 +99,7 @@ export default function ComboboxDropdownMenu() { - + Delete ⌘⌫ diff --git a/apps/www/registry/default/example/command-demo.tsx b/apps/www/registry/default/example/command-demo.tsx index 8b8b50c86b1..3dc6f1e4f43 100644 --- a/apps/www/registry/default/example/command-demo.tsx +++ b/apps/www/registry/default/example/command-demo.tsx @@ -26,32 +26,32 @@ export default function CommandDemo() { No results found. - + Calendar - + Search Emoji - + Calculator - + Profile ⌘P - + Billing ⌘B - + Settings ⌘S diff --git a/apps/www/registry/default/example/command-dialog.tsx b/apps/www/registry/default/example/command-dialog.tsx index 64c35c7166e..d952cd79990 100644 --- a/apps/www/registry/default/example/command-dialog.tsx +++ b/apps/www/registry/default/example/command-dialog.tsx @@ -50,32 +50,32 @@ export default function CommandDialogDemo() { No results found. - + Calendar - + Search Emoji - + Calculator - + Profile ⌘P - + Billing ⌘B - + Settings ⌘S diff --git a/apps/www/registry/default/example/date-picker-demo.tsx b/apps/www/registry/default/example/date-picker-demo.tsx index d34cbe67763..7599d9eabe3 100644 --- a/apps/www/registry/default/example/date-picker-demo.tsx +++ b/apps/www/registry/default/example/date-picker-demo.tsx @@ -26,7 +26,7 @@ export default function DatePickerDemo() { !date && "text-muted-foreground" )} > - + {date ? format(date, "PPP") : Pick a date} diff --git a/apps/www/registry/default/example/date-picker-with-presets.tsx b/apps/www/registry/default/example/date-picker-with-presets.tsx index 1e5cd1605a2..ebd3aded98c 100644 --- a/apps/www/registry/default/example/date-picker-with-presets.tsx +++ b/apps/www/registry/default/example/date-picker-with-presets.tsx @@ -33,7 +33,7 @@ export default function DatePickerWithPresets() { !date && "text-muted-foreground" )} > - + {date ? format(date, "PPP") : Pick a date} diff --git a/apps/www/registry/default/example/date-picker-with-range.tsx b/apps/www/registry/default/example/date-picker-with-range.tsx index 4d88bcf0834..fadcd81ebfc 100644 --- a/apps/www/registry/default/example/date-picker-with-range.tsx +++ b/apps/www/registry/default/example/date-picker-with-range.tsx @@ -34,7 +34,7 @@ export default function DatePickerWithRange({ !date && "text-muted-foreground" )} > - + {date?.from ? ( date.to ? ( <> diff --git a/apps/www/registry/default/example/dropdown-menu-demo.tsx b/apps/www/registry/default/example/dropdown-menu-demo.tsx index 79b0895942a..d13ad9c0161 100644 --- a/apps/www/registry/default/example/dropdown-menu-demo.tsx +++ b/apps/www/registry/default/example/dropdown-menu-demo.tsx @@ -42,22 +42,22 @@ export default function DropdownMenuDemo() { - + Profile ⇧⌘P - + Billing ⌘B - + Settings ⌘S - + Keyboard shortcuts ⌘K @@ -65,54 +65,54 @@ export default function DropdownMenuDemo() { - + Team - + Invite users - + Email - + Message - + More... - + New Team ⌘+T - + GitHub - + Support - + API - + Log out ⇧⌘Q diff --git a/apps/www/registry/default/example/toggle-with-text.tsx b/apps/www/registry/default/example/toggle-with-text.tsx index dcca4113851..43467f817cb 100644 --- a/apps/www/registry/default/example/toggle-with-text.tsx +++ b/apps/www/registry/default/example/toggle-with-text.tsx @@ -5,7 +5,7 @@ import { Toggle } from "@/registry/default/ui/toggle" export default function ToggleWithText() { return ( - + Italic ) diff --git a/apps/www/registry/default/hooks/use-mobile.tsx b/apps/www/registry/default/hooks/use-mobile.tsx index f2589b47133..2b0fe1dfef3 100644 --- a/apps/www/registry/default/hooks/use-mobile.tsx +++ b/apps/www/registry/default/hooks/use-mobile.tsx @@ -15,5 +15,5 @@ export function useIsMobile() { return () => mql.removeEventListener("change", onChange) }, []) - return isMobile + return !!isMobile } diff --git a/apps/www/registry/default/ui/breadcrumb.tsx b/apps/www/registry/default/ui/breadcrumb.tsx index 71a5c325cdc..451ebeb195f 100644 --- a/apps/www/registry/default/ui/breadcrumb.tsx +++ b/apps/www/registry/default/ui/breadcrumb.tsx @@ -80,7 +80,7 @@ const BreadcrumbSeparator = ({ \n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n \n \n More\n \n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n", + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<\"nav\"> & {\n separator?: React.ReactNode\n }\n>(({ ...props }, ref) =>