Added element plus component library

nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
 		'nuxt-icon',
 		'@vueuse/nuxt',
 		'@nuxt/devtools',
+		'@element-plus/nuxt',
 	],
 	app: {
 		pageTransition: false,

package-lock.json

@@ -12,6 +12,7 @@
                 "zod": "^3.21.4"
             },
             "devDependencies": {
+                "@element-plus/nuxt": "^1.0.5",
                 "@nuxt/devtools": "^0.6.1",
                 "@nuxtjs/supabase": "^0.3.7",
                 "@nuxtjs/tailwindcss": "^6.7.0",
@@ -687,6 +688,41 @@
                 "postcss-selector-parser": "^6.0.10"
             }
         },
+        "node_modules/@ctrl/tinycolor": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+            "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+            "dev": true,
+            "peer": true,
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@element-plus/icons-vue": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
+            "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+            "dev": true,
+            "peer": true,
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
+        "node_modules/@element-plus/nuxt": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@element-plus/nuxt/-/nuxt-1.0.5.tgz",
+            "integrity": "sha512-FdU0jxAOYaHvbQpW0xQ1/bO1tvFKVS12Jonfr5X0JSe6CiN23zosoDL3Ca94NBaTqwHo8Mrbjzo8h7z3Q4stng==",
+            "dev": true,
+            "dependencies": {
+                "@nuxt/kit": "^3.0.0",
+                "magic-string": "^0.27.0",
+                "unplugin": "^1.0.1"
+            },
+            "peerDependencies": {
+                "@element-plus/icons-vue": ">=0.2.6",
+                "element-plus": ">=2"
+            }
+        },
         "node_modules/@esbuild-kit/cjs-loader": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/@esbuild-kit/cjs-loader/-/cjs-loader-2.4.2.tgz",
@@ -1069,6 +1105,34 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+            "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@floating-ui/utils": "^0.1.1"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+            "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@floating-ui/core": "^1.4.1",
+                "@floating-ui/utils": "^0.1.1"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+            "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/@formkit/auto-animate": {
             "version": "1.0.0-beta.6",
             "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz",
@@ -2564,6 +2628,18 @@
             "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
             "dev": true
         },
+        "node_modules/@popperjs/core": {
+            "name": "@sxzz/popperjs-es",
+            "version": "2.11.7",
+            "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+            "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+            "dev": true,
+            "peer": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@rollup/plugin-alias": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
@@ -2979,6 +3055,23 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
             "dev": true
         },
+        "node_modules/@types/lodash": {
+            "version": "4.14.197",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.197.tgz",
+            "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/@types/lodash-es": {
+            "version": "4.17.9",
+            "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.9.tgz",
+            "integrity": "sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@types/lodash": "*"
+            }
+        },
         "node_modules/@types/node": {
             "version": "18.13.0",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -4089,6 +4182,13 @@
             "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
             "dev": true
         },
+        "node_modules/async-validator": {
+            "version": "4.2.5",
+            "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+            "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -5443,6 +5543,13 @@
                 "node": ">= 12"
             }
         },
+        "node_modules/dayjs": {
+            "version": "1.11.9",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+            "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6092,6 +6199,79 @@
             "integrity": "sha512-bz00ASIIDjcgszZKuEA1JEFhbDjqUNbQ/PEhNEl1wbixzYpeTp2H2QWjsQvAL2T1wJBdOwCF5hE896BoMwYKrA==",
             "dev": true
         },
+        "node_modules/element-plus": {
+            "version": "2.3.12",
+            "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.3.12.tgz",
+            "integrity": "sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@ctrl/tinycolor": "^3.4.1",
+                "@element-plus/icons-vue": "^2.0.6",
+                "@floating-ui/dom": "^1.0.1",
+                "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+                "@types/lodash": "^4.14.182",
+                "@types/lodash-es": "^4.17.6",
+                "@vueuse/core": "^9.1.0",
+                "async-validator": "^4.2.5",
+                "dayjs": "^1.11.3",
+                "escape-html": "^1.0.3",
+                "lodash": "^4.17.21",
+                "lodash-es": "^4.17.21",
+                "lodash-unified": "^1.0.2",
+                "memoize-one": "^6.0.0",
+                "normalize-wheel-es": "^1.2.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
+        "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+            "version": "0.0.16",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+            "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/element-plus/node_modules/@vueuse/core": {
+            "version": "9.13.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+            "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.16",
+                "@vueuse/metadata": "9.13.0",
+                "@vueuse/shared": "9.13.0",
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/element-plus/node_modules/@vueuse/metadata": {
+            "version": "9.13.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+            "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+            "dev": true,
+            "peer": true,
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/element-plus/node_modules/@vueuse/shared": {
+            "version": "9.13.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+            "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
         "node_modules/emoji-regex": {
             "version": "9.2.2",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -8580,6 +8760,25 @@
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true
         },
+        "node_modules/lodash-es": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/lodash-unified": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+            "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+            "dev": true,
+            "peer": true,
+            "peerDependencies": {
+                "@types/lodash-es": "*",
+                "lodash": "*",
+                "lodash-es": "*"
+            }
+        },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8881,6 +9080,13 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/memoize-one": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+            "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/memory-fs": {
             "version": "0.5.0",
             "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -10121,6 +10327,13 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/normalize-wheel-es": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+            "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/npm-bundled": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.0.tgz",

package.json

@@ -8,6 +8,7 @@
         "postinstall": "nuxt prepare"
     },
     "devDependencies": {
+        "@element-plus/nuxt": "^1.0.5",
         "@nuxt/devtools": "^0.6.1",
         "@nuxtjs/supabase": "^0.3.7",
         "@nuxtjs/tailwindcss": "^6.7.0",

tailwind.config.ts

@@ -1,10 +1,11 @@
 module.exports = {
 	content: [],
 	important: false,
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {
-                primary: '#0c0c0d',
+				primary: '#141414',
 				secondary: '#18181b',
 				darkgray: '#121213',
 				lightgray: '#27272a',