diff --git a/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx deleted file mode 100644 index 82c062832f..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx +++ /dev/null @@ -1,183 +0,0 @@ -"use client" - -import * as React from "react" -import { - IconCamera, - IconChartBar, - IconDashboard, - IconDatabase, - IconFileAi, - IconFileDescription, - IconFileWord, - IconFolder, - IconHelp, - IconInnerShadowTop, - IconListDetails, - IconReport, - IconSearch, - IconSettings, - IconUsers, -} from "@tabler/icons-react" - -import { - Sidebar, - SidebarContent, - SidebarFooter, - SidebarHeader, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, -} from "@/registry/new-york-v4/ui/sidebar" -// import { NavClouds } from "@/app/(examples)/dashboard-02/components/nav-clouds" -import { NavDocuments } from "@/app/(examples)/dashboard-02/components/nav-documents" -import { NavMain } from "@/app/(examples)/dashboard-02/components/nav-main" -import { NavSecondary } from "@/app/(examples)/dashboard-02/components/nav-secondary" -import { NavUser } from "@/app/(examples)/dashboard-02/components/nav-user" - -const data = { - user: { - name: "shadcn", - email: "m@example.com", - avatar: "/avatars/shadcn.jpg", - }, - navMain: [ - { - title: "Dashboard", - url: "#", - icon: IconDashboard, - }, - { - title: "Lifecycle", - url: "#", - icon: IconListDetails, - }, - { - title: "Analytics", - url: "#", - icon: IconChartBar, - }, - { - title: "Projects", - url: "#", - icon: IconFolder, - }, - { - title: "Team", - url: "#", - icon: IconUsers, - }, - ], - navClouds: [ - { - title: "Capture", - icon: IconCamera, - isActive: true, - url: "#", - items: [ - { - title: "Active Proposals", - url: "#", - }, - { - title: "Archived", - url: "#", - }, - ], - }, - { - title: "Proposal", - icon: IconFileDescription, - url: "#", - items: [ - { - title: "Active Proposals", - url: "#", - }, - { - title: "Archived", - url: "#", - }, - ], - }, - { - title: "Prompts", - icon: IconFileAi, - url: "#", - items: [ - { - title: "Active Proposals", - url: "#", - }, - { - title: "Archived", - url: "#", - }, - ], - }, - ], - navSecondary: [ - { - title: "Settings", - url: "#", - icon: IconSettings, - }, - { - title: "Get Help", - url: "#", - icon: IconHelp, - }, - { - title: "Search", - url: "#", - icon: IconSearch, - }, - ], - documents: [ - { - name: "Data Library", - url: "#", - icon: IconDatabase, - }, - { - name: "Reports", - url: "#", - icon: IconReport, - }, - { - name: "Word Assistant", - url: "#", - icon: IconFileWord, - }, - ], -} - -export function AppSidebar({ ...props }: React.ComponentProps) { - return ( - - - - - - - - Acme Inc. - - - - - - - - {/* */} - - - - - - - - ) -} diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard-02/components/nav-main.tsx deleted file mode 100644 index dc2e6243f3..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/components/nav-main.tsx +++ /dev/null @@ -1,56 +0,0 @@ -"use client" - -import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react" - -import { Button } from "@/registry/new-york-v4/ui/button" -import { - SidebarGroup, - SidebarGroupContent, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, -} from "@/registry/new-york-v4/ui/sidebar" - -export function NavMain({ - items, -}: { - items: { - title: string - url: string - icon?: Icon - }[] -}) { - return ( - - - - - - - Quick Create - - - - - - {items.map((item) => ( - - {item.icon && } - {item.title} - - ))} - - - - ) -} diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard-02/components/nav-secondary.tsx deleted file mode 100644 index 3cc90ef83a..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/components/nav-secondary.tsx +++ /dev/null @@ -1,71 +0,0 @@ -"use client" - -import * as React from "react" -import { IconBrightness, type Icon } from "@tabler/icons-react" -import { useTheme } from "next-themes" - -import { - SidebarGroup, - SidebarGroupContent, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, -} from "@/registry/new-york-v4/ui/sidebar" -import { Skeleton } from "@/registry/new-york-v4/ui/skeleton" -import { Switch } from "@/registry/new-york-v4/ui/switch" - -export function NavSecondary({ - items, - ...props -}: { - items: { - title: string - url: string - icon: Icon - }[] -} & React.ComponentPropsWithoutRef) { - const { resolvedTheme, setTheme } = useTheme() - const [mounted, setMounted] = React.useState(false) - - React.useEffect(() => { - setMounted(true) - }, []) - - return ( - - - - {items.map((item) => ( - - - - - {item.title} - - - - ))} - - - - - - - - - ) -} diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx deleted file mode 100644 index 4d63e06cf8..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx +++ /dev/null @@ -1,110 +0,0 @@ -"use client" - -import { - IconCreditCard, - IconDotsVertical, - IconLogout, - IconNotification, - IconUserCircle, -} from "@tabler/icons-react" - -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/registry/new-york-v4/ui/avatar" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/registry/new-york-v4/ui/dropdown-menu" -import { - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - useSidebar, -} from "@/registry/new-york-v4/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} - -
-
- - - - - - Account - - - - Billing - - - - Notifications - - - - - - Log out - - - - - - ) -} diff --git a/apps/v4/app/(examples)/dashboard-02/components/site-header.tsx b/apps/v4/app/(examples)/dashboard-02/components/site-header.tsx deleted file mode 100644 index d209e4afa6..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/components/site-header.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Button } from "@/registry/new-york-v4/ui/button" -import { Separator } from "@/registry/new-york-v4/ui/separator" -import { SidebarTrigger } from "@/registry/new-york-v4/ui/sidebar" -import { ModeToggle } from "@/app/(examples)/dashboard-02/components/mode-toggle" -import { ThemeSelector } from "@/app/(examples)/dashboard-02/components/theme-selector" - -export function SiteHeader() { - return ( -
-
- - -

Documents

-
- - - -
-
-
- ) -} diff --git a/apps/v4/app/(examples)/dashboard-02/layout.tsx b/apps/v4/app/(examples)/dashboard-02/layout.tsx deleted file mode 100644 index f27a7b5db5..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/layout.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { cookies } from "next/headers" - -import { - SidebarInset, - SidebarProvider, -} from "@/registry/new-york-v4/ui/sidebar" -import { AppSidebar } from "@/app/(examples)/dashboard-02/components/app-sidebar" -import { SiteHeader } from "@/app/(examples)/dashboard-02/components/site-header" - -import "./theme.css" - -export default async function DashboardLayout({ - children, -}: { - children: React.ReactNode -}) { - const cookieStore = await cookies() - const defaultOpen = cookieStore.get("sidebar_state")?.value === "true" - - return ( - - - - -
{children}
- - - ) -} diff --git a/apps/v4/app/(examples)/dashboard-02/page.tsx b/apps/v4/app/(examples)/dashboard-02/page.tsx deleted file mode 100644 index ac6f131f66..0000000000 --- a/apps/v4/app/(examples)/dashboard-02/page.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { Metadata } from "next" -import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react" - -import { Badge } from "@/registry/new-york-v4/ui/badge" -import { - Card, - CardAction, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/registry/new-york-v4/ui/card" -import { ChartAreaInteractive } from "@/app/(examples)/dashboard-02/components/chart-area-interactive" -import { DataTable } from "@/app/(examples)/dashboard-02/components/data-table" - -import data from "./data.json" - -export const metadata: Metadata = { - title: "Dashboard", - description: "A dashboard with tabs, table and sidebar.", -} - -export default async function Dashboard02() { - return ( -
-
-
- - - Total Revenue - - $1,250.00 - - - - - +12.5% - - - - -
- Trending up this month -
-
- Visitors for the last 6 months -
- - - - - New Customers - - 1,234 - - - - - -20% - - - - -
- Down 20% this period -
-
- Acquisition needs attention -
- - - - - Active Accounts - - 45,678 - - - - - +12.5% - - - - -
- Strong user retention -
-
- Engagement exceed targets -
- - - - - Growth Rate - - 4.5% - - - - - +4.5% - - - - -
- Steady performance increase{" "} - -
-
- Meets growth projections -
- - -
-
- -
- -
-
- ) -} diff --git a/apps/v4/app/(examples)/dashboard/components/analytics-date-picker.tsx b/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/components/analytics-date-picker.tsx rename to apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx diff --git a/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx new file mode 100644 index 0000000000..cbae5e4c6f --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx @@ -0,0 +1,84 @@ +"use client" + +import * as React from "react" +import { + ChartLineIcon, + FileIcon, + HomeIcon, + LifeBuoy, + Send, + Settings2Icon, + ShoppingBagIcon, + ShoppingCartIcon, + UserIcon, +} from "lucide-react" + +import { Sidebar, SidebarContent } from "@/registry/new-york-v4/ui/sidebar" +import { NavMain } from "@/app/(examples)/dashboard-03/components/nav-main" +import { NavSecondary } from "@/app/(examples)/dashboard-03/components/nav-secondary" + +const data = { + navMain: [ + { + title: "Dashboard", + url: "/dashboard", + icon: HomeIcon, + }, + { + title: "Analytics", + url: "/dashboard/analytics", + icon: ChartLineIcon, + }, + { + title: "Orders", + url: "/dashboard/orders", + icon: ShoppingBagIcon, + }, + { + title: "Products", + url: "/dashboard/products", + icon: ShoppingCartIcon, + }, + { + title: "Invoices", + url: "/dashboard/invoices", + icon: FileIcon, + }, + { + title: "Customers", + url: "/dashboard/customers", + icon: UserIcon, + }, + { + title: "Settings", + url: "/dashboard/settings", + icon: Settings2Icon, + }, + ], + navSecondary: [ + { + title: "Support", + url: "#", + icon: LifeBuoy, + }, + { + title: "Feedback", + url: "#", + icon: Send, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + ) +} diff --git a/apps/v4/app/(examples)/dashboard/components/chart-revenue.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/components/chart-revenue.tsx rename to apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx diff --git a/apps/v4/app/(examples)/dashboard/components/chart-visitors.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/components/chart-visitors.tsx rename to apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx diff --git a/apps/v4/app/(examples)/dashboard-02/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx similarity index 77% rename from apps/v4/app/(examples)/dashboard-02/components/mode-toggle.tsx rename to apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx index 29c689878f..ca63bb877b 100644 --- a/apps/v4/app/(examples)/dashboard-02/components/mode-toggle.tsx +++ b/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { IconBrightness } from "@tabler/icons-react" +import { MoonIcon, SunIcon } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/registry/new-york-v4/ui/button" @@ -20,7 +20,8 @@ export function ModeToggle() { className="group/toggle size-8" onClick={toggleTheme} > - + + Toggle theme ) diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx new file mode 100644 index 0000000000..e445bb29fe --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx @@ -0,0 +1,91 @@ +"use client" + +import { usePathname } from "next/navigation" +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york-v4/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/registry/new-york-v4/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + disabled?: boolean + }[] +}) { + const pathname = usePathname() + + return ( + + Dashboard + + {items.map((item) => ( + + + + + + {item.title} + + + {item.items?.length ? ( + <> + + + + Toggle + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + ) : null} + + + ))} + + + ) +} diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx new file mode 100644 index 0000000000..66924a12dc --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import { type LucideIcon } from "lucide-react" + +import { + SidebarGroup, + SidebarGroupContent, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york-v4/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/v4/app/(examples)/dashboard-03/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx new file mode 100644 index 0000000000..e3004c5948 --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx @@ -0,0 +1,90 @@ +"use client" + +import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles } from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york-v4/ui/avatar" +import { Button } from "@/registry/new-york-v4/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/new-york-v4/ui/dropdown-menu" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + return ( + + + + + + +
+ + + CN + +
+ {user.name} + + {user.email} + +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + ) +} diff --git a/apps/v4/app/(examples)/dashboard/components/products-table.tsx b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/components/products-table.tsx rename to apps/v4/app/(examples)/dashboard-03/components/products-table.tsx diff --git a/apps/v4/app/(examples)/dashboard/components/search-form.tsx b/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/components/search-form.tsx rename to apps/v4/app/(examples)/dashboard-03/components/search-form.tsx diff --git a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx new file mode 100644 index 0000000000..306add90d7 --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx @@ -0,0 +1,103 @@ +"use client" + +import { Fragment, useMemo } from "react" +import { usePathname } from "next/navigation" +import { SidebarIcon } from "lucide-react" + +import { ThemeSelector } from "@/components/theme-selector" +import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-16/components/search-form" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york-v4/ui/breadcrumb" +import { Button } from "@/registry/new-york-v4/ui/button" +import { Separator } from "@/registry/new-york-v4/ui/separator" +import { useSidebar } from "@/registry/new-york-v4/ui/sidebar" +import { ModeToggle } from "@/app/(examples)/dashboard-03/components/mode-toggle" +import { NavUser } from "@/app/(examples)/dashboard-03/components/nav-user" + +export function SiteHeader() { + const { toggleSidebar } = useSidebar() + const pathname = usePathname() + + // Faux breadcrumbs for demo. + const breadcrumbs = useMemo(() => { + return pathname + .split("/") + .filter((path) => path !== "") + .map((path, index, array) => ({ + label: path, + href: `/${array.slice(0, index + 1).join("/")}`, + })) + }, [pathname]) + + return ( +
+
+ + + + + + + Home + + + + {breadcrumbs.map((breadcrumb, index) => + index === breadcrumbs.length - 1 ? ( + + + {breadcrumb.label} + + + ) : ( + + + + {breadcrumb.label} + + + + + ) + )} + + +
+ + + + +
+
+
+ ) +} diff --git a/apps/v4/app/(examples)/dashboard/customers/page.tsx b/apps/v4/app/(examples)/dashboard-03/customers/page.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/customers/page.tsx rename to apps/v4/app/(examples)/dashboard-03/customers/page.tsx diff --git a/apps/v4/app/(examples)/dashboard-03/layout.tsx b/apps/v4/app/(examples)/dashboard-03/layout.tsx new file mode 100644 index 0000000000..0d4eb901de --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/layout.tsx @@ -0,0 +1,31 @@ +import { cookies } from "next/headers" + +import { + SidebarInset, + SidebarProvider, +} from "@/registry/new-york-v4/ui/sidebar" +import { AppSidebar } from "@/app/(examples)/dashboard-03/components/app-sidebar" +import { SiteHeader } from "@/app/(examples)/dashboard-03/components/site-header" + +import "../../themes.css" + +export default async function DashboardLayout({ + children, +}: { + children: React.ReactNode +}) { + const cookieStore = await cookies() + const defaultOpen = cookieStore.get("sidebar_state")?.value === "true" + + return ( +
+ + +
+ + {children} +
+ +
+ ) +} diff --git a/apps/v4/app/(examples)/dashboard-03/page.tsx b/apps/v4/app/(examples)/dashboard-03/page.tsx new file mode 100644 index 0000000000..f42c3c293d --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-03/page.tsx @@ -0,0 +1,206 @@ +import { Metadata } from "next" +import { + DownloadIcon, + FilterIcon, + TrendingDownIcon, + TrendingUpIcon, +} from "lucide-react" + +import { Badge } from "@/registry/new-york-v4/ui/badge" +import { Button } from "@/registry/new-york-v4/ui/button" +import { + Card, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/new-york-v4/ui/card" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/registry/new-york-v4/ui/tabs" +import { AnalyticsDatePicker } from "@/app/(examples)/dashboard-03/components/analytics-date-picker" +import { ChartRevenue } from "@/app/(examples)/dashboard-03/components/chart-revenue" +import { ChartVisitors } from "@/app/(examples)/dashboard-03/components/chart-visitors" +import { ProductsTable } from "@/app/(examples)/dashboard-03/components/products-table" + +export const metadata: Metadata = { + title: "Dashboard", + description: "An example dashboard to test the new components.", +} + +// Load from database. +const products = [ + { + id: "1", + name: "BJÖRKSNÄS Dining Table", + price: 599.99, + stock: 12, + dateAdded: "2023-06-15", + status: "In Stock", + }, + { + id: "2", + name: "POÄNG Armchair", + price: 249.99, + stock: 28, + dateAdded: "2023-07-22", + status: "In Stock", + }, + { + id: "3", + name: "MALM Bed Frame", + price: 399.99, + stock: 15, + dateAdded: "2023-08-05", + status: "In Stock", + }, + { + id: "4", + name: "KALLAX Shelf Unit", + price: 179.99, + stock: 32, + dateAdded: "2023-09-12", + status: "In Stock", + }, + { + id: "5", + name: "STOCKHOLM Rug", + price: 299.99, + stock: 8, + dateAdded: "2023-10-18", + status: "Low Stock", + }, + { + id: "6", + name: "KIVIK Sofa", + price: 899.99, + stock: 6, + dateAdded: "2023-11-02", + status: "Low Stock", + }, + { + id: "7", + name: "LISABO Coffee Table", + price: 149.99, + stock: 22, + dateAdded: "2023-11-29", + status: "In Stock", + }, + { + id: "8", + name: "HEMNES Bookcase", + price: 249.99, + stock: 17, + dateAdded: "2023-12-10", + status: "In Stock", + }, + { + id: "9", + name: "EKEDALEN Dining Chairs (Set of 2)", + price: 199.99, + stock: 14, + dateAdded: "2024-01-05", + status: "In Stock", + }, + { + id: "10", + name: "FRIHETEN Sleeper Sofa", + price: 799.99, + stock: 9, + dateAdded: "2024-01-18", + status: "Low Stock", + }, +] + +export default function DashboardPage() { + return ( +
+ +
+ + Overview + Analytics + Reports + + Exports + + +
+ + + +
+
+ +
+ + + Total Revenue + $1,250.00 in the last 30 days + + + + + +12.5% + + + + + + New Customers + -12 customers from last month + + + + + -20% + + + + + + Active Accounts + +2,345 users from last month + + + + + +12.5% + + + + + + Growth Rate + +12.5% increase per month + + + + + +4.5% + + + +
+
+ + +
+ + + +
+ ) +} diff --git a/apps/v4/app/(examples)/dashboard/settings/page.tsx b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard/settings/page.tsx rename to apps/v4/app/(examples)/dashboard-03/settings/page.tsx diff --git a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx index e05981f030..78fcf65d1d 100644 --- a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx +++ b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx @@ -2,83 +2,182 @@ import * as React from "react" import { - ChartLineIcon, - FileIcon, - HomeIcon, - LifeBuoy, - Send, - Settings2Icon, - ShoppingBagIcon, - ShoppingCartIcon, - UserIcon, -} from "lucide-react" + IconCamera, + IconChartBar, + IconDashboard, + IconDatabase, + IconFileAi, + IconFileDescription, + IconFileWord, + IconFolder, + IconHelp, + IconInnerShadowTop, + IconListDetails, + IconReport, + IconSearch, + IconSettings, + IconUsers, +} from "@tabler/icons-react" -import { Sidebar, SidebarContent } from "@/registry/new-york-v4/ui/sidebar" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/registry/new-york-v4/ui/sidebar" +// import { NavClouds } from "@/app/(examples)/dashboard-02/components/nav-clouds" +import { NavDocuments } from "@/app/(examples)/dashboard/components/nav-documents" import { NavMain } from "@/app/(examples)/dashboard/components/nav-main" import { NavSecondary } from "@/app/(examples)/dashboard/components/nav-secondary" +import { NavUser } from "@/app/(examples)/dashboard/components/nav-user" const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, navMain: [ { title: "Dashboard", - url: "/dashboard", - icon: HomeIcon, + url: "#", + icon: IconDashboard, + }, + { + title: "Lifecycle", + url: "#", + icon: IconListDetails, }, { title: "Analytics", - url: "/dashboard/analytics", - icon: ChartLineIcon, + url: "#", + icon: IconChartBar, }, { - title: "Orders", - url: "/dashboard/orders", - icon: ShoppingBagIcon, + title: "Projects", + url: "#", + icon: IconFolder, }, { - title: "Products", - url: "/dashboard/products", - icon: ShoppingCartIcon, + title: "Team", + url: "#", + icon: IconUsers, + }, + ], + navClouds: [ + { + title: "Capture", + icon: IconCamera, + isActive: true, + url: "#", + items: [ + { + title: "Active Proposals", + url: "#", + }, + { + title: "Archived", + url: "#", + }, + ], }, { - title: "Invoices", - url: "/dashboard/invoices", - icon: FileIcon, + title: "Proposal", + icon: IconFileDescription, + url: "#", + items: [ + { + title: "Active Proposals", + url: "#", + }, + { + title: "Archived", + url: "#", + }, + ], }, { - title: "Customers", - url: "/dashboard/customers", - icon: UserIcon, - }, - { - title: "Settings", - url: "/dashboard/settings", - icon: Settings2Icon, + title: "Prompts", + icon: IconFileAi, + url: "#", + items: [ + { + title: "Active Proposals", + url: "#", + }, + { + title: "Archived", + url: "#", + }, + ], }, ], navSecondary: [ { - title: "Support", + title: "Settings", url: "#", - icon: LifeBuoy, + icon: IconSettings, }, { - title: "Feedback", + title: "Get Help", url: "#", - icon: Send, + icon: IconHelp, + }, + { + title: "Search", + url: "#", + icon: IconSearch, + }, + ], + documents: [ + { + name: "Data Library", + url: "#", + icon: IconDatabase, + }, + { + name: "Reports", + url: "#", + icon: IconReport, + }, + { + name: "Word Assistant", + url: "#", + icon: IconFileWord, }, ], } export function AppSidebar({ ...props }: React.ComponentProps) { return ( - + + + + + + + + Acme Inc. + + + + + + {/* */} + + + + ) } diff --git a/apps/v4/app/(examples)/dashboard-02/components/chart-area-interactive.tsx b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/components/chart-area-interactive.tsx rename to apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx diff --git a/apps/v4/app/(examples)/dashboard-02/components/data-table.tsx b/apps/v4/app/(examples)/dashboard/components/data-table.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/components/data-table.tsx rename to apps/v4/app/(examples)/dashboard/components/data-table.tsx diff --git a/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx index ca63bb877b..29c689878f 100644 --- a/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx +++ b/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { MoonIcon, SunIcon } from "lucide-react" +import { IconBrightness } from "@tabler/icons-react" import { useTheme } from "next-themes" import { Button } from "@/registry/new-york-v4/ui/button" @@ -20,8 +20,7 @@ export function ModeToggle() { className="group/toggle size-8" onClick={toggleTheme} > - - + Toggle theme ) diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-clouds.tsx b/apps/v4/app/(examples)/dashboard/components/nav-clouds.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/components/nav-clouds.tsx rename to apps/v4/app/(examples)/dashboard/components/nav-clouds.tsx diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-documents.tsx b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/components/nav-documents.tsx rename to apps/v4/app/(examples)/dashboard/components/nav-documents.tsx diff --git a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx index e445bb29fe..dc2e6243f3 100644 --- a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx +++ b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx @@ -1,23 +1,14 @@ "use client" -import { usePathname } from "next/navigation" -import { ChevronRight, type LucideIcon } from "lucide-react" +import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react" -import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, -} from "@/registry/new-york-v4/ui/collapsible" +import { Button } from "@/registry/new-york-v4/ui/button" import { SidebarGroup, - SidebarGroupLabel, + SidebarGroupContent, SidebarMenu, - SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, } from "@/registry/new-york-v4/ui/sidebar" export function NavMain({ @@ -26,66 +17,40 @@ export function NavMain({ items: { title: string url: string - icon: LucideIcon - isActive?: boolean - items?: { - title: string - url: string - }[] - disabled?: boolean + icon?: Icon }[] }) { - const pathname = usePathname() - return ( - Dashboard - - {items.map((item) => ( - - - - - - {item.title} - - - {item.items?.length ? ( - <> - - - - Toggle - - - - - {item.items?.map((subItem) => ( - - - - {subItem.title} - - - - ))} - - - - ) : null} - - - ))} - + + + + + + Quick Create + + + + + + {items.map((item) => ( + + {item.icon && } + {item.title} + + ))} + + ) } diff --git a/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx index 66924a12dc..3cc90ef83a 100644 --- a/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx +++ b/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx @@ -1,5 +1,8 @@ +"use client" + import * as React from "react" -import { type LucideIcon } from "lucide-react" +import { IconBrightness, type Icon } from "@tabler/icons-react" +import { useTheme } from "next-themes" import { SidebarGroup, @@ -8,6 +11,8 @@ import { SidebarMenuButton, SidebarMenuItem, } from "@/registry/new-york-v4/ui/sidebar" +import { Skeleton } from "@/registry/new-york-v4/ui/skeleton" +import { Switch } from "@/registry/new-york-v4/ui/switch" export function NavSecondary({ items, @@ -16,16 +21,23 @@ export function NavSecondary({ items: { title: string url: string - icon: LucideIcon + icon: Icon }[] } & React.ComponentPropsWithoutRef) { + const { resolvedTheme, setTheme } = useTheme() + const [mounted, setMounted] = React.useState(false) + + React.useEffect(() => { + setMounted(true) + }, []) + return ( {items.map((item) => ( - + {item.title} @@ -33,6 +45,25 @@ export function NavSecondary({ ))} + + + + + diff --git a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx index e3004c5948..4d63e06cf8 100644 --- a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx +++ b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx @@ -1,13 +1,18 @@ "use client" -import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles } from "lucide-react" +import { + IconCreditCard, + IconDotsVertical, + IconLogout, + IconNotification, + IconUserCircle, +} from "@tabler/icons-react" import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/new-york-v4/ui/avatar" -import { Button } from "@/registry/new-york-v4/ui/button" import { DropdownMenu, DropdownMenuContent, @@ -17,6 +22,12 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york-v4/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/registry/new-york-v4/ui/sidebar" export function NavUser({ user, @@ -27,64 +38,73 @@ export function NavUser({ avatar: string } }) { + const { isMobile } = useSidebar() + return ( - - - - - - -
- - - CN - -
- {user.name} - - {user.email} - -
-
- - - - - - Upgrade to Pro - - - - - - - Account - - - - Billing - - - - Notifications - - - - - - Log out - - - + + + + + + + + CN + +
+ {user.name} + + {user.email} + +
+ + + + + +
+ + + CN + +
+ {user.name} + + {user.email} + +
+
+ + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + ) } diff --git a/apps/v4/app/(examples)/dashboard/components/site-header.tsx b/apps/v4/app/(examples)/dashboard/components/site-header.tsx index 18bde1be28..0796a0aa3a 100644 --- a/apps/v4/app/(examples)/dashboard/components/site-header.tsx +++ b/apps/v4/app/(examples)/dashboard/components/site-header.tsx @@ -1,101 +1,32 @@ -"use client" - -import { Fragment, useMemo } from "react" -import { usePathname } from "next/navigation" -import { SidebarIcon } from "lucide-react" - -import { ThemeSelector } from "@/components/theme-selector" -import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-16/components/search-form" -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbPage, - BreadcrumbSeparator, -} from "@/registry/new-york-v4/ui/breadcrumb" import { Button } from "@/registry/new-york-v4/ui/button" import { Separator } from "@/registry/new-york-v4/ui/separator" -import { useSidebar } from "@/registry/new-york-v4/ui/sidebar" +import { SidebarTrigger } from "@/registry/new-york-v4/ui/sidebar" import { ModeToggle } from "@/app/(examples)/dashboard/components/mode-toggle" -import { NavUser } from "@/app/(examples)/dashboard/components/nav-user" +import { ThemeSelector } from "@/app/(examples)/dashboard/components/theme-selector" export function SiteHeader() { - const { toggleSidebar } = useSidebar() - const pathname = usePathname() - - // Faux breadcrumbs for demo. - const breadcrumbs = useMemo(() => { - return pathname - .split("/") - .filter((path) => path !== "") - .map((path, index, array) => ({ - label: path, - href: `/${array.slice(0, index + 1).join("/")}`, - })) - }, [pathname]) - return ( -
-
- +
+
diff --git a/apps/v4/app/(examples)/dashboard-02/components/theme-selector.tsx b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/components/theme-selector.tsx rename to apps/v4/app/(examples)/dashboard/components/theme-selector.tsx diff --git a/apps/v4/app/(examples)/dashboard-02/data.json b/apps/v4/app/(examples)/dashboard/data.json similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/data.json rename to apps/v4/app/(examples)/dashboard/data.json diff --git a/apps/v4/app/(examples)/dashboard/layout.tsx b/apps/v4/app/(examples)/dashboard/layout.tsx index 082ea10422..14fcb489f6 100644 --- a/apps/v4/app/(examples)/dashboard/layout.tsx +++ b/apps/v4/app/(examples)/dashboard/layout.tsx @@ -7,7 +7,7 @@ import { import { AppSidebar } from "@/app/(examples)/dashboard/components/app-sidebar" import { SiteHeader } from "@/app/(examples)/dashboard/components/site-header" -import "../../themes.css" +import "./theme.css" export default async function DashboardLayout({ children, @@ -18,14 +18,19 @@ export default async function DashboardLayout({ const defaultOpen = cookieStore.get("sidebar_state")?.value === "true" return ( -
- + + + -
- - {children} -
- -
+
{children}
+ + ) } diff --git a/apps/v4/app/(examples)/dashboard/page.tsx b/apps/v4/app/(examples)/dashboard/page.tsx index be505093f5..ab59cb91d3 100644 --- a/apps/v4/app/(examples)/dashboard/page.tsx +++ b/apps/v4/app/(examples)/dashboard/page.tsx @@ -1,206 +1,125 @@ import { Metadata } from "next" -import { - DownloadIcon, - FilterIcon, - TrendingDownIcon, - TrendingUpIcon, -} from "lucide-react" +import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react" import { Badge } from "@/registry/new-york-v4/ui/badge" -import { Button } from "@/registry/new-york-v4/ui/button" import { Card, + CardAction, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/registry/new-york-v4/ui/card" -import { - Tabs, - TabsContent, - TabsList, - TabsTrigger, -} from "@/registry/new-york-v4/ui/tabs" -import { AnalyticsDatePicker } from "@/app/(examples)/dashboard/components/analytics-date-picker" -import { ChartRevenue } from "@/app/(examples)/dashboard/components/chart-revenue" -import { ChartVisitors } from "@/app/(examples)/dashboard/components/chart-visitors" -import { ProductsTable } from "@/app/(examples)/dashboard/components/products-table" +import { ChartAreaInteractive } from "@/app/(examples)/dashboard/components/chart-area-interactive" +import { DataTable } from "@/app/(examples)/dashboard/components/data-table" + +import data from "./data.json" export const metadata: Metadata = { title: "Dashboard", - description: "An example dashboard to test the new components.", + description: "A dashboard with tabs, table and sidebar.", } -// Load from database. -const products = [ - { - id: "1", - name: "BJÖRKSNÄS Dining Table", - price: 599.99, - stock: 12, - dateAdded: "2023-06-15", - status: "In Stock", - }, - { - id: "2", - name: "POÄNG Armchair", - price: 249.99, - stock: 28, - dateAdded: "2023-07-22", - status: "In Stock", - }, - { - id: "3", - name: "MALM Bed Frame", - price: 399.99, - stock: 15, - dateAdded: "2023-08-05", - status: "In Stock", - }, - { - id: "4", - name: "KALLAX Shelf Unit", - price: 179.99, - stock: 32, - dateAdded: "2023-09-12", - status: "In Stock", - }, - { - id: "5", - name: "STOCKHOLM Rug", - price: 299.99, - stock: 8, - dateAdded: "2023-10-18", - status: "Low Stock", - }, - { - id: "6", - name: "KIVIK Sofa", - price: 899.99, - stock: 6, - dateAdded: "2023-11-02", - status: "Low Stock", - }, - { - id: "7", - name: "LISABO Coffee Table", - price: 149.99, - stock: 22, - dateAdded: "2023-11-29", - status: "In Stock", - }, - { - id: "8", - name: "HEMNES Bookcase", - price: 249.99, - stock: 17, - dateAdded: "2023-12-10", - status: "In Stock", - }, - { - id: "9", - name: "EKEDALEN Dining Chairs (Set of 2)", - price: 199.99, - stock: 14, - dateAdded: "2024-01-05", - status: "In Stock", - }, - { - id: "10", - name: "FRIHETEN Sleeper Sofa", - price: 799.99, - stock: 9, - dateAdded: "2024-01-18", - status: "Low Stock", - }, -] - -export default function DashboardPage() { +export default async function Dashboard02() { return ( -
- -
- - Overview - Analytics - Reports - - Exports - - -
- - - -
-
- -
- - - Total Revenue - $1,250.00 in the last 30 days - - +
+
+
+ + + Total Revenue + + $1,250.00 + + - + +12.5% - - - - - New Customers - -12 customers from last month - - + + + +
+ Trending up this month +
+
+ Visitors for the last 6 months +
+ + + + + New Customers + + 1,234 + + - + -20% - - - - - Active Accounts - +2,345 users from last month - - + + + +
+ Down 20% this period +
+
+ Acquisition needs attention +
+ + + + + Active Accounts + + 45,678 + + - + +12.5% - - - - - Growth Rate - +12.5% increase per month - - + + + +
+ Strong user retention +
+
+ Engagement exceed targets +
+ + + + + Growth Rate + + 4.5% + + - + +4.5% - - -
-
- - -
- - - + + + +
+ Steady performance increase{" "} + +
+
+ Meets growth projections +
+ + +
+
+ +
+ +
) } diff --git a/apps/v4/app/(examples)/dashboard-02/theme.css b/apps/v4/app/(examples)/dashboard/theme.css similarity index 100% rename from apps/v4/app/(examples)/dashboard-02/theme.css rename to apps/v4/app/(examples)/dashboard/theme.css diff --git a/apps/v4/app/layout.tsx b/apps/v4/app/layout.tsx index 918310eccc..40a798546d 100644 --- a/apps/v4/app/layout.tsx +++ b/apps/v4/app/layout.tsx @@ -46,7 +46,7 @@ export const metadata: Metadata = { siteName: siteConfig.name, images: [ { - url: siteConfig.ogImage, + url: "https://v4.shadcn.com/opengraph-image.png", width: 1200, height: 630, alt: siteConfig.name, @@ -57,7 +57,7 @@ export const metadata: Metadata = { card: "summary_large_image", title: siteConfig.name, description: siteConfig.description, - images: [siteConfig.ogImage], + images: ["https://v4.shadcn.com/opengraph-image.png"], creator: "@shadcn", }, icons: { diff --git a/apps/v4/app/opengraph-image.png b/apps/v4/app/opengraph-image.png new file mode 100644 index 0000000000..4f7f6fd5ba Binary files /dev/null and b/apps/v4/app/opengraph-image.png differ diff --git a/apps/v4/app/twitter-image.png b/apps/v4/app/twitter-image.png new file mode 100644 index 0000000000..4f7f6fd5ba Binary files /dev/null and b/apps/v4/app/twitter-image.png differ diff --git a/apps/v4/public/opengraph-image.png b/apps/v4/public/opengraph-image.png new file mode 100644 index 0000000000..4f7f6fd5ba Binary files /dev/null and b/apps/v4/public/opengraph-image.png differ diff --git a/apps/v4/public/twitter-image.png b/apps/v4/public/twitter-image.png new file mode 100644 index 0000000000..4f7f6fd5ba Binary files /dev/null and b/apps/v4/public/twitter-image.png differ