diff --git a/package-lock.json b/package-lock.json index 6980f1c..ad1130c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,15 +9,23 @@ "version": "0.1.0", "dependencies": { "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", + "@tanstack/react-table": "^8.15.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", "lucide-react": "^0.367.0", "next": "14.1.4", "next-themes": "^0.3.0", @@ -532,6 +540,36 @@ } } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz", + "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -743,6 +781,37 @@ } } }, + "node_modules/@radix-ui/react-hover-card": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz", + "integrity": "sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-icons": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", @@ -809,6 +878,43 @@ } } }, + "node_modules/@radix-ui/react-popover": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz", + "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", @@ -973,6 +1079,49 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz", + "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-separator": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz", @@ -1014,6 +1163,40 @@ } } }, + "node_modules/@radix-ui/react-toast": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz", + "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-tooltip": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", @@ -1118,6 +1301,23 @@ } } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz", + "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-rect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", @@ -1199,6 +1399,37 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-table": { + "version": "8.15.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.3.tgz", + "integrity": "sha512-aocQ4WpWiAh7R+yxNp+DGQYXeVACh5lv2kk96DjYgFiHDCB0cOFoYMT/pM6eDOzeMXR9AvPoLeumTgq8/0qX+w==", + "dependencies": { + "@tanstack/table-core": "8.15.3" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.15.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.15.3.tgz", + "integrity": "sha512-wOgV0HfEvuMOv8RlqdR9MdNNqq0uyvQtP39QOvGlggHvIObOE4exS+D5LGO8LZ3LUXxId2IlUKcHDHaGujWhUg==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -1940,6 +2171,19 @@ "node": ">=6" } }, + "node_modules/cmdk": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz", + "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==", + "dependencies": { + "@radix-ui/react-dialog": "1.0.5", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -2057,6 +2301,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 2f05f2d..c0fad3e 100644 --- a/package.json +++ b/package.json @@ -10,15 +10,23 @@ }, "dependencies": { "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", + "@tanstack/react-table": "^8.15.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", "lucide-react": "^0.367.0", "next": "14.1.4", "next-themes": "^0.3.0", diff --git a/src/app/(dashboard)/dashboard/users/page.tsx b/src/app/(dashboard)/dashboard/users/page.tsx new file mode 100644 index 0000000..c8b3a30 --- /dev/null +++ b/src/app/(dashboard)/dashboard/users/page.tsx @@ -0,0 +1,24 @@ +import Breadcrumb from '@/components/breadcrumb'; +import ToolsTable from '@/components/users/users-table/tools-table' +import { dummyUsers } from '@/constants/data' +import { User } from '@/types/user' +import React from 'react' + +const breadcrumbItems = [{ title: "Dashboard", link: "#" }, {title: "Users"}]; +const Page = () => { + return ( +
+ + ({ ...tool, suggestions: [] })) as Tool[] + dummyUsers as User[] + } + /> +
+ ) +} + +export default Page + + diff --git a/src/app/globals.css b/src/app/globals.css index 00b08e3..2fd6bac 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -47,6 +47,196 @@ --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } + + .violett { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + --primary: 263.4 70% 50.4%; + --primary-foreground: 210 20% 98%; + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + --ring: 263.4 70% 50.4%; + } + + .greenn { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 15%; + --muted-foreground: 240 5% 64.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 142.4 71.8% 29.2%; + } + + .rosee { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 15%; + --muted-foreground: 240 5% 64.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 346.8 77.2% 49.8%; + } + + .orangee { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 60 9.1% 97.8%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --ring: 20.5 90.2% 48.2%; + } + + .foo { + /* CSS: .bg-gradient { background: var(--gradient) } */ + --gradient: #72c6ef; + + --background: 212 52% 5.52%; + --foreground: 212 8% 98.45%; + + --muted: 212 40% 20.7%; + --muted-foreground: 212 8% 56.9%; + + --popover: 212 49% 8.969999999999999%; + --popover-foreground: 212 8% 98.45%; + + --card: 212 49% 8.969999999999999%; + --card-foreground: 212 8% 98.45%; + + --border: 212 40% 20.7%; + --input: 212 40% 20.7%; + + --primary: 212 80% 69%; + --primary-foreground: 212 8% 6.8999999999999995%; + + --secondary: 212 40% 20.7%; + --secondary-foreground: 212 8% 98.45%; + + --accent: 212 40% 20.7%; + --accent-foreground: 212 8% 98.45%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 212 8% 98.45%; + + --ring: 212 80% 69%; + } + + .foo2 { + /* CSS: .bg-gradient { background: var(--gradient) } */ + --gradient: #00f5a0; + + --background: 169 65% 3.84%; + --foreground: 169 10% 97.4%; + + --muted: 169 50% 14.399999999999999%; + --muted-foreground: 169 10% 54.8%; + + --popover: 169 45% 6.24%; + --popover-foreground: 169 10% 97.4%; + + --card: 169 45% 6.24%; + --card-foreground: 169 10% 97.4%; + + --border: 169 50% 14.399999999999999%; + --input: 169 50% 14.399999999999999%; + + --primary: 169 100% 48%; + --primary-foreground: 169 10% 4.8%; + + --secondary: 169 50% 14.399999999999999%; + --secondary-foreground: 169 10% 97.4%; + + --accent: 169 50% 14.399999999999999%; + --accent-foreground: 169 10% 97.4%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 169 10% 97.4%; + + --ring: 169 100% 48%; + } + + .light-violet { + /* CSS: .bg-gradient { background: var(--gradient) } */ + --gradient: #acb6e5; + + --background: 244 33.800000000000004% 6.32%; + --foreground: 244 5.2% 98.95%; + + --muted: 244 26% 23.700000000000003%; + --muted-foreground: 244 5.2% 57.9%; + + --popover: 244 54.6% 10.27%; + --popover-foreground: 244 5.2% 98.95%; + + --card: 244 54.6% 10.27%; + --card-foreground: 244 5.2% 98.95%; + + --border: 244 26% 23.700000000000003%; + --input: 244 26% 23.700000000000003%; + + --primary: 244 52% 79%; + --primary-foreground: 244 5.2% 7.9%; + + --secondary: 244 26% 23.700000000000003%; + --secondary-foreground: 244 5.2% 98.95%; + + --accent: 244 26% 23.700000000000003%; + --accent-foreground: 244 5.2% 98.95%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 244 5.2% 98.95%; + + --ring: 244 52% 79%; + } } @layer base { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5839b65..f2bd548 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { ThemeProvider } from "@/components/theme-provider"; +import { Toaster } from "@/components/ui/toaster"; const inter = Inter({ subsets: ["latin"] }); @@ -20,11 +21,12 @@ export default function RootLayout({ {children} + diff --git a/src/components/alert-modal.tsx b/src/components/alert-modal.tsx new file mode 100644 index 0000000..4daa595 --- /dev/null +++ b/src/components/alert-modal.tsx @@ -0,0 +1,46 @@ +"use client"; +import { useEffect, useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Modal } from "@/components/ui/modal"; + +interface AlertModalProps { + isOpen: boolean; + onClose: () => void; + onConfirm: () => void; + loading: boolean; +} + +export const AlertModal: React.FC = ({ + isOpen, + onClose, + onConfirm, + loading, +}) => { + const [isMounted, setIsMounted] = useState(false); + + useEffect(() => { + setIsMounted(true); + }, []); + + if (!isMounted) { + return null; + } + + return ( + +
+ + +
+ + ); +}; diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx new file mode 100644 index 0000000..e3fc614 --- /dev/null +++ b/src/components/breadcrumb.tsx @@ -0,0 +1,99 @@ +// import { cn } from "@/lib/utils"; +// import { ChevronRightIcon } from "@radix-ui/react-icons"; +// import Link from "next/link"; +// import React from "react"; + +// type BreadCrumbType = { +// title: string; +// link: string; +// }; + +// type BreadCrumbPropsType = { +// items: BreadCrumbType[]; +// }; + +// export default function BreadCrumb({ items }: BreadCrumbPropsType) { +// return ( +//
+// +// Dashboard +// +// {items?.map((item: BreadCrumbType, index: number) => ( +// +// +// +// {item.title} +// +// +// ))} +//
+// ); +// } + +import { + Breadcrumb as BreadcrumbParent, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb"; +import { Fragment } from "react"; + +type BreadCrumbType = { + title: string; + link?: string; +}; + +type BreadCrumbPropsType = { + items: BreadCrumbType[]; +}; + +const Breadcrumb = ({ items }: BreadCrumbPropsType) => { + return ( + + + {items.map((item) => ( + + {item.link ? ( + <> + + {item.title} + + + + ) : ( + + {item.title} + + )} + + ))} + {/* + Home + + + + Components + + + + Breadcrumb + */} + + + ); +}; + +export default Breadcrumb; diff --git a/src/components/sidebar-nav.tsx b/src/components/sidebar-nav.tsx index cf0e683..d2159a1 100644 --- a/src/components/sidebar-nav.tsx +++ b/src/components/sidebar-nav.tsx @@ -124,14 +124,14 @@ export function SidebarNav({ isCollapsed }: { isCollapsed: boolean }) { // key={link.href + idx} item={link} - currentPath={"/" + currentPath} + currentPath={path} /> ) : ( ); })} diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx index 6c9c2fd..607bd68 100644 --- a/src/components/theme-toggle.tsx +++ b/src/components/theme-toggle.tsx @@ -1,19 +1,19 @@ -"use client" +"use client"; -import * as React from "react" -import { MoonIcon, SunIcon } from "@radix-ui/react-icons" -import { useTheme } from "next-themes" +import * as React from "react"; +import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; +import { useTheme } from "next-themes"; -import { Button } from "@/components/ui/button" +import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" +} from "@/components/ui/dropdown-menu"; export function ThemeToggle() { - const { setTheme } = useTheme() + const { setTheme } = useTheme(); return ( @@ -25,7 +25,7 @@ export function ThemeToggle() { - setTheme("light")}> + {/* setTheme("light")}> Light setTheme("dark")}> @@ -33,8 +33,58 @@ export function ThemeToggle() { setTheme("system")}> System + */} + { + document.documentElement.setAttribute("class", "foo"); + }} + > + Light Blue + + { + document.documentElement.setAttribute("class", "foo2"); + }} + > + Light Green + + { + document.documentElement.setAttribute("class", "light-violet"); + }} + > + Light Violet + + { + document.documentElement.setAttribute("class", "violett"); + }} + > + Violet + + { + document.documentElement.setAttribute("class", "rosee"); + }} + > + Rose + + { + document.documentElement.setAttribute("class", "orangee"); + }} + > + Orange + + + { + document.documentElement.setAttribute("class", "greenn"); + }} + > + Green - ) + ); } diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..26560ef --- /dev/null +++ b/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons" +import { Slot } from "@radix-ui/react-slot" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>