diff --git a/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx index 0f242895d0..82c062832f 100644 --- a/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx +++ b/apps/v4/app/(examples)/dashboard-02/components/app-sidebar.tsx @@ -2,16 +2,21 @@ import * as React from "react" import { - IconCloud, + IconCamera, + IconChartBar, IconDashboard, IconDatabase, + IconFileAi, + IconFileDescription, IconFileWord, + IconFolder, IconHelp, IconInnerShadowTop, IconListDetails, IconReport, IconSearch, IconSettings, + IconUsers, } from "@tabler/icons-react" import { @@ -23,7 +28,7 @@ import { SidebarMenuButton, SidebarMenuItem, } from "@/registry/new-york-v4/ui/sidebar" -import { NavClouds } from "@/app/(examples)/dashboard-02/components/nav-clouds" +// 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" @@ -46,13 +51,26 @@ const data = { url: "#", icon: IconListDetails, }, + { + title: "Analytics", + url: "#", + icon: IconChartBar, + }, + { + title: "Projects", + url: "#", + icon: IconFolder, + }, + { + title: "Team", + url: "#", + icon: IconUsers, + }, ], navClouds: [ { title: "Capture", - icon: IconCloud, - iconClassName: - "fill-amber-500 text-amber-500 dark:fill-amber-400 dark:text-amber-400", + icon: IconCamera, isActive: true, url: "#", items: [ @@ -68,9 +86,7 @@ const data = { }, { title: "Proposal", - icon: IconCloud, - iconClassName: - "fill-blue-500 text-blue-500 dark:fill-blue-400 dark:text-blue-400", + icon: IconFileDescription, url: "#", items: [ { @@ -84,10 +100,8 @@ const data = { ], }, { - title: "Contract", - icon: IconCloud, - iconClassName: - "fill-teal-500 text-teal-500 dark:fill-teal-400 dark:text-teal-400", + title: "Prompts", + icon: IconFileAi, url: "#", items: [ { @@ -157,7 +171,7 @@ export function AppSidebar({ ...props }: React.ComponentProps) { - + {/* */} diff --git a/apps/v4/app/(examples)/dashboard-02/components/chart-area-interactive.tsx b/apps/v4/app/(examples)/dashboard-02/components/chart-area-interactive.tsx new file mode 100644 index 0000000000..dab596a813 --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-02/components/chart-area-interactive.tsx @@ -0,0 +1,292 @@ +"use client" + +import * as React from "react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile" +import { + Card, + CardAction, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/new-york-v4/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york-v4/ui/chart" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/new-york-v4/ui/select" +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/new-york-v4/ui/toggle-group" + +export const description = "An interactive area chart" + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +] + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + color: "var(--primary)", + }, + mobile: { + label: "Mobile", + color: "var(--primary)", + }, +} satisfies ChartConfig + +export function ChartAreaInteractive() { + const isMobile = useIsMobile() + const [timeRange, setTimeRange] = React.useState("90d") + + React.useEffect(() => { + if (isMobile) { + setTimeRange("7d") + } + }, [isMobile]) + + const filteredData = chartData.filter((item) => { + const date = new Date(item.date) + const referenceDate = new Date("2024-06-30") + let daysToSubtract = 90 + if (timeRange === "30d") { + daysToSubtract = 30 + } else if (timeRange === "7d") { + daysToSubtract = 7 + } + const startDate = new Date(referenceDate) + startDate.setDate(startDate.getDate() - daysToSubtract) + return date >= startDate + }) + + return ( + + + Total Visitors + + + Total for the last 3 months + + Last 3 months + + + + Last 3 months + Last 30 days + Last 7 days + + + + + + + + + + + + + + + + + + + { + const date = new Date(value) + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }) + }} + indicator="dot" + /> + } + /> + + + + + + + ) +} diff --git a/apps/v4/app/(examples)/dashboard-02/components/data-table.tsx b/apps/v4/app/(examples)/dashboard-02/components/data-table.tsx index 2ee5917462..d30adef8a3 100644 --- a/apps/v4/app/(examples)/dashboard-02/components/data-table.tsx +++ b/apps/v4/app/(examples)/dashboard-02/components/data-table.tsx @@ -256,7 +256,7 @@ const columns: ColumnDef>[] = [ > - + Eddie Lake Jamik Tashpulatov @@ -447,55 +447,57 @@ export function DataTable({
- - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - - {table.getRowModel().rows.map((row) => ( - - ))} - - ) : ( - - + +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + - No results. - - - )} - -
- + {table.getRowModel().rows.map((row) => ( + + ))} + + ) : ( + + + No results. + + + )} + + + +
{table.getFilteredSelectedRowModel().rows.length} of{" "} @@ -606,7 +608,7 @@ function TableCellViewer({ item }: { item: z.infer }) { {item.header} - + {item.header} diff --git a/apps/v4/app/(examples)/dashboard-02/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard-02/components/mode-toggle.tsx new file mode 100644 index 0000000000..29c689878f --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-02/components/mode-toggle.tsx @@ -0,0 +1,27 @@ +"use client" + +import * as React from "react" +import { IconBrightness } from "@tabler/icons-react" +import { useTheme } from "next-themes" + +import { Button } from "@/registry/new-york-v4/ui/button" + +export function ModeToggle() { + const { setTheme, resolvedTheme } = useTheme() + + const toggleTheme = React.useCallback(() => { + setTheme(resolvedTheme === "dark" ? "light" : "dark") + }, [resolvedTheme, setTheme]) + + return ( + + ) +} diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-clouds.tsx b/apps/v4/app/(examples)/dashboard-02/components/nav-clouds.tsx index a361381260..9ccc093792 100644 --- a/apps/v4/app/(examples)/dashboard-02/components/nav-clouds.tsx +++ b/apps/v4/app/(examples)/dashboard-02/components/nav-clouds.tsx @@ -47,7 +47,7 @@ export function NavClouds({ - {item.icon && } + {item.icon && } {item.title} diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-documents.tsx b/apps/v4/app/(examples)/dashboard-02/components/nav-documents.tsx index 4e3b277319..503c59938a 100644 --- a/apps/v4/app/(examples)/dashboard-02/components/nav-documents.tsx +++ b/apps/v4/app/(examples)/dashboard-02/components/nav-documents.tsx @@ -50,7 +50,10 @@ export function NavDocuments({ - + More diff --git a/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx index adca40fd0c..4d63e06cf8 100644 --- a/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx +++ b/apps/v4/app/(examples)/dashboard-02/components/nav-user.tsx @@ -49,7 +49,7 @@ export function NavUser({ size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" > - + CN diff --git a/apps/v4/app/(examples)/dashboard-02/components/site-header.tsx b/apps/v4/app/(examples)/dashboard-02/components/site-header.tsx new file mode 100644 index 0000000000..d209e4afa6 --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-02/components/site-header.tsx @@ -0,0 +1,34 @@ +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/components/theme-selector.tsx b/apps/v4/app/(examples)/dashboard-02/components/theme-selector.tsx new file mode 100644 index 0000000000..51fc9366c2 --- /dev/null +++ b/apps/v4/app/(examples)/dashboard-02/components/theme-selector.tsx @@ -0,0 +1,98 @@ +"use client" + +import { useThemeConfig } from "@/components/active-theme" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectSeparator, + SelectTrigger, + SelectValue, +} from "@/registry/new-york-v4/ui/select" + +const DEFAULT_THEMES = [ + { + name: "Default", + value: "default", + }, + { + name: "Blue", + value: "blue", + }, + { + name: "Green", + value: "green", + }, + { + name: "Amber", + value: "amber", + }, +] + +const SCALED_THEMES = [ + { + name: "Default", + value: "default-scaled", + }, + { + name: "Blue", + value: "blue-scaled", + }, +] + +const MONO_THEMES = [ + { + name: "Mono", + value: "mono-scaled", + }, +] + +export function ThemeSelector() { + const { activeTheme, setActiveTheme } = useThemeConfig() + + return ( +
+ +
+ ) +} diff --git a/apps/v4/app/(examples)/dashboard-02/layout.tsx b/apps/v4/app/(examples)/dashboard-02/layout.tsx index cc3abddc4f..f27a7b5db5 100644 --- a/apps/v4/app/(examples)/dashboard-02/layout.tsx +++ b/apps/v4/app/(examples)/dashboard-02/layout.tsx @@ -1,17 +1,13 @@ import { cookies } from "next/headers" -import { Separator } from "@/registry/new-york-v4/ui/separator" import { SidebarInset, SidebarProvider, - SidebarTrigger, } 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" -import { IconExternalLink } from "@tabler/icons-react" - -import { Button } from "@/registry/new-york-v4/ui/button" export default async function DashboardLayout({ children, @@ -24,7 +20,6 @@ export default async function DashboardLayout({ return ( -
-
- - -

Documents

- -
-
+
{children}
 diff --git a/apps/v4/app/(examples)/dashboard-02/page.tsx b/apps/v4/app/(examples)/dashboard-02/page.tsx index e4c38b2ec2..ac6f131f66 100644 --- a/apps/v4/app/(examples)/dashboard-02/page.tsx +++ b/apps/v4/app/(examples)/dashboard-02/page.tsx @@ -4,11 +4,13 @@ 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" @@ -20,58 +22,102 @@ export const metadata: Metadata = { export default async function Dashboard02() { return ( -
+
-
- +
+ - Total Revenue - $1,250.00 in the last 30 days + Total Revenue + + $1,250.00 + + + + + +12.5% + + - - - - +12.5% - + +
+ Trending up this month +
+
+ Visitors for the last 6 months +
- + - New Customers - -12 customers from last month + New Customers + + 1,234 + + + + + -20% + + - - - - -20% - + +
+ Down 20% this period +
+
+ Acquisition needs attention +
- + - Active Accounts - +2,345 users from last month + Active Accounts + + 45,678 + + + + + +12.5% + + - - - - +12.5% - + +
+ Strong user retention +
+
+ Engagement exceed targets +
- + - Growth Rate - +12.5% increase per month + Growth Rate + + 4.5% + + + + + +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-02/theme.css index 7cb9b2808a..fd549d6677 100644 --- a/apps/v4/app/(examples)/dashboard-02/theme.css +++ b/apps/v4/app/(examples)/dashboard-02/theme.css @@ -1,10 +1,13 @@ -:root, -.theme-custom { +body { + @apply overscroll-none bg-transparent; +} + +:root { --font-sans: var(--font-inter); --header-height: calc(var(--spacing) * 12 + 1px); - --primary: oklch(0.546 0.245 262.881); - --primary-foreground: oklch(0.97 0.014 254.604); +} +.theme-scaled { @media (min-width: 1024px) { --radius: 0.6rem; --text-lg: 1.05rem; @@ -16,8 +19,87 @@ [data-slot="card"] { --spacing: 0.16rem; } + + [data-slot="select-trigger"], + [data-slot="toggle-group-item"] { + --spacing: 0.222222rem; + } } -.dark { - --primary: oklch(0.623 0.214 259.815); +.theme-default, +.theme-default-scaled { + --primary: var(--color-neutral-600); + --primary-foreground: var(--color-neutral-50); + + @variant dark { + --primary: var(--color-neutral-500); + --primary-foreground: var(--color-neutral-50); + } +} + +.theme-blue, +.theme-blue-scaled { + --primary: var(--color-blue-600); + --primary-foreground: var(--color-blue-50); + + @variant dark { + --primary: var(--color-blue-500); + --primary-foreground: var(--color-blue-50); + } +} + +.theme-green, +.theme-green-scaled { + --primary: var(--color-lime-600); + --primary-foreground: var(--color-lime-50); + + @variant dark { + --primary: var(--color-lime-600); + --primary-foreground: var(--color-lime-50); + } +} + +.theme-amber, +.theme-amber-scaled { + --primary: var(--color-amber-600); + --primary-foreground: var(--color-amber-50); + + @variant dark { + --primary: var(--color-amber-500); + --primary-foreground: var(--color-amber-50); + } +} + +.theme-mono, +.theme-mono-scaled { + --font-sans: var(--font-mono); + --primary: var(--color-neutral-600); + --primary-foreground: var(--color-neutral-50); + + @variant dark { + --primary: var(--color-neutral-500); + --primary-foreground: var(--color-neutral-50); + } + + .rounded-xs, + .rounded-sm, + .rounded-md, + .rounded-lg, + .rounded-xl { + @apply !rounded-none; + border-radius: 0; + } + + .shadow-xs, + .shadow-sm, + .shadow-md, + .shadow-lg, + .shadow-xl { + @apply !shadow-none; + } + + [data-slot="toggle-group"], + [data-slot="toggle-group-item"] { + @apply !rounded-none !shadow-none; + } } diff --git a/apps/v4/app/(examples)/dashboard/layout.tsx b/apps/v4/app/(examples)/dashboard/layout.tsx index 6cc4a33160..082ea10422 100644 --- a/apps/v4/app/(examples)/dashboard/layout.tsx +++ b/apps/v4/app/(examples)/dashboard/layout.tsx @@ -7,6 +7,8 @@ import { import { AppSidebar } from "@/app/(examples)/dashboard/components/app-sidebar" import { SiteHeader } from "@/app/(examples)/dashboard/components/site-header" +import "../../themes.css" + export default async function DashboardLayout({ children, }: { diff --git a/apps/v4/app/globals.css b/apps/v4/app/globals.css index e7f6248ae5..baea496d41 100644 --- a/apps/v4/app/globals.css +++ b/apps/v4/app/globals.css @@ -1,11 +1,9 @@ @import "tailwindcss"; -@plugin "tailwindcss-animate"; +@import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); -@import "./themes.css"; - :root { --radius: 0.625rem; --background: oklch(1 0 0); @@ -111,6 +109,26 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + + @keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } } @layer base { diff --git a/apps/v4/app/layout.tsx b/apps/v4/app/layout.tsx index f58cadf1b5..918310eccc 100644 --- a/apps/v4/app/layout.tsx +++ b/apps/v4/app/layout.tsx @@ -79,6 +79,7 @@ export default async function RootLayout({ }>) { const cookieStore = await cookies() const activeThemeValue = cookieStore.get("active_theme")?.value + const isScaled = activeThemeValue?.endsWith("-scaled") return ( @@ -99,6 +100,7 @@ export default async function RootLayout({ className={cn( "bg-background overscroll-none font-sans antialiased", activeThemeValue ? `theme-${activeThemeValue}` : "", + isScaled ? "theme-scaled" : "", fontVariables )} > @@ -107,6 +109,7 @@ export default async function RootLayout({ defaultTheme="system" enableSystem disableTransitionOnChange + enableColorScheme > {children} diff --git a/apps/v4/components/active-theme.tsx b/apps/v4/components/active-theme.tsx index 44ca91ec7b..3933d06ee7 100644 --- a/apps/v4/components/active-theme.tsx +++ b/apps/v4/components/active-theme.tsx @@ -38,12 +38,15 @@ export function ActiveThemeProvider({ useEffect(() => { setThemeCookie(activeTheme) - document.body.classList.forEach((className) => { - if (className.startsWith("theme-")) { + Array.from(document.body.classList) + .filter((className) => className.startsWith("theme-")) + .forEach((className) => { document.body.classList.remove(className) - } - }) + }) document.body.classList.add(`theme-${activeTheme}`) + if (activeTheme.endsWith("-scaled")) { + document.body.classList.add("theme-scaled") + } }, [activeTheme]) return ( diff --git a/apps/v4/components/mode-toggle.tsx b/apps/v4/components/mode-toggle.tsx index 4ccf6dcf4f..0e73dda70e 100644 --- a/apps/v4/components/mode-toggle.tsx +++ b/apps/v4/components/mode-toggle.tsx @@ -4,14 +4,21 @@ import * as React from "react" import { MoonIcon, SunIcon } from "lucide-react" import { useTheme } from "next-themes" +import { META_THEME_COLORS, useMetaColor } from "@/hooks/use-meta-color" import { Button } from "@/registry/new-york-v4/ui/button" export function ModeToggle() { const { setTheme, resolvedTheme } = useTheme() + const { setMetaColor } = useMetaColor() const toggleTheme = React.useCallback(() => { setTheme(resolvedTheme === "dark" ? "light" : "dark") - }, [resolvedTheme, setTheme]) + setMetaColor( + resolvedTheme === "dark" + ? META_THEME_COLORS.light + : META_THEME_COLORS.dark + ) + }, [resolvedTheme, setTheme, setMetaColor]) return (