From 44dd4c2a1ca34e8d8051828bcbccaf528d16b468 Mon Sep 17 00:00:00 2001 From: Usama Tariq Date: Sat, 7 Dec 2024 17:50:45 +0500 Subject: [PATCH] feature(ui): theme provider and theme toggle --- package-lock.json | 10 +++++ package.json | 1 + src/app/layout.tsx | 12 +++++- .../ThemeProvider/ThemeProvider.tsx | 11 +++++ src/components/ThemeProvider/ThemeToggle.tsx | 40 ++++++++++++++++++ src/components/dashboard/header.tsx | 42 ++++++++++++------- 6 files changed, 98 insertions(+), 18 deletions(-) create mode 100644 src/components/ThemeProvider/ThemeProvider.tsx create mode 100644 src/components/ThemeProvider/ThemeToggle.tsx diff --git a/package-lock.json b/package-lock.json index 5b00363..1e44561 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "embla-carousel-react": "^8.5.1", "lucide-react": "^0.462.0", "next": "14.2.16", + "next-themes": "^0.4.4", "react": "^18", "react-day-picker": "^8.10.1", "react-dom": "^18", @@ -5812,6 +5813,15 @@ } } }, + "node_modules/next-themes": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz", + "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index d1829ca..7a82913 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "embla-carousel-react": "^8.5.1", "lucide-react": "^0.462.0", "next": "14.2.16", + "next-themes": "^0.4.4", "react": "^18", "react-day-picker": "^8.10.1", "react-dom": "^18", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 00e6a70..2b6b6ea 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import "./globals.css"; import { ClerkProvider } from '@clerk/nextjs' +import { ThemeProvider } from "../components/ThemeProvider/ThemeProvider"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", @@ -28,11 +29,18 @@ export default function RootLayout({ }>) { return ( - + - {children} + + {children} + diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx new file mode 100644 index 0000000..6a1ffe4 --- /dev/null +++ b/src/components/ThemeProvider/ThemeProvider.tsx @@ -0,0 +1,11 @@ +"use client" + +import * as React from "react" +import { ThemeProvider as NextThemesProvider } from "next-themes" + +export function ThemeProvider({ + children, + ...props +}: React.ComponentProps) { + return {children} +} diff --git a/src/components/ThemeProvider/ThemeToggle.tsx b/src/components/ThemeProvider/ThemeToggle.tsx new file mode 100644 index 0000000..df87e0c --- /dev/null +++ b/src/components/ThemeProvider/ThemeToggle.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/src/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/src/components/ui/dropdown-menu" + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} diff --git a/src/components/dashboard/header.tsx b/src/components/dashboard/header.tsx index f87751f..0c9565f 100644 --- a/src/components/dashboard/header.tsx +++ b/src/components/dashboard/header.tsx @@ -2,26 +2,36 @@ import React from 'react' import { SidebarTrigger } from '../ui/sidebar' import { Separator } from '@radix-ui/react-separator' import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../ui/breadcrumb' +import { ModeToggle } from '../ThemeProvider/ThemeToggle' const Header = () => { return (
-
- - - - - - - Building Your Application - - - - - Data Fetching - - - +
+ +
+ + + + + + + Building Your Application + + + + + Data Fetching + + + + + +
+ + + +
)