From 76031593b5be5c63c049b2c57df349d27aee17c6 Mon Sep 17 00:00:00 2001 From: Nella Date: Tue, 19 Nov 2024 22:40:24 +0100 Subject: [PATCH 1/8] 1 to-do is done --- .vscode/settings.json | 3 + index.html | 23 +- package-lock.json | 1284 +++++++++++++++++++++++++++++++++- package.json | 7 +- postcss.config.js | 7 + src/App.jsx | 11 +- src/components/AddTask.jsx | 32 + src/components/Todo.jsx | 87 +++ src/components/TodoItems.jsx | 39 ++ src/index.css | 51 +- src/store/taskStore.js | 25 + src/store/todoStore.js | 31 + tailwind.config.js | 10 + vite.config.js | 3 + 14 files changed, 1556 insertions(+), 57 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 postcss.config.js create mode 100644 src/components/AddTask.jsx create mode 100644 src/components/Todo.jsx create mode 100644 src/components/TodoItems.jsx create mode 100644 src/store/taskStore.js create mode 100644 src/store/todoStore.js create mode 100644 tailwind.config.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..8e5a45cf --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "css.lint.unknownAtRules": "ignore" +} \ No newline at end of file diff --git a/index.html b/index.html index 09bcfb14..6d2ea1dc 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,15 @@ - - - - Todos App Context API - - -
- - - + + + + + Let's do it + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5c1b936d..bae0646d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,18 +8,23 @@ "name": "project-todos-context", "version": "0.0.0", "dependencies": { + "@heroicons/react": "^2.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.18.0", + "zustand": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.0.3", + "autoprefixer": "^10.4.20", "eslint": "^8.45.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", + "postcss": "^8.4.49", + "tailwindcss": "^3.4.15", "vite": "^4.4.5" } }, @@ -31,6 +36,19 @@ "node": ">=0.10.0" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "dev": true, @@ -427,6 +445,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "dev": true, @@ -457,6 +484,53 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "dev": true, @@ -532,6 +606,17 @@ "node": ">= 8" } }, + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@remix-run/router": { "version": "1.11.0", "license": "MIT", @@ -578,12 +663,12 @@ }, "node_modules/@types/prop-types": { "version": "15.7.10", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.2.37", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -601,7 +686,7 @@ }, "node_modules/@types/scheduler": { "version": "0.16.6", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@ungap/structured-clone": { @@ -680,6 +765,34 @@ "node": ">=4" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, + "license": "MIT" + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, + "license": "MIT" + }, "node_modules/argparse": { "version": "2.0.1", "dev": true, @@ -789,6 +902,44 @@ "has-symbols": "^1.0.3" } }, + "node_modules/autoprefixer": { + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "dev": true, @@ -805,6 +956,19 @@ "dev": true, "license": "MIT" }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "dev": true, @@ -814,8 +978,23 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { - "version": "4.22.1", + "version": "4.24.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", + "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", "dev": true, "funding": [ { @@ -833,10 +1012,10 @@ ], "license": "MIT", "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", - "update-browserslist-db": "^1.0.13" + "caniuse-lite": "^1.0.30001669", + "electron-to-chromium": "^1.5.41", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" @@ -866,8 +1045,20 @@ "node": ">=6" } }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/caniuse-lite": { - "version": "1.0.30001561", + "version": "1.0.30001680", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz", + "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==", "dev": true, "funding": [ { @@ -898,6 +1089,44 @@ "node": ">=4" } }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "dev": true, @@ -911,6 +1140,16 @@ "dev": true, "license": "MIT" }, + "node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/concat-map": { "version": "0.0.1", "dev": true, @@ -922,7 +1161,9 @@ "license": "MIT" }, "node_modules/cross-spawn": { - "version": "7.0.3", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "license": "MIT", "dependencies": { @@ -934,9 +1175,22 @@ "node": ">= 8" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/csstype": { "version": "3.1.2", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/debug": { @@ -989,6 +1243,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, + "license": "MIT" + }, "node_modules/doctrine": { "version": "3.0.0", "dev": true, @@ -1000,11 +1268,27 @@ "node": ">=6.0.0" } }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true, + "license": "MIT" + }, "node_modules/electron-to-chromium": { - "version": "1.4.579", + "version": "1.5.63", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz", + "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==", "dev": true, "license": "ISC" }, + "node_modules/emoji-regex": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true, + "license": "MIT" + }, "node_modules/es-abstract": { "version": "1.22.3", "dev": true, @@ -1152,7 +1436,9 @@ } }, "node_modules/escalade": { - "version": "3.1.1", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", "dev": true, "license": "MIT", "engines": { @@ -1454,6 +1740,36 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "dev": true, @@ -1483,6 +1799,19 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-up": { "version": "5.0.0", "dev": true, @@ -1524,6 +1853,37 @@ "is-callable": "^1.1.3" } }, + "node_modules/foreground-child": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "dev": true, + "license": "ISC", + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "dev": true, @@ -1849,6 +2209,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "dev": true, @@ -1919,6 +2292,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/is-generator-function": { "version": "1.0.10", "dev": true, @@ -1963,6 +2346,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-number-object": { "version": "1.0.7", "dev": true, @@ -2114,6 +2507,32 @@ "set-function-name": "^2.0.1" } }, + "node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } + }, + "node_modules/jiti": { + "version": "1.21.6", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", + "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "license": "MIT" @@ -2200,6 +2619,23 @@ "node": ">= 0.8.0" } }, + "node_modules/lilconfig": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", + "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "license": "MIT" + }, "node_modules/locate-path": { "version": "6.0.0", "dev": true, @@ -2237,22 +2673,68 @@ "yallist": "^3.0.2" } }, - "node_modules/minimatch": { - "version": "3.1.2", + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "dev": true, - "license": "ISC", - "dependencies": { - "brace-expansion": "^1.1.7" - }, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, "engines": { "node": "*" } }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/ms": { "version": "2.1.2", "dev": true, "license": "MIT" }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.7", "dev": true, @@ -2276,10 +2758,32 @@ "license": "MIT" }, "node_modules/node-releases": { - "version": "2.0.13", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", "dev": true, "license": "MIT" }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "dev": true, @@ -2288,6 +2792,16 @@ "node": ">=0.10.0" } }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "dev": true, @@ -2430,6 +2944,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "dev": true, + "license": "BlueOak-1.0.0" + }, "node_modules/parent-module": { "version": "1.0.1", "dev": true, @@ -2470,13 +2991,74 @@ "dev": true, "license": "MIT" }, + "node_modules/path-scurry": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^10.2.0", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" + }, + "engines": { + "node": ">=16 || 14 >=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/path-scurry/node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true, + "license": "ISC" + }, "node_modules/picocolors": { - "version": "1.0.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true, "license": "ISC" }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pirates": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", + "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/postcss": { - "version": "8.4.31", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "dev": true, "funding": [ { @@ -2494,14 +3076,166 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.6", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-import/node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", + "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "lilconfig": "^3.0.0", + "yaml": "^2.3.4" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, + "node_modules/postcss-load-config/node_modules/lilconfig": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", + "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "dev": true, @@ -2609,6 +3343,29 @@ "react-dom": ">=16.8" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "dev": true, @@ -2692,7 +3449,9 @@ } }, "node_modules/rollup": { - "version": "3.29.4", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, "license": "MIT", "bin": { @@ -2832,14 +3591,99 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/source-map-js": { - "version": "1.0.2", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" } }, + "node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, + "node_modules/string-width/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/string-width/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/string.prototype.matchall": { "version": "4.0.10", "dev": true, @@ -2912,6 +3756,20 @@ "node": ">=8" } }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-json-comments": { "version": "3.1.1", "dev": true, @@ -2923,6 +3781,76 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/sucrase": { + "version": "3.35.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", + "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "glob": "^10.3.10", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/sucrase/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sucrase/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/supports-color": { "version": "5.5.0", "dev": true, @@ -2945,11 +3873,90 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwindcss": { + "version": "3.4.15", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz", + "integrity": "sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.6", + "lilconfig": "^2.1.0", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tailwindcss/node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/text-table": { "version": "0.2.0", "dev": true, "license": "MIT" }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/to-fast-properties": { "version": "2.0.0", "dev": true, @@ -2958,6 +3965,26 @@ "node": ">=4" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/type-check": { "version": "0.4.0", "dev": true, @@ -3056,7 +4083,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.13", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", "dev": true, "funding": [ { @@ -3074,8 +4103,8 @@ ], "license": "MIT", "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.2.0", + "picocolors": "^1.1.0" }, "bin": { "update-browserslist-db": "cli.js" @@ -3092,11 +4121,19 @@ "punycode": "^2.1.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + }, "node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, + "license": "MIT", "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", @@ -3233,6 +4270,143 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, + "node_modules/wrap-ansi-cjs/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, "node_modules/wrappy": { "version": "1.0.2", "dev": true, @@ -3243,6 +4417,19 @@ "dev": true, "license": "ISC" }, + "node_modules/yaml": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz", + "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==", + "dev": true, + "license": "ISC", + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "dev": true, @@ -3253,6 +4440,35 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz", + "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + }, + "use-sync-external-store": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index a23290e8..cc828899 100644 --- a/package.json +++ b/package.json @@ -10,18 +10,23 @@ "preview": "vite preview" }, "dependencies": { + "@heroicons/react": "^2.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.18.0", + "zustand": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.0.3", + "autoprefixer": "^10.4.20", "eslint": "^8.45.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", + "postcss": "^8.4.49", + "tailwindcss": "^3.4.15", "vite": "^4.4.5" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..e8995d4f --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +// postcss.config.js +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ], +} diff --git a/src/App.jsx b/src/App.jsx index 496ab1b1..e123fde7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,12 @@ +import Todo from "./components/Todo"; + + + export const App = () => { - return
Find me in App.jsx!
; + return ( +
+ +
+ ) }; + diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx new file mode 100644 index 00000000..8cc94b2e --- /dev/null +++ b/src/components/AddTask.jsx @@ -0,0 +1,32 @@ +import { useState } from "react"; +import { useTaskStore } from "../store/taskStore"; + +const AddTask = () => { + const [taskText, setTaskText] = useState(""); + const addTask = useTaskStore((state) => state.addTask); + + const handleSubmit = (event) => { + event.preventDefault(); + if (taskText.trim()) { + addTask(taskText); // Add the new task to the list + setTaskText(""); // Clear input field after submission + } + }; + + return ( +
+ setTaskText(event.target.value)} + className="border p-2 rounded-md w-full" + placeholder="Add a new task" + /> + +
+ ); +}; + +export default AddTask; diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx new file mode 100644 index 00000000..8661b8ee --- /dev/null +++ b/src/components/Todo.jsx @@ -0,0 +1,87 @@ +import { useTaskStore } from "../store/taskStore"; +import TodoItems from "./TodoItems"; +import AddTask from "./AddTask"; // Assuming you have a component for adding new tasks +import { PlusCircleIcon } from '@heroicons/react/24/solid'; // Example of a Tailwind icon from Heroicons + +const Todo = () => { + const { tasks } = useTaskStore(); // Access the tasks from the Zustand store + + const totalToDos = tasks.length; + const uncompletedToDos = tasks.filter((task) => !task.completed).length; + const completedToDos = tasks.filter((task) => task.completed).length; // Calculate completed to-dos + + return ( +
+
+ {/* Using Heroicons with Tailwind */} + +

To-Do List

+
+ + {/* Assuming AddTask component for adding new tasks */} + + {/* Render tasks */} +
+ {tasks.map((task) => ( + + ))} +
+ +
+ {/* Total to-dos */} +
+ + + +

+ You {totalToDos === 1 ? "has" : "have"} {totalToDos} {totalToDos === 1 ? "to-do" : "to-dos"} in your list. +

+
+ + {/* Completed to-dos */} +
+ + + +

+ Great job! {completedToDos} {completedToDos === 1 ? "to-do" : "to-dos"} {completedToDos === 1 ? "is" : "are"} done. +

+
+ + {/* Uncompleted to-dos */} +
+ + + +

+ {uncompletedToDos} {uncompletedToDos === 1 ? "to-do" : "to-dos"} {uncompletedToDos === 1 ? "needs" : "need"} your attention! +

+
+
+
+ ); +}; + +export default Todo; diff --git a/src/components/TodoItems.jsx b/src/components/TodoItems.jsx new file mode 100644 index 00000000..827a134f --- /dev/null +++ b/src/components/TodoItems.jsx @@ -0,0 +1,39 @@ +import { useTaskStore } from "../store/taskStore"; + +const TodoItems = ({ id, text, completed }) => { + const toggleTask = useTaskStore((state) => state.toggleTask); + const removeTask = useTaskStore((state) => state.removeTask); + + return ( +
+ {/* Checkbox */} + toggleTask(id)} + className={`h-6 w-6 rounded border-2 ${completed ? 'bg-green-500 border-green-500' : 'bg-white border-gray-300'} appearance-none relative focus:ring-0 focus:outline-none + peer`} // 'peer' gör att vi kan använda andra stilar beroende på checkboxens tillstånd + /> + + + {/* Text */} +

+ {text} +

+ + {/* Delete button */} + +
+ ); +}; + + + +export default TodoItems; diff --git a/src/index.css b/src/index.css index 4669a352..01e92264 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,43 @@ -*, -*::before, -*::after { - box-sizing: border-box; +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Your custom styles */ +input[type="checkbox"] { + position: relative; + /* Ensure we can position the pseudo-element relative to the checkbox */ + width: 24px; + /* Adjust the size of the checkbox if needed */ + height: 24px; + /* Adjust the size of the checkbox if needed */ + border: 2px solid #ddd; + /* Default border for the checkbox */ + border-radius: 4px; + /* Optional: rounded corners */ + background-color: white; + /* Background color for unchecked state */ +} + +input[type="checkbox"]:checked { + background-color: #ffffff; + border-color: #10b981; } -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +input[type="checkbox"]:checked::after { + content: '\2713'; + /* Unicode character for checkmark */ + color: #10b981; + font-size: 16px; + /* Adjust font size for the checkmark */ + font-weight: bold; + /* Make the checkmark bold */ + position: absolute; + /* Position the checkmark absolutely within the checkbox */ + top: 50%; + /* Vertically center the checkmark */ + left: 50%; + /* Horizontally center the checkmark */ + transform: translate(-50%, -50%); + /* Adjust to truly center the checkmark */ + line-height: 1; } \ No newline at end of file diff --git a/src/store/taskStore.js b/src/store/taskStore.js new file mode 100644 index 00000000..ba213c0d --- /dev/null +++ b/src/store/taskStore.js @@ -0,0 +1,25 @@ +import { create } from 'zustand'; + +export const useTaskStore = create((set) => ({ + tasks: JSON.parse(localStorage.getItem("tasks")) || [], // Läs från localStorage eller använd tom lista + addTask: (text) => + set((state) => { + const newTasks = [...state.tasks, { id: Date.now(), text, completed: false }]; + localStorage.setItem("tasks", JSON.stringify(newTasks)); // Spara uppgifterna i localStorage + return { tasks: newTasks }; + }), + toggleTask: (id) => + set((state) => { + const newTasks = state.tasks.map((task) => + task.id === id ? { ...task, completed: !task.completed } : task + ); + localStorage.setItem("tasks", JSON.stringify(newTasks)); // Spara uppdaterade uppgifter i localStorage + return { tasks: newTasks }; + }), + removeTask: (id) => + set((state) => { + const newTasks = state.tasks.filter((task) => task.id !== id); + localStorage.setItem("tasks", JSON.stringify(newTasks)); // Spara de kvarvarande uppgifterna i localStorage + return { tasks: newTasks }; + }), +})); diff --git a/src/store/todoStore.js b/src/store/todoStore.js new file mode 100644 index 00000000..d4e41838 --- /dev/null +++ b/src/store/todoStore.js @@ -0,0 +1,31 @@ +// src/store/todoStore.js +import { create } from "zustand"; + +const useTodoStore = create((set) => ({ + todos: JSON.parse(localStorage.getItem("todos")) || [], + + addTodo: (text) => + set((state) => { + const newTodos = [...state.todos, { id: Date.now(), text, completed: false }]; + localStorage.setItem("todos", JSON.stringify(newTodos)); + return { todos: newTodos }; + }), + + toggleTodo: (id) => + set((state) => { + const newTodos = state.todos.map((todo) => + todo.id === id ? { ...todo, completed: !todo.completed } : todo + ); + localStorage.setItem("todos", JSON.stringify(newTodos)); + return { todos: newTodos }; + }), + + removeTodo: (id) => + set((state) => { + const newTodos = state.todos.filter((todo) => todo.id !== id); + localStorage.setItem("todos", JSON.stringify(newTodos)); + return { todos: newTodos }; + }), +})); + +export default useTodoStore; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..b92886de --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,10 @@ +module.exports = { + content: [ + "./index.html", // Ensure this file is included + "./src/**/*.{js,jsx,ts,tsx}", // Ensure this pattern matches your source files + ], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/vite.config.js b/vite.config.js index 5a33944a..66766191 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + css: { + postcss: './postcss.config.js', // Point to the updated postcss.config.js file + }, }) From cb360af965cdd2d5a10eaf567bc456a488d236be Mon Sep 17 00:00:00 2001 From: Nella Date: Tue, 19 Nov 2024 22:52:09 +0100 Subject: [PATCH 2/8] postcss --- postcss.config.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/postcss.config.js b/postcss.config.js index e8995d4f..662bb645 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,6 @@ -// postcss.config.js -module.exports = { +export default { plugins: [ require('tailwindcss'), require('autoprefixer'), ], -} +}; From 6c68bbe141d0144ec08736ae5cdf23ea4e15917b Mon Sep 17 00:00:00 2001 From: Nella Date: Tue, 19 Nov 2024 23:00:09 +0100 Subject: [PATCH 3/8] postcss again --- dist/assets/index-d51c492a.js | 41 ++++++++++++++++++++++++++++++++++ dist/assets/index-f9dd7705.css | 1 + dist/index.html | 17 ++++++++++++++ postcss.config.js | 7 ++++-- 4 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 dist/assets/index-d51c492a.js create mode 100644 dist/assets/index-f9dd7705.css create mode 100644 dist/index.html diff --git a/dist/assets/index-d51c492a.js b/dist/assets/index-d51c492a.js new file mode 100644 index 00000000..bebcce52 --- /dev/null +++ b/dist/assets/index-d51c492a.js @@ -0,0 +1,41 @@ +(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))r(l);new MutationObserver(l=>{for(const o of l)if(o.type==="childList")for(const i of o.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function t(l){const o={};return l.integrity&&(o.integrity=l.integrity),l.referrerPolicy&&(o.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?o.credentials="include":l.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(l){if(l.ep)return;l.ep=!0;const o=t(l);fetch(l.href,o)}})();function uc(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var Yu={exports:{}},nl={},Xu={exports:{}},T={};/** + * @license React + * react.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var Xt=Symbol.for("react.element"),sc=Symbol.for("react.portal"),ac=Symbol.for("react.fragment"),cc=Symbol.for("react.strict_mode"),fc=Symbol.for("react.profiler"),dc=Symbol.for("react.provider"),pc=Symbol.for("react.context"),mc=Symbol.for("react.forward_ref"),hc=Symbol.for("react.suspense"),vc=Symbol.for("react.memo"),yc=Symbol.for("react.lazy"),Ii=Symbol.iterator;function gc(e){return e===null||typeof e!="object"?null:(e=Ii&&e[Ii]||e["@@iterator"],typeof e=="function"?e:null)}var Gu={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},Zu=Object.assign,Ju={};function ot(e,n,t){this.props=e,this.context=n,this.refs=Ju,this.updater=t||Gu}ot.prototype.isReactComponent={};ot.prototype.setState=function(e,n){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,n,"setState")};ot.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function qu(){}qu.prototype=ot.prototype;function Vo(e,n,t){this.props=e,this.context=n,this.refs=Ju,this.updater=t||Gu}var Bo=Vo.prototype=new qu;Bo.constructor=Vo;Zu(Bo,ot.prototype);Bo.isPureReactComponent=!0;var Fi=Array.isArray,bu=Object.prototype.hasOwnProperty,Ho={current:null},es={key:!0,ref:!0,__self:!0,__source:!0};function ns(e,n,t){var r,l={},o=null,i=null;if(n!=null)for(r in n.ref!==void 0&&(i=n.ref),n.key!==void 0&&(o=""+n.key),n)bu.call(n,r)&&!es.hasOwnProperty(r)&&(l[r]=n[r]);var u=arguments.length-2;if(u===1)l.children=t;else if(1>>1,G=E[W];if(0>>1;Wl(wl,z))gnl(er,wl)?(E[W]=er,E[gn]=z,W=gn):(E[W]=wl,E[yn]=z,W=yn);else if(gnl(er,z))E[W]=er,E[gn]=z,W=gn;else break e}}return P}function l(E,P){var z=E.sortIndex-P.sortIndex;return z!==0?z:E.id-P.id}if(typeof performance=="object"&&typeof performance.now=="function"){var o=performance;e.unstable_now=function(){return o.now()}}else{var i=Date,u=i.now();e.unstable_now=function(){return i.now()-u}}var s=[],c=[],h=1,m=null,p=3,g=!1,w=!1,k=!1,F=typeof setTimeout=="function"?setTimeout:null,f=typeof clearTimeout=="function"?clearTimeout:null,a=typeof setImmediate<"u"?setImmediate:null;typeof navigator<"u"&&navigator.scheduling!==void 0&&navigator.scheduling.isInputPending!==void 0&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function d(E){for(var P=t(c);P!==null;){if(P.callback===null)r(c);else if(P.startTime<=E)r(c),P.sortIndex=P.expirationTime,n(s,P);else break;P=t(c)}}function v(E){if(k=!1,d(E),!w)if(t(s)!==null)w=!0,yl(x);else{var P=t(c);P!==null&&gl(v,P.startTime-E)}}function x(E,P){w=!1,k&&(k=!1,f(N),N=-1),g=!0;var z=p;try{for(d(P),m=t(s);m!==null&&(!(m.expirationTime>P)||E&&!Ne());){var W=m.callback;if(typeof W=="function"){m.callback=null,p=m.priorityLevel;var G=W(m.expirationTime<=P);P=e.unstable_now(),typeof G=="function"?m.callback=G:m===t(s)&&r(s),d(P)}else r(s);m=t(s)}if(m!==null)var bt=!0;else{var yn=t(c);yn!==null&&gl(v,yn.startTime-P),bt=!1}return bt}finally{m=null,p=z,g=!1}}var C=!1,_=null,N=-1,H=5,L=-1;function Ne(){return!(e.unstable_now()-LE||125W?(E.sortIndex=z,n(c,E),t(s)===null&&E===t(c)&&(k?(f(N),N=-1):k=!0,gl(v,z-W))):(E.sortIndex=G,n(s,E),w||g||(w=!0,yl(x))),E},e.unstable_shouldYield=Ne,e.unstable_wrapCallback=function(E){var P=p;return function(){var z=p;p=P;try{return E.apply(this,arguments)}finally{p=z}}}})(os);ls.exports=os;var Tc=ls.exports;/** + * @license React + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var is=tn,ye=Tc;function y(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),Xl=Object.prototype.hasOwnProperty,Lc=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,$i={},Ai={};function Rc(e){return Xl.call(Ai,e)?!0:Xl.call($i,e)?!1:Lc.test(e)?Ai[e]=!0:($i[e]=!0,!1)}function jc(e,n,t,r){if(t!==null&&t.type===0)return!1;switch(typeof n){case"function":case"symbol":return!0;case"boolean":return r?!1:t!==null?!t.acceptsBooleans:(e=e.toLowerCase().slice(0,5),e!=="data-"&&e!=="aria-");default:return!1}}function Oc(e,n,t,r){if(n===null||typeof n>"u"||jc(e,n,t,r))return!0;if(r)return!1;if(t!==null)switch(t.type){case 3:return!n;case 4:return n===!1;case 5:return isNaN(n);case 6:return isNaN(n)||1>n}return!1}function se(e,n,t,r,l,o,i){this.acceptsBooleans=n===2||n===3||n===4,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=t,this.propertyName=e,this.type=n,this.sanitizeURL=o,this.removeEmptyString=i}var ee={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){ee[e]=new se(e,0,!1,e,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var n=e[0];ee[n]=new se(n,1,!1,e[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(e){ee[e]=new se(e,2,!1,e.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(e){ee[e]=new se(e,2,!1,e,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){ee[e]=new se(e,3,!1,e.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(e){ee[e]=new se(e,3,!0,e,null,!1,!1)});["capture","download"].forEach(function(e){ee[e]=new se(e,4,!1,e,null,!1,!1)});["cols","rows","size","span"].forEach(function(e){ee[e]=new se(e,6,!1,e,null,!1,!1)});["rowSpan","start"].forEach(function(e){ee[e]=new se(e,5,!1,e.toLowerCase(),null,!1,!1)});var Qo=/[\-:]([a-z])/g;function Ko(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var n=e.replace(Qo,Ko);ee[n]=new se(n,1,!1,e,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var n=e.replace(Qo,Ko);ee[n]=new se(n,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(e){var n=e.replace(Qo,Ko);ee[n]=new se(n,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(e){ee[e]=new se(e,1,!1,e.toLowerCase(),null,!1,!1)});ee.xlinkHref=new se("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(e){ee[e]=new se(e,1,!1,e.toLowerCase(),null,!0,!0)});function Yo(e,n,t,r){var l=ee.hasOwnProperty(n)?ee[n]:null;(l!==null?l.type!==0:r||!(2u||l[i]!==o[u]){var s=` +`+l[i].replace(" at new "," at ");return e.displayName&&s.includes("")&&(s=s.replace("",e.displayName)),s}while(1<=i&&0<=u);break}}}finally{xl=!1,Error.prepareStackTrace=t}return(e=e?e.displayName||e.name:"")?gt(e):""}function Mc(e){switch(e.tag){case 5:return gt(e.type);case 16:return gt("Lazy");case 13:return gt("Suspense");case 19:return gt("SuspenseList");case 0:case 2:case 15:return e=El(e.type,!1),e;case 11:return e=El(e.type.render,!1),e;case 1:return e=El(e.type,!0),e;default:return""}}function ql(e){if(e==null)return null;if(typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case Dn:return"Fragment";case Mn:return"Portal";case Gl:return"Profiler";case Xo:return"StrictMode";case Zl:return"Suspense";case Jl:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case as:return(e.displayName||"Context")+".Consumer";case ss:return(e._context.displayName||"Context")+".Provider";case Go:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Zo:return n=e.displayName||null,n!==null?n:ql(e.type)||"Memo";case Ze:n=e._payload,e=e._init;try{return ql(e(n))}catch{}}return null}function Dc(e){var n=e.type;switch(e.tag){case 24:return"Cache";case 9:return(n.displayName||"Context")+".Consumer";case 10:return(n._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=n.render,e=e.displayName||e.name||"",n.displayName||(e!==""?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return n;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return ql(n);case 8:return n===Xo?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if(typeof n=="function")return n.displayName||n.name||null;if(typeof n=="string")return n}return null}function dn(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":return e;case"object":return e;default:return""}}function fs(e){var n=e.type;return(e=e.nodeName)&&e.toLowerCase()==="input"&&(n==="checkbox"||n==="radio")}function Ic(e){var n=fs(e)?"checked":"value",t=Object.getOwnPropertyDescriptor(e.constructor.prototype,n),r=""+e[n];if(!e.hasOwnProperty(n)&&typeof t<"u"&&typeof t.get=="function"&&typeof t.set=="function"){var l=t.get,o=t.set;return Object.defineProperty(e,n,{configurable:!0,get:function(){return l.call(this)},set:function(i){r=""+i,o.call(this,i)}}),Object.defineProperty(e,n,{enumerable:t.enumerable}),{getValue:function(){return r},setValue:function(i){r=""+i},stopTracking:function(){e._valueTracker=null,delete e[n]}}}}function rr(e){e._valueTracker||(e._valueTracker=Ic(e))}function ds(e){if(!e)return!1;var n=e._valueTracker;if(!n)return!0;var t=n.getValue(),r="";return e&&(r=fs(e)?e.checked?"true":"false":e.value),e=r,e!==t?(n.setValue(e),!0):!1}function Lr(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function bl(e,n){var t=n.checked;return V({},n,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:t??e._wrapperState.initialChecked})}function Bi(e,n){var t=n.defaultValue==null?"":n.defaultValue,r=n.checked!=null?n.checked:n.defaultChecked;t=dn(n.value!=null?n.value:t),e._wrapperState={initialChecked:r,initialValue:t,controlled:n.type==="checkbox"||n.type==="radio"?n.checked!=null:n.value!=null}}function ps(e,n){n=n.checked,n!=null&&Yo(e,"checked",n,!1)}function eo(e,n){ps(e,n);var t=dn(n.value),r=n.type;if(t!=null)r==="number"?(t===0&&e.value===""||e.value!=t)&&(e.value=""+t):e.value!==""+t&&(e.value=""+t);else if(r==="submit"||r==="reset"){e.removeAttribute("value");return}n.hasOwnProperty("value")?no(e,n.type,t):n.hasOwnProperty("defaultValue")&&no(e,n.type,dn(n.defaultValue)),n.checked==null&&n.defaultChecked!=null&&(e.defaultChecked=!!n.defaultChecked)}function Hi(e,n,t){if(n.hasOwnProperty("value")||n.hasOwnProperty("defaultValue")){var r=n.type;if(!(r!=="submit"&&r!=="reset"||n.value!==void 0&&n.value!==null))return;n=""+e._wrapperState.initialValue,t||n===e.value||(e.value=n),e.defaultValue=n}t=e.name,t!==""&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,t!==""&&(e.name=t)}function no(e,n,t){(n!=="number"||Lr(e.ownerDocument)!==e)&&(t==null?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+t&&(e.defaultValue=""+t))}var wt=Array.isArray;function Kn(e,n,t,r){if(e=e.options,n){n={};for(var l=0;l"+n.valueOf().toString()+"",n=lr.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;n.firstChild;)e.appendChild(n.firstChild)}});function jt(e,n){if(n){var t=e.firstChild;if(t&&t===e.lastChild&&t.nodeType===3){t.nodeValue=n;return}}e.textContent=n}var xt={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},Fc=["Webkit","ms","Moz","O"];Object.keys(xt).forEach(function(e){Fc.forEach(function(n){n=n+e.charAt(0).toUpperCase()+e.substring(1),xt[n]=xt[e]})});function ys(e,n,t){return n==null||typeof n=="boolean"||n===""?"":t||typeof n!="number"||n===0||xt.hasOwnProperty(e)&&xt[e]?(""+n).trim():n+"px"}function gs(e,n){e=e.style;for(var t in n)if(n.hasOwnProperty(t)){var r=t.indexOf("--")===0,l=ys(t,n[t],r);t==="float"&&(t="cssFloat"),r?e.setProperty(t,l):e[t]=l}}var Uc=V({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function lo(e,n){if(n){if(Uc[e]&&(n.children!=null||n.dangerouslySetInnerHTML!=null))throw Error(y(137,e));if(n.dangerouslySetInnerHTML!=null){if(n.children!=null)throw Error(y(60));if(typeof n.dangerouslySetInnerHTML!="object"||!("__html"in n.dangerouslySetInnerHTML))throw Error(y(61))}if(n.style!=null&&typeof n.style!="object")throw Error(y(62))}}function oo(e,n){if(e.indexOf("-")===-1)return typeof n.is=="string";switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var io=null;function Jo(e){return e=e.target||e.srcElement||window,e.correspondingUseElement&&(e=e.correspondingUseElement),e.nodeType===3?e.parentNode:e}var uo=null,Yn=null,Xn=null;function Ki(e){if(e=Jt(e)){if(typeof uo!="function")throw Error(y(280));var n=e.stateNode;n&&(n=il(n),uo(e.stateNode,e.type,n))}}function ws(e){Yn?Xn?Xn.push(e):Xn=[e]:Yn=e}function ks(){if(Yn){var e=Yn,n=Xn;if(Xn=Yn=null,Ki(e),n)for(e=0;e>>=0,e===0?32:31-(Gc(e)/Zc|0)|0}var or=64,ir=4194304;function kt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return e&4194240;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return e&130023424;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function Mr(e,n){var t=e.pendingLanes;if(t===0)return 0;var r=0,l=e.suspendedLanes,o=e.pingedLanes,i=t&268435455;if(i!==0){var u=i&~l;u!==0?r=kt(u):(o&=i,o!==0&&(r=kt(o)))}else i=t&~l,i!==0?r=kt(i):o!==0&&(r=kt(o));if(r===0)return 0;if(n!==0&&n!==r&&!(n&l)&&(l=r&-r,o=n&-n,l>=o||l===16&&(o&4194240)!==0))return n;if(r&4&&(r|=t&16),n=e.entangledLanes,n!==0)for(e=e.entanglements,n&=r;0t;t++)n.push(e);return n}function Gt(e,n,t){e.pendingLanes|=n,n!==536870912&&(e.suspendedLanes=0,e.pingedLanes=0),e=e.eventTimes,n=31-Re(n),e[n]=t}function ef(e,n){var t=e.pendingLanes&~n;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=n,e.mutableReadLanes&=n,e.entangledLanes&=n,n=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0=Ct),nu=String.fromCharCode(32),tu=!1;function As(e,n){switch(e){case"keyup":return Tf.indexOf(n.keyCode)!==-1;case"keydown":return n.keyCode!==229;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Vs(e){return e=e.detail,typeof e=="object"&&"data"in e?e.data:null}var In=!1;function Rf(e,n){switch(e){case"compositionend":return Vs(n);case"keypress":return n.which!==32?null:(tu=!0,nu);case"textInput":return e=n.data,e===nu&&tu?null:e;default:return null}}function jf(e,n){if(In)return e==="compositionend"||!oi&&As(e,n)?(e=Us(),Sr=ti=en=null,In=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(n.ctrlKey||n.altKey||n.metaKey)||n.ctrlKey&&n.altKey){if(n.char&&1=n)return{node:t,offset:n-e};e=r}e:{for(;t;){if(t.nextSibling){t=t.nextSibling;break e}t=t.parentNode}t=void 0}t=iu(t)}}function Qs(e,n){return e&&n?e===n?!0:e&&e.nodeType===3?!1:n&&n.nodeType===3?Qs(e,n.parentNode):"contains"in e?e.contains(n):e.compareDocumentPosition?!!(e.compareDocumentPosition(n)&16):!1:!1}function Ks(){for(var e=window,n=Lr();n instanceof e.HTMLIFrameElement;){try{var t=typeof n.contentWindow.location.href=="string"}catch{t=!1}if(t)e=n.contentWindow;else break;n=Lr(e.document)}return n}function ii(e){var n=e&&e.nodeName&&e.nodeName.toLowerCase();return n&&(n==="input"&&(e.type==="text"||e.type==="search"||e.type==="tel"||e.type==="url"||e.type==="password")||n==="textarea"||e.contentEditable==="true")}function Vf(e){var n=Ks(),t=e.focusedElem,r=e.selectionRange;if(n!==t&&t&&t.ownerDocument&&Qs(t.ownerDocument.documentElement,t)){if(r!==null&&ii(t)){if(n=r.start,e=r.end,e===void 0&&(e=n),"selectionStart"in t)t.selectionStart=n,t.selectionEnd=Math.min(e,t.value.length);else if(e=(n=t.ownerDocument||document)&&n.defaultView||window,e.getSelection){e=e.getSelection();var l=t.textContent.length,o=Math.min(r.start,l);r=r.end===void 0?o:Math.min(r.end,l),!e.extend&&o>r&&(l=r,r=o,o=l),l=uu(t,o);var i=uu(t,r);l&&i&&(e.rangeCount!==1||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&(n=n.createRange(),n.setStart(l.node,l.offset),e.removeAllRanges(),o>r?(e.addRange(n),e.extend(i.node,i.offset)):(n.setEnd(i.node,i.offset),e.addRange(n)))}}for(n=[],e=t;e=e.parentNode;)e.nodeType===1&&n.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(typeof t.focus=="function"&&t.focus(),t=0;t=document.documentMode,Fn=null,mo=null,Nt=null,ho=!1;function su(e,n,t){var r=t.window===t?t.document:t.nodeType===9?t:t.ownerDocument;ho||Fn==null||Fn!==Lr(r)||(r=Fn,"selectionStart"in r&&ii(r)?r={start:r.selectionStart,end:r.selectionEnd}:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection(),r={anchorNode:r.anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset}),Nt&&Ut(Nt,r)||(Nt=r,r=Fr(mo,"onSelect"),0An||(e.current=So[An],So[An]=null,An--)}function M(e,n){An++,So[An]=e.current,e.current=n}var pn={},le=hn(pn),fe=hn(!1),Nn=pn;function bn(e,n){var t=e.type.contextTypes;if(!t)return pn;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===n)return r.__reactInternalMemoizedMaskedChildContext;var l={},o;for(o in t)l[o]=n[o];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=n,e.__reactInternalMemoizedMaskedChildContext=l),l}function de(e){return e=e.childContextTypes,e!=null}function $r(){I(fe),I(le)}function hu(e,n,t){if(le.current!==pn)throw Error(y(168));M(le,n),M(fe,t)}function na(e,n,t){var r=e.stateNode;if(n=n.childContextTypes,typeof r.getChildContext!="function")return t;r=r.getChildContext();for(var l in r)if(!(l in n))throw Error(y(108,Dc(e)||"Unknown",l));return V({},t,r)}function Ar(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||pn,Nn=le.current,M(le,e),M(fe,fe.current),!0}function vu(e,n,t){var r=e.stateNode;if(!r)throw Error(y(169));t?(e=na(e,n,Nn),r.__reactInternalMemoizedMergedChildContext=e,I(fe),I(le),M(le,e)):I(fe),M(fe,t)}var Ae=null,ul=!1,Fl=!1;function ta(e){Ae===null?Ae=[e]:Ae.push(e)}function bf(e){ul=!0,ta(e)}function vn(){if(!Fl&&Ae!==null){Fl=!0;var e=0,n=O;try{var t=Ae;for(O=1;e>=i,l-=i,Ve=1<<32-Re(n)+l|t<N?(H=_,_=null):H=_.sibling;var L=p(f,_,d[N],v);if(L===null){_===null&&(_=H);break}e&&_&&L.alternate===null&&n(f,_),a=o(L,a,N),C===null?x=L:C.sibling=L,C=L,_=H}if(N===d.length)return t(f,_),U&&wn(f,N),x;if(_===null){for(;NN?(H=_,_=null):H=_.sibling;var Ne=p(f,_,L.value,v);if(Ne===null){_===null&&(_=H);break}e&&_&&Ne.alternate===null&&n(f,_),a=o(Ne,a,N),C===null?x=Ne:C.sibling=Ne,C=Ne,_=H}if(L.done)return t(f,_),U&&wn(f,N),x;if(_===null){for(;!L.done;N++,L=d.next())L=m(f,L.value,v),L!==null&&(a=o(L,a,N),C===null?x=L:C.sibling=L,C=L);return U&&wn(f,N),x}for(_=r(f,_);!L.done;N++,L=d.next())L=g(_,f,N,L.value,v),L!==null&&(e&&L.alternate!==null&&_.delete(L.key===null?N:L.key),a=o(L,a,N),C===null?x=L:C.sibling=L,C=L);return e&&_.forEach(function(st){return n(f,st)}),U&&wn(f,N),x}function F(f,a,d,v){if(typeof d=="object"&&d!==null&&d.type===Dn&&d.key===null&&(d=d.props.children),typeof d=="object"&&d!==null){switch(d.$$typeof){case tr:e:{for(var x=d.key,C=a;C!==null;){if(C.key===x){if(x=d.type,x===Dn){if(C.tag===7){t(f,C.sibling),a=l(C,d.props.children),a.return=f,f=a;break e}}else if(C.elementType===x||typeof x=="object"&&x!==null&&x.$$typeof===Ze&&Eu(x)===C.type){t(f,C.sibling),a=l(C,d.props),a.ref=ht(f,C,d),a.return=f,f=a;break e}t(f,C);break}else n(f,C);C=C.sibling}d.type===Dn?(a=_n(d.props.children,f.mode,v,d.key),a.return=f,f=a):(v=Tr(d.type,d.key,d.props,null,f.mode,v),v.ref=ht(f,a,d),v.return=f,f=v)}return i(f);case Mn:e:{for(C=d.key;a!==null;){if(a.key===C)if(a.tag===4&&a.stateNode.containerInfo===d.containerInfo&&a.stateNode.implementation===d.implementation){t(f,a.sibling),a=l(a,d.children||[]),a.return=f,f=a;break e}else{t(f,a);break}else n(f,a);a=a.sibling}a=Ql(d,f.mode,v),a.return=f,f=a}return i(f);case Ze:return C=d._init,F(f,a,C(d._payload),v)}if(wt(d))return w(f,a,d,v);if(ct(d))return k(f,a,d,v);pr(f,d)}return typeof d=="string"&&d!==""||typeof d=="number"?(d=""+d,a!==null&&a.tag===6?(t(f,a.sibling),a=l(a,d),a.return=f,f=a):(t(f,a),a=Wl(d,f.mode,v),a.return=f,f=a),i(f)):t(f,a)}return F}var nt=ca(!0),fa=ca(!1),qt={},Ue=hn(qt),Bt=hn(qt),Ht=hn(qt);function En(e){if(e===qt)throw Error(y(174));return e}function hi(e,n){switch(M(Ht,n),M(Bt,e),M(Ue,qt),e=n.nodeType,e){case 9:case 11:n=(n=n.documentElement)?n.namespaceURI:ro(null,"");break;default:e=e===8?n.parentNode:n,n=e.namespaceURI||null,e=e.tagName,n=ro(n,e)}I(Ue),M(Ue,n)}function tt(){I(Ue),I(Bt),I(Ht)}function da(e){En(Ht.current);var n=En(Ue.current),t=ro(n,e.type);n!==t&&(M(Bt,e),M(Ue,t))}function vi(e){Bt.current===e&&(I(Ue),I(Bt))}var $=hn(0);function Kr(e){for(var n=e;n!==null;){if(n.tag===13){var t=n.memoizedState;if(t!==null&&(t=t.dehydrated,t===null||t.data==="$?"||t.data==="$!"))return n}else if(n.tag===19&&n.memoizedProps.revealOrder!==void 0){if(n.flags&128)return n}else if(n.child!==null){n.child.return=n,n=n.child;continue}if(n===e)break;for(;n.sibling===null;){if(n.return===null||n.return===e)return null;n=n.return}n.sibling.return=n.return,n=n.sibling}return null}var Ul=[];function yi(){for(var e=0;et?t:4,e(!0);var r=$l.transition;$l.transition={};try{e(!1),n()}finally{O=t,$l.transition=r}}function za(){return _e().memoizedState}function rd(e,n,t){var r=cn(e);if(t={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null},Ta(e))La(n,t);else if(t=ia(e,n,t,r),t!==null){var l=ie();je(t,e,r,l),Ra(t,n,r)}}function ld(e,n,t){var r=cn(e),l={lane:r,action:t,hasEagerState:!1,eagerState:null,next:null};if(Ta(e))La(n,l);else{var o=e.alternate;if(e.lanes===0&&(o===null||o.lanes===0)&&(o=n.lastRenderedReducer,o!==null))try{var i=n.lastRenderedState,u=o(i,t);if(l.hasEagerState=!0,l.eagerState=u,Oe(u,i)){var s=n.interleaved;s===null?(l.next=l,pi(n)):(l.next=s.next,s.next=l),n.interleaved=l;return}}catch{}finally{}t=ia(e,n,l,r),t!==null&&(l=ie(),je(t,e,r,l),Ra(t,n,r))}}function Ta(e){var n=e.alternate;return e===A||n!==null&&n===A}function La(e,n){Pt=Yr=!0;var t=e.pending;t===null?n.next=n:(n.next=t.next,t.next=n),e.pending=n}function Ra(e,n,t){if(t&4194240){var r=n.lanes;r&=e.pendingLanes,t|=r,n.lanes=t,bo(e,t)}}var Xr={readContext:Ce,useCallback:ne,useContext:ne,useEffect:ne,useImperativeHandle:ne,useInsertionEffect:ne,useLayoutEffect:ne,useMemo:ne,useReducer:ne,useRef:ne,useState:ne,useDebugValue:ne,useDeferredValue:ne,useTransition:ne,useMutableSource:ne,useSyncExternalStore:ne,useId:ne,unstable_isNewReconciler:!1},od={readContext:Ce,useCallback:function(e,n){return De().memoizedState=[e,n===void 0?null:n],e},useContext:Ce,useEffect:_u,useImperativeHandle:function(e,n,t){return t=t!=null?t.concat([e]):null,_r(4194308,4,Ea.bind(null,n,e),t)},useLayoutEffect:function(e,n){return _r(4194308,4,e,n)},useInsertionEffect:function(e,n){return _r(4,2,e,n)},useMemo:function(e,n){var t=De();return n=n===void 0?null:n,e=e(),t.memoizedState=[e,n],e},useReducer:function(e,n,t){var r=De();return n=t!==void 0?t(n):n,r.memoizedState=r.baseState=n,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:n},r.queue=e,e=e.dispatch=rd.bind(null,A,e),[r.memoizedState,e]},useRef:function(e){var n=De();return e={current:e},n.memoizedState=e},useState:Cu,useDebugValue:xi,useDeferredValue:function(e){return De().memoizedState=e},useTransition:function(){var e=Cu(!1),n=e[0];return e=td.bind(null,e[1]),De().memoizedState=e,[n,e]},useMutableSource:function(){},useSyncExternalStore:function(e,n,t){var r=A,l=De();if(U){if(t===void 0)throw Error(y(407));t=t()}else{if(t=n(),J===null)throw Error(y(349));zn&30||ha(r,n,t)}l.memoizedState=t;var o={value:t,getSnapshot:n};return l.queue=o,_u(ya.bind(null,r,o,e),[e]),r.flags|=2048,Kt(9,va.bind(null,r,o,t,n),void 0,null),t},useId:function(){var e=De(),n=J.identifierPrefix;if(U){var t=Be,r=Ve;t=(r&~(1<<32-Re(r)-1)).toString(32)+t,n=":"+n+"R"+t,t=Wt++,0<\/script>",e=e.removeChild(e.firstChild)):typeof r.is=="string"?e=i.createElement(t,{is:r.is}):(e=i.createElement(t),t==="select"&&(i=e,r.multiple?i.multiple=!0:r.size&&(i.size=r.size))):e=i.createElementNS(e,t),e[Ie]=n,e[Vt]=r,Aa(e,n,!1,!1),n.stateNode=e;e:{switch(i=oo(t,r),t){case"dialog":D("cancel",e),D("close",e),l=r;break;case"iframe":case"object":case"embed":D("load",e),l=r;break;case"video":case"audio":for(l=0;llt&&(n.flags|=128,r=!0,vt(o,!1),n.lanes=4194304)}else{if(!r)if(e=Kr(i),e!==null){if(n.flags|=128,r=!0,t=e.updateQueue,t!==null&&(n.updateQueue=t,n.flags|=4),vt(o,!0),o.tail===null&&o.tailMode==="hidden"&&!i.alternate&&!U)return te(n),null}else 2*Q()-o.renderingStartTime>lt&&t!==1073741824&&(n.flags|=128,r=!0,vt(o,!1),n.lanes=4194304);o.isBackwards?(i.sibling=n.child,n.child=i):(t=o.last,t!==null?t.sibling=i:n.child=i,o.last=i)}return o.tail!==null?(n=o.tail,o.rendering=n,o.tail=n.sibling,o.renderingStartTime=Q(),n.sibling=null,t=$.current,M($,r?t&1|2:t&1),n):(te(n),null);case 22:case 23:return zi(),r=n.memoizedState!==null,e!==null&&e.memoizedState!==null!==r&&(n.flags|=8192),r&&n.mode&1?me&1073741824&&(te(n),n.subtreeFlags&6&&(n.flags|=8192)):te(n),null;case 24:return null;case 25:return null}throw Error(y(156,n.tag))}function pd(e,n){switch(si(n),n.tag){case 1:return de(n.type)&&$r(),e=n.flags,e&65536?(n.flags=e&-65537|128,n):null;case 3:return tt(),I(fe),I(le),yi(),e=n.flags,e&65536&&!(e&128)?(n.flags=e&-65537|128,n):null;case 5:return vi(n),null;case 13:if(I($),e=n.memoizedState,e!==null&&e.dehydrated!==null){if(n.alternate===null)throw Error(y(340));et()}return e=n.flags,e&65536?(n.flags=e&-65537|128,n):null;case 19:return I($),null;case 4:return tt(),null;case 10:return di(n.type._context),null;case 22:case 23:return zi(),null;case 24:return null;default:return null}}var hr=!1,re=!1,md=typeof WeakSet=="function"?WeakSet:Set,S=null;function Wn(e,n){var t=e.ref;if(t!==null)if(typeof t=="function")try{t(null)}catch(r){B(e,n,r)}else t.current=null}function Oo(e,n,t){try{t()}catch(r){B(e,n,r)}}var Mu=!1;function hd(e,n){if(vo=Dr,e=Ks(),ii(e)){if("selectionStart"in e)var t={start:e.selectionStart,end:e.selectionEnd};else e:{t=(t=e.ownerDocument)&&t.defaultView||window;var r=t.getSelection&&t.getSelection();if(r&&r.rangeCount!==0){t=r.anchorNode;var l=r.anchorOffset,o=r.focusNode;r=r.focusOffset;try{t.nodeType,o.nodeType}catch{t=null;break e}var i=0,u=-1,s=-1,c=0,h=0,m=e,p=null;n:for(;;){for(var g;m!==t||l!==0&&m.nodeType!==3||(u=i+l),m!==o||r!==0&&m.nodeType!==3||(s=i+r),m.nodeType===3&&(i+=m.nodeValue.length),(g=m.firstChild)!==null;)p=m,m=g;for(;;){if(m===e)break n;if(p===t&&++c===l&&(u=i),p===o&&++h===r&&(s=i),(g=m.nextSibling)!==null)break;m=p,p=m.parentNode}m=g}t=u===-1||s===-1?null:{start:u,end:s}}else t=null}t=t||{start:0,end:0}}else t=null;for(yo={focusedElem:e,selectionRange:t},Dr=!1,S=n;S!==null;)if(n=S,e=n.child,(n.subtreeFlags&1028)!==0&&e!==null)e.return=n,S=e;else for(;S!==null;){n=S;try{var w=n.alternate;if(n.flags&1024)switch(n.tag){case 0:case 11:case 15:break;case 1:if(w!==null){var k=w.memoizedProps,F=w.memoizedState,f=n.stateNode,a=f.getSnapshotBeforeUpdate(n.elementType===n.type?k:ze(n.type,k),F);f.__reactInternalSnapshotBeforeUpdate=a}break;case 3:var d=n.stateNode.containerInfo;d.nodeType===1?d.textContent="":d.nodeType===9&&d.documentElement&&d.removeChild(d.documentElement);break;case 5:case 6:case 4:case 17:break;default:throw Error(y(163))}}catch(v){B(n,n.return,v)}if(e=n.sibling,e!==null){e.return=n.return,S=e;break}S=n.return}return w=Mu,Mu=!1,w}function zt(e,n,t){var r=n.updateQueue;if(r=r!==null?r.lastEffect:null,r!==null){var l=r=r.next;do{if((l.tag&e)===e){var o=l.destroy;l.destroy=void 0,o!==void 0&&Oo(n,t,o)}l=l.next}while(l!==r)}}function cl(e,n){if(n=n.updateQueue,n=n!==null?n.lastEffect:null,n!==null){var t=n=n.next;do{if((t.tag&e)===e){var r=t.create;t.destroy=r()}t=t.next}while(t!==n)}}function Mo(e){var n=e.ref;if(n!==null){var t=e.stateNode;switch(e.tag){case 5:e=t;break;default:e=t}typeof n=="function"?n(e):n.current=e}}function Ha(e){var n=e.alternate;n!==null&&(e.alternate=null,Ha(n)),e.child=null,e.deletions=null,e.sibling=null,e.tag===5&&(n=e.stateNode,n!==null&&(delete n[Ie],delete n[Vt],delete n[ko],delete n[Jf],delete n[qf])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function Wa(e){return e.tag===5||e.tag===3||e.tag===4}function Du(e){e:for(;;){for(;e.sibling===null;){if(e.return===null||Wa(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;e.tag!==5&&e.tag!==6&&e.tag!==18;){if(e.flags&2||e.child===null||e.tag===4)continue e;e.child.return=e,e=e.child}if(!(e.flags&2))return e.stateNode}}function Do(e,n,t){var r=e.tag;if(r===5||r===6)e=e.stateNode,n?t.nodeType===8?t.parentNode.insertBefore(e,n):t.insertBefore(e,n):(t.nodeType===8?(n=t.parentNode,n.insertBefore(e,t)):(n=t,n.appendChild(e)),t=t._reactRootContainer,t!=null||n.onclick!==null||(n.onclick=Ur));else if(r!==4&&(e=e.child,e!==null))for(Do(e,n,t),e=e.sibling;e!==null;)Do(e,n,t),e=e.sibling}function Io(e,n,t){var r=e.tag;if(r===5||r===6)e=e.stateNode,n?t.insertBefore(e,n):t.appendChild(e);else if(r!==4&&(e=e.child,e!==null))for(Io(e,n,t),e=e.sibling;e!==null;)Io(e,n,t),e=e.sibling}var q=null,Te=!1;function Ge(e,n,t){for(t=t.child;t!==null;)Qa(e,n,t),t=t.sibling}function Qa(e,n,t){if(Fe&&typeof Fe.onCommitFiberUnmount=="function")try{Fe.onCommitFiberUnmount(tl,t)}catch{}switch(t.tag){case 5:re||Wn(t,n);case 6:var r=q,l=Te;q=null,Ge(e,n,t),q=r,Te=l,q!==null&&(Te?(e=q,t=t.stateNode,e.nodeType===8?e.parentNode.removeChild(t):e.removeChild(t)):q.removeChild(t.stateNode));break;case 18:q!==null&&(Te?(e=q,t=t.stateNode,e.nodeType===8?Il(e.parentNode,t):e.nodeType===1&&Il(e,t),It(e)):Il(q,t.stateNode));break;case 4:r=q,l=Te,q=t.stateNode.containerInfo,Te=!0,Ge(e,n,t),q=r,Te=l;break;case 0:case 11:case 14:case 15:if(!re&&(r=t.updateQueue,r!==null&&(r=r.lastEffect,r!==null))){l=r=r.next;do{var o=l,i=o.destroy;o=o.tag,i!==void 0&&(o&2||o&4)&&Oo(t,n,i),l=l.next}while(l!==r)}Ge(e,n,t);break;case 1:if(!re&&(Wn(t,n),r=t.stateNode,typeof r.componentWillUnmount=="function"))try{r.props=t.memoizedProps,r.state=t.memoizedState,r.componentWillUnmount()}catch(u){B(t,n,u)}Ge(e,n,t);break;case 21:Ge(e,n,t);break;case 22:t.mode&1?(re=(r=re)||t.memoizedState!==null,Ge(e,n,t),re=r):Ge(e,n,t);break;default:Ge(e,n,t)}}function Iu(e){var n=e.updateQueue;if(n!==null){e.updateQueue=null;var t=e.stateNode;t===null&&(t=e.stateNode=new md),n.forEach(function(r){var l=Cd.bind(null,e,r);t.has(r)||(t.add(r),r.then(l,l))})}}function Pe(e,n){var t=n.deletions;if(t!==null)for(var r=0;rl&&(l=i),r&=~o}if(r=l,r=Q()-r,r=(120>r?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*yd(r/1960))-r,10e?16:e,nn===null)var r=!1;else{if(e=nn,nn=null,Jr=0,j&6)throw Error(y(331));var l=j;for(j|=4,S=e.current;S!==null;){var o=S,i=o.child;if(S.flags&16){var u=o.deletions;if(u!==null){for(var s=0;sQ()-Ni?Cn(e,0):_i|=t),pe(e,n)}function ba(e,n){n===0&&(e.mode&1?(n=ir,ir<<=1,!(ir&130023424)&&(ir=4194304)):n=1);var t=ie();e=Ke(e,n),e!==null&&(Gt(e,n,t),pe(e,t))}function Ed(e){var n=e.memoizedState,t=0;n!==null&&(t=n.retryLane),ba(e,t)}function Cd(e,n){var t=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;l!==null&&(t=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(y(314))}r!==null&&r.delete(n),ba(e,t)}var ec;ec=function(e,n,t){if(e!==null)if(e.memoizedProps!==n.pendingProps||fe.current)ce=!0;else{if(!(e.lanes&t)&&!(n.flags&128))return ce=!1,fd(e,n,t);ce=!!(e.flags&131072)}else ce=!1,U&&n.flags&1048576&&ra(n,Br,n.index);switch(n.lanes=0,n.tag){case 2:var r=n.type;Nr(e,n),e=n.pendingProps;var l=bn(n,le.current);Zn(n,t),l=wi(null,n,r,e,l,t);var o=ki();return n.flags|=1,typeof l=="object"&&l!==null&&typeof l.render=="function"&&l.$$typeof===void 0?(n.tag=1,n.memoizedState=null,n.updateQueue=null,de(r)?(o=!0,Ar(n)):o=!1,n.memoizedState=l.state!==null&&l.state!==void 0?l.state:null,mi(n),l.updater=sl,n.stateNode=l,l._reactInternals=n,No(n,r,e,t),n=To(null,n,r,!0,o,t)):(n.tag=0,U&&o&&ui(n),oe(null,n,l,t),n=n.child),n;case 16:r=n.elementType;e:{switch(Nr(e,n),e=n.pendingProps,l=r._init,r=l(r._payload),n.type=r,l=n.tag=Nd(r),e=ze(r,e),l){case 0:n=zo(null,n,r,e,t);break e;case 1:n=Ru(null,n,r,e,t);break e;case 11:n=Tu(null,n,r,e,t);break e;case 14:n=Lu(null,n,r,ze(r.type,e),t);break e}throw Error(y(306,r,""))}return n;case 0:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:ze(r,l),zo(e,n,r,l,t);case 1:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:ze(r,l),Ru(e,n,r,l,t);case 3:e:{if(Fa(n),e===null)throw Error(y(387));r=n.pendingProps,o=n.memoizedState,l=o.element,ua(e,n),Qr(n,r,null,t);var i=n.memoizedState;if(r=i.element,o.isDehydrated)if(o={element:r,isDehydrated:!1,cache:i.cache,pendingSuspenseBoundaries:i.pendingSuspenseBoundaries,transitions:i.transitions},n.updateQueue.baseState=o,n.memoizedState=o,n.flags&256){l=rt(Error(y(423)),n),n=ju(e,n,r,t,l);break e}else if(r!==l){l=rt(Error(y(424)),n),n=ju(e,n,r,t,l);break e}else for(he=un(n.stateNode.containerInfo.firstChild),ve=n,U=!0,Le=null,t=fa(n,null,r,t),n.child=t;t;)t.flags=t.flags&-3|4096,t=t.sibling;else{if(et(),r===l){n=Ye(e,n,t);break e}oe(e,n,r,t)}n=n.child}return n;case 5:return da(n),e===null&&Eo(n),r=n.type,l=n.pendingProps,o=e!==null?e.memoizedProps:null,i=l.children,go(r,l)?i=null:o!==null&&go(r,o)&&(n.flags|=32),Ia(e,n),oe(e,n,i,t),n.child;case 6:return e===null&&Eo(n),null;case 13:return Ua(e,n,t);case 4:return hi(n,n.stateNode.containerInfo),r=n.pendingProps,e===null?n.child=nt(n,null,r,t):oe(e,n,r,t),n.child;case 11:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:ze(r,l),Tu(e,n,r,l,t);case 7:return oe(e,n,n.pendingProps,t),n.child;case 8:return oe(e,n,n.pendingProps.children,t),n.child;case 12:return oe(e,n,n.pendingProps.children,t),n.child;case 10:e:{if(r=n.type._context,l=n.pendingProps,o=n.memoizedProps,i=l.value,M(Hr,r._currentValue),r._currentValue=i,o!==null)if(Oe(o.value,i)){if(o.children===l.children&&!fe.current){n=Ye(e,n,t);break e}}else for(o=n.child,o!==null&&(o.return=n);o!==null;){var u=o.dependencies;if(u!==null){i=o.child;for(var s=u.firstContext;s!==null;){if(s.context===r){if(o.tag===1){s=He(-1,t&-t),s.tag=2;var c=o.updateQueue;if(c!==null){c=c.shared;var h=c.pending;h===null?s.next=s:(s.next=h.next,h.next=s),c.pending=s}}o.lanes|=t,s=o.alternate,s!==null&&(s.lanes|=t),Co(o.return,t,n),u.lanes|=t;break}s=s.next}}else if(o.tag===10)i=o.type===n.type?null:o.child;else if(o.tag===18){if(i=o.return,i===null)throw Error(y(341));i.lanes|=t,u=i.alternate,u!==null&&(u.lanes|=t),Co(i,t,n),i=o.sibling}else i=o.child;if(i!==null)i.return=o;else for(i=o;i!==null;){if(i===n){i=null;break}if(o=i.sibling,o!==null){o.return=i.return,i=o;break}i=i.return}o=i}oe(e,n,l.children,t),n=n.child}return n;case 9:return l=n.type,r=n.pendingProps.children,Zn(n,t),l=Ce(l),r=r(l),n.flags|=1,oe(e,n,r,t),n.child;case 14:return r=n.type,l=ze(r,n.pendingProps),l=ze(r.type,l),Lu(e,n,r,l,t);case 15:return Ma(e,n,n.type,n.pendingProps,t);case 17:return r=n.type,l=n.pendingProps,l=n.elementType===r?l:ze(r,l),Nr(e,n),n.tag=1,de(r)?(e=!0,Ar(n)):e=!1,Zn(n,t),aa(n,r,l),No(n,r,l,t),To(null,n,r,!0,e,t);case 19:return $a(e,n,t);case 22:return Da(e,n,t)}throw Error(y(156,n.tag))};function nc(e,n){return Ps(e,n)}function _d(e,n,t,r){this.tag=e,this.key=t,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=n,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function xe(e,n,t,r){return new _d(e,n,t,r)}function Li(e){return e=e.prototype,!(!e||!e.isReactComponent)}function Nd(e){if(typeof e=="function")return Li(e)?1:0;if(e!=null){if(e=e.$$typeof,e===Go)return 11;if(e===Zo)return 14}return 2}function fn(e,n){var t=e.alternate;return t===null?(t=xe(e.tag,n,e.key,e.mode),t.elementType=e.elementType,t.type=e.type,t.stateNode=e.stateNode,t.alternate=e,e.alternate=t):(t.pendingProps=n,t.type=e.type,t.flags=0,t.subtreeFlags=0,t.deletions=null),t.flags=e.flags&14680064,t.childLanes=e.childLanes,t.lanes=e.lanes,t.child=e.child,t.memoizedProps=e.memoizedProps,t.memoizedState=e.memoizedState,t.updateQueue=e.updateQueue,n=e.dependencies,t.dependencies=n===null?null:{lanes:n.lanes,firstContext:n.firstContext},t.sibling=e.sibling,t.index=e.index,t.ref=e.ref,t}function Tr(e,n,t,r,l,o){var i=2;if(r=e,typeof e=="function")Li(e)&&(i=1);else if(typeof e=="string")i=5;else e:switch(e){case Dn:return _n(t.children,l,o,n);case Xo:i=8,l|=8;break;case Gl:return e=xe(12,t,n,l|2),e.elementType=Gl,e.lanes=o,e;case Zl:return e=xe(13,t,n,l),e.elementType=Zl,e.lanes=o,e;case Jl:return e=xe(19,t,n,l),e.elementType=Jl,e.lanes=o,e;case cs:return dl(t,l,o,n);default:if(typeof e=="object"&&e!==null)switch(e.$$typeof){case ss:i=10;break e;case as:i=9;break e;case Go:i=11;break e;case Zo:i=14;break e;case Ze:i=16,r=null;break e}throw Error(y(130,e==null?e:typeof e,""))}return n=xe(i,t,n,l),n.elementType=e,n.type=r,n.lanes=o,n}function _n(e,n,t,r){return e=xe(7,e,r,n),e.lanes=t,e}function dl(e,n,t,r){return e=xe(22,e,r,n),e.elementType=cs,e.lanes=t,e.stateNode={isHidden:!1},e}function Wl(e,n,t){return e=xe(6,e,null,n),e.lanes=t,e}function Ql(e,n,t){return n=xe(4,e.children!==null?e.children:[],e.key,n),n.lanes=t,n.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},n}function Pd(e,n,t,r,l){this.tag=n,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=_l(0),this.expirationTimes=_l(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=_l(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function Ri(e,n,t,r,l,o,i,u,s){return e=new Pd(e,n,t,u,s),n===1?(n=1,o===!0&&(n|=8)):n=0,o=xe(3,null,null,n),e.current=o,o.stateNode=e,o.memoizedState={element:r,isDehydrated:t,cache:null,transitions:null,pendingSuspenseBoundaries:null},mi(o),e}function zd(e,n,t){var r=3"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(oc)}catch(e){console.error(e)}}oc(),rs.exports=ge;var Od=rs.exports,Wu=Od;Yl.createRoot=Wu.createRoot,Yl.hydrateRoot=Wu.hydrateRoot;const Qu=e=>{let n;const t=new Set,r=(c,h)=>{const m=typeof c=="function"?c(n):c;if(!Object.is(m,n)){const p=n;n=h??(typeof m!="object"||m===null)?m:Object.assign({},n,m),t.forEach(g=>g(n,p))}},l=()=>n,u={setState:r,getState:l,getInitialState:()=>s,subscribe:c=>(t.add(c),()=>t.delete(c))},s=n=e(r,l,u);return u},Md=e=>e?Qu(e):Qu,Dd=e=>e;function Id(e,n=Dd){const t=Kl.useSyncExternalStore(e.subscribe,()=>n(e.getState()),()=>n(e.getInitialState()));return Kl.useDebugValue(t),t}const Ku=e=>{const n=Md(e),t=r=>Id(n,r);return Object.assign(t,n),t},Fd=e=>e?Ku(e):Ku,el=Fd(e=>({tasks:JSON.parse(localStorage.getItem("tasks"))||[],addTask:n=>e(t=>{const r=[...t.tasks,{id:Date.now(),text:n,completed:!1}];return localStorage.setItem("tasks",JSON.stringify(r)),{tasks:r}}),toggleTask:n=>e(t=>{const r=t.tasks.map(l=>l.id===n?{...l,completed:!l.completed}:l);return localStorage.setItem("tasks",JSON.stringify(r)),{tasks:r}}),removeTask:n=>e(t=>{const r=t.tasks.filter(l=>l.id!==n);return localStorage.setItem("tasks",JSON.stringify(r)),{tasks:r}})})),Ud=({id:e,text:n,completed:t})=>{const r=el(o=>o.toggleTask),l=el(o=>o.removeTask);return R.jsxs("div",{className:"flex items-center my-3 gap-4",children:[R.jsx("input",{type:"checkbox",checked:t,onChange:()=>r(e),className:`h-6 w-6 rounded border-2 ${t?"bg-green-500 border-green-500":"bg-white border-gray-300"} appearance-none relative focus:ring-0 focus:outline-none + peer`}),R.jsx("p",{className:`flex-1 text-lg ${t?"text-slate-400 line-through":"text-slate-700"}`,children:n}),R.jsx("button",{onClick:()=>l(e),className:"text-red-500 hover:text-red-700",children:"✖"})]})},$d=()=>{const[e,n]=tn.useState(""),t=el(l=>l.addTask),r=l=>{l.preventDefault(),e.trim()&&(t(e),n(""))};return R.jsxs("form",{onSubmit:r,className:"flex items-center gap-2",children:[R.jsx("input",{type:"text",value:e,onChange:l=>n(l.target.value),className:"border p-2 rounded-md w-full",placeholder:"Add a new task"}),R.jsx("button",{type:"submit",className:"bg-blue-500 text-white p-2 rounded-md",children:"Add"})]})};function Ad({title:e,titleId:n,...t},r){return tn.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:r,"aria-labelledby":n},t),e?tn.createElement("title",{id:n},e):null,tn.createElement("path",{fillRule:"evenodd",d:"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z",clipRule:"evenodd"}))}const Vd=tn.forwardRef(Ad),Bd=Vd,Hd=()=>{const{tasks:e}=el(),n=e.length,t=e.filter(l=>!l.completed).length,r=e.filter(l=>l.completed).length;return R.jsxs("div",{className:"bg-gray-100 place-self-center w-11/12 max-w-md flex flex-col p-7 min-h-[550px] rounded-xl",children:[R.jsxs("div",{className:"flex items-center mt-7 gap-2",children:[R.jsx(Bd,{className:"w-8 h-8 text-purple-500"}),R.jsx("h1",{className:"text-3xl",children:"To-Do List"})]}),R.jsx($d,{})," ",R.jsx("div",{children:e.map(l=>R.jsx(Ud,{...l},l.id))}),R.jsxs("div",{className:"mt-5 text-slate-700 space-y-3",children:[R.jsxs("div",{className:"flex items-center gap-2",children:[R.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-purple-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:R.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 6h16M4 12h8m-8 6h16"})}),R.jsxs("p",{className:"text-lg",children:["You ",n===1?"has":"have"," ",R.jsx("span",{className:"font-bold text-purple-500",children:n})," ",n===1?"to-do":"to-dos"," in your list."]})]}),R.jsxs("div",{className:"flex items-center gap-2",children:[R.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-green-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:R.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.95a1 1 0 00.95.69h4.211c.969 0 1.371 1.24.588 1.81l-3.417 2.482a1 1 0 00-.364 1.118l1.286 3.95c.3.921-.755 1.688-1.54 1.118L12 15.347l-3.417 2.482c-.784.57-1.838-.197-1.539-1.118l1.286-3.95a1 1 0 00-.364-1.118L4.55 9.377c-.783-.57-.38-1.81.588-1.81h4.21a1 1 0 00.951-.69l1.287-3.95z"})}),R.jsxs("p",{className:"text-lg",children:["Great job! ",R.jsx("span",{className:"font-bold text-green-500",children:r})," ",r===1?"to-do":"to-dos"," ",r===1?"is":"are"," done."]})]}),R.jsxs("div",{className:"flex items-center gap-2",children:[R.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-6 w-6 text-red-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:R.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 9v2m0 4h.01m-6.93 4h13.86a2 2 0 001.732-2.732l-6.93-12a2 2 0 00-3.464 0l-6.93 12A2 2 0 005.07 19z"})}),R.jsxs("p",{className:"text-lg",children:[R.jsx("span",{className:"font-bold text-red-500",children:t})," ",t===1?"to-do":"to-dos"," ",t===1?"needs":"need"," your attention!"]})]})]})]})},Wd=()=>R.jsx("main",{className:"bg-green-100 grid py-4 min-h-screen",children:R.jsx(Hd,{})});Yl.createRoot(document.getElementById("root")).render(R.jsx(Kl.StrictMode,{children:R.jsx(Wd,{})})); diff --git a/dist/assets/index-f9dd7705.css b/dist/assets/index-f9dd7705.css new file mode 100644 index 00000000..16d275d2 --- /dev/null +++ b/dist/assets/index-f9dd7705.css @@ -0,0 +1 @@ +*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.relative{position:relative}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mt-5{margin-top:1.25rem}.mt-7{margin-top:1.75rem}.flex{display:flex}.grid{display:grid}.h-6{height:1.5rem}.h-8{height:2rem}.min-h-\[550px\]{min-height:550px}.min-h-screen{min-height:100vh}.w-11\/12{width:91.666667%}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.place-self-center{place-self:center}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-2{padding:.5rem}.p-7{padding:1.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-purple-500{--tw-text-opacity: 1;color:rgb(168 85 247 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.line-through{text-decoration-line:line-through}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}input[type=checkbox]{position:relative;width:24px;height:24px;border:2px solid #ddd;border-radius:4px;background-color:#fff}input[type=checkbox]:checked{background-color:#fff;border-color:#10b981}input[type=checkbox]:checked:after{content:"✓";color:#10b981;font-size:16px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1}.hover\:text-red-700:hover{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000..284e41d9 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,17 @@ + + + + + + + Let's do it + + + + + +
+ + + + \ No newline at end of file diff --git a/postcss.config.js b/postcss.config.js index 662bb645..9dce93be 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,9 @@ +import tailwindcss from 'tailwindcss'; +import autoprefixer from 'autoprefixer'; + export default { plugins: [ - require('tailwindcss'), - require('autoprefixer'), + tailwindcss, + autoprefixer, ], }; From f2e4424c85008f02d4b6f505824d1ad8834f931c Mon Sep 17 00:00:00 2001 From: Nella Date: Wed, 20 Nov 2024 22:11:51 +0100 Subject: [PATCH 4/8] working on styling --- src/App.jsx | 2 +- src/components/AddTask.jsx | 29 ++++++++++++++++++++++++----- src/components/Todo.jsx | 22 +++++++++++++--------- src/components/TodoItems.jsx | 15 ++++++++++----- 4 files changed, 48 insertions(+), 20 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e123fde7..be1a64d9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,7 +4,7 @@ import Todo from "./components/Todo"; export const App = () => { return ( -
+
) diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index 8cc94b2e..1f091d64 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -14,16 +14,35 @@ const AddTask = () => { }; return ( -
+ + {/* Input Field */} setTaskText(event.target.value)} - className="border p-2 rounded-md w-full" - placeholder="Add a new task" + className="w-full rounded-full border border-gray-300 p-3 focus:outline-none focus:ring focus:ring-pink-500 h-12 pr-16" // Add padding-right for space + placeholder="What to do?" /> -
); diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx index 8661b8ee..442369d8 100644 --- a/src/components/Todo.jsx +++ b/src/components/Todo.jsx @@ -1,7 +1,6 @@ import { useTaskStore } from "../store/taskStore"; import TodoItems from "./TodoItems"; import AddTask from "./AddTask"; // Assuming you have a component for adding new tasks -import { PlusCircleIcon } from '@heroicons/react/24/solid'; // Example of a Tailwind icon from Heroicons const Todo = () => { const { tasks } = useTaskStore(); // Access the tasks from the Zustand store @@ -11,11 +10,13 @@ const Todo = () => { const completedToDos = tasks.filter((task) => task.completed).length; // Calculate completed to-dos return ( -
-
- {/* Using Heroicons with Tailwind */} - -

To-Do List

+
+
+ + + + +

Let's do it!

{/* Assuming AddTask component for adding new tasks */} @@ -27,7 +28,7 @@ const Todo = () => { ))}
-
+
{/* Total to-dos */}
{ />

- You {totalToDos === 1 ? "has" : "have"} {totalToDos} {totalToDos === 1 ? "to-do" : "to-dos"} in your list. + You have {totalToDos} {totalToDos === 1 ? "to-do" : "to-dos"} in your list.

@@ -55,7 +56,10 @@ const Todo = () => {

- Great job! {completedToDos} {completedToDos === 1 ? "to-do" : "to-dos"} {completedToDos === 1 ? "is" : "are"} done. + You have {completedToDos} {completedToDos === 1 ? "to-do" : "to-dos"} done. + {completedToDos > 0 && ( + Yey! + )}

diff --git a/src/components/TodoItems.jsx b/src/components/TodoItems.jsx index 827a134f..decc5eac 100644 --- a/src/components/TodoItems.jsx +++ b/src/components/TodoItems.jsx @@ -5,20 +5,23 @@ const TodoItems = ({ id, text, completed }) => { const removeTask = useTaskStore((state) => state.removeTask); return ( -
+
{/* Checkbox */} toggleTask(id)} - className={`h-6 w-6 rounded border-2 ${completed ? 'bg-green-500 border-green-500' : 'bg-white border-gray-300'} appearance-none relative focus:ring-0 focus:outline-none - peer`} // 'peer' gör att vi kan använda andra stilar beroende på checkboxens tillstånd + className={`h-6 w-6 rounded border-2 appearance-none relative focus:ring-0 focus:outline-none + peer + ${completed ? 'bg-green-500 border-green-500' : 'bg-white border-slate-800'} + hover:border-green-00`} /> + {/* Text */}

{text}

@@ -28,7 +31,9 @@ const TodoItems = ({ id, text, completed }) => { onClick={() => removeTask(id)} className="text-red-500 hover:text-red-700" > - ✖ + + +
); From e2146c20fc55999e88978414f21609387309e146 Mon Sep 17 00:00:00 2001 From: Nella Date: Wed, 20 Nov 2024 22:29:14 +0100 Subject: [PATCH 5/8] test --- src/components/Todo.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx index 442369d8..131ffd5f 100644 --- a/src/components/Todo.jsx +++ b/src/components/Todo.jsx @@ -1,6 +1,6 @@ import { useTaskStore } from "../store/taskStore"; import TodoItems from "./TodoItems"; -import AddTask from "./AddTask"; // Assuming you have a component for adding new tasks +import AddTask from "./AddTask"; const Todo = () => { const { tasks } = useTaskStore(); // Access the tasks from the Zustand store From ba68a3eff96be5a13580ae9610f4f1bea42c9ec3 Mon Sep 17 00:00:00 2001 From: Nella Date: Sun, 24 Nov 2024 14:04:50 +0100 Subject: [PATCH 6/8] styling mostly --- src/components/AddTask.jsx | 75 +++++++++++++++++++++--------------- src/components/Todo.jsx | 29 +++++++------- src/components/TodoItems.jsx | 28 ++++++-------- src/index.css | 42 ++++++++++++-------- src/store/taskStore.js | 26 +++++++++++-- tailwind.config.js | 10 +++-- 6 files changed, 125 insertions(+), 85 deletions(-) diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index 1f091d64..ff6b7d61 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -3,47 +3,60 @@ import { useTaskStore } from "../store/taskStore"; const AddTask = () => { const [taskText, setTaskText] = useState(""); + const [charCount, setCharCount] = useState(0); // State för teckenräknaren const addTask = useTaskStore((state) => state.addTask); + const handleChange = (event) => { + const text = event.target.value; + setTaskText(text); + setCharCount(text.length); // Uppdatera teckenräknaren när användaren skriver + }; + const handleSubmit = (event) => { event.preventDefault(); if (taskText.trim()) { - addTask(taskText); // Add the new task to the list - setTaskText(""); // Clear input field after submission + addTask(taskText); + setTaskText(""); + setCharCount(0); // Återställ räknaren när uppgiften skickas } }; return ( -
- {/* Input Field */} - setTaskText(event.target.value)} - className="w-full rounded-full border border-gray-300 p-3 focus:outline-none focus:ring focus:ring-pink-500 h-12 pr-16" // Add padding-right for space - placeholder="What to do?" - /> - - {/* Submit Button */} - + + + + +
+ + {/* Teckenräknare */} +
+ {charCount} / 40 +
); }; diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx index 131ffd5f..a267bdd7 100644 --- a/src/components/Todo.jsx +++ b/src/components/Todo.jsx @@ -3,11 +3,10 @@ import TodoItems from "./TodoItems"; import AddTask from "./AddTask"; const Todo = () => { - const { tasks } = useTaskStore(); // Access the tasks from the Zustand store - + const { tasks } = useTaskStore(); const totalToDos = tasks.length; const uncompletedToDos = tasks.filter((task) => !task.completed).length; - const completedToDos = tasks.filter((task) => task.completed).length; // Calculate completed to-dos + const completedToDos = tasks.filter((task) => task.completed).length; return (
@@ -19,17 +18,17 @@ const Todo = () => {

Let's do it!

- {/* Assuming AddTask component for adding new tasks */} + - {/* Render tasks */} -
- {tasks.map((task) => ( - - ))} +
+ {tasks.length === 0 ? ( +

Add some tasks to get started!

+ ) : ( + tasks.map((task) => ) + )}
-
- {/* Total to-dos */} +
{

- {/* Completed to-dos */}
@@ -63,11 +61,10 @@ const Todo = () => {

- {/* Uncompleted to-dos */}
{ />

- {uncompletedToDos} {uncompletedToDos === 1 ? "to-do" : "to-dos"} {uncompletedToDos === 1 ? "needs" : "need"} your attention! + + {uncompletedToDos} + {uncompletedToDos === 1 ? "to-do" : "to-dos"} {uncompletedToDos === 1 ? "needs" : "need"} your attention!

diff --git a/src/components/TodoItems.jsx b/src/components/TodoItems.jsx index decc5eac..19de876b 100644 --- a/src/components/TodoItems.jsx +++ b/src/components/TodoItems.jsx @@ -5,33 +5,29 @@ const TodoItems = ({ id, text, completed }) => { const removeTask = useTaskStore((state) => state.removeTask); return ( -
- {/* Checkbox */} +
toggleTask(id)} - className={`h-6 w-6 rounded border-2 appearance-none relative focus:ring-0 focus:outline-none - peer - ${completed ? 'bg-green-500 border-green-500' : 'bg-white border-slate-800'} - hover:border-green-00`} + className={`h-6 w-6 rounded border-2 appearance-none relative focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:outline-none peer ${completed ? 'bg-green-500 border-green-500' : 'bg-white border-slate-800'} hover:border-green-500`} + aria-labelledby={`task-label-${id}`} /> + - - - {/* Text */} -

+

{text}

- {/* Delete button */} @@ -39,6 +35,4 @@ const TodoItems = ({ id, text, completed }) => { ); }; - - export default TodoItems; diff --git a/src/index.css b/src/index.css index 01e92264..3bb0a855 100644 --- a/src/index.css +++ b/src/index.css @@ -1,21 +1,40 @@ +@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Pavanam&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; -/* Your custom styles */ +body { + font-family: "Pavanam", sans-serif; +} + +h1 { + font-weight: 700; + font-size: 2.5rem; + /* Justera storlek efter behov */ +} + +p { + font-weight: 400; + font-size: 1rem; + /* Standardstorlek */ + line-height: 1.6; + /* För bättre läsbarhet */ +} + +span { + font-weight: 400; + font-size: 0.875rem; + /* Justera för små textstycken */ +} + input[type="checkbox"] { position: relative; - /* Ensure we can position the pseudo-element relative to the checkbox */ width: 24px; - /* Adjust the size of the checkbox if needed */ height: 24px; - /* Adjust the size of the checkbox if needed */ - border: 2px solid #ddd; - /* Default border for the checkbox */ + border: 2px solid black; border-radius: 4px; - /* Optional: rounded corners */ background-color: white; - /* Background color for unchecked state */ } input[type="checkbox"]:checked { @@ -25,19 +44,12 @@ input[type="checkbox"]:checked { input[type="checkbox"]:checked::after { content: '\2713'; - /* Unicode character for checkmark */ color: #10b981; font-size: 16px; - /* Adjust font size for the checkmark */ font-weight: bold; - /* Make the checkmark bold */ position: absolute; - /* Position the checkmark absolutely within the checkbox */ top: 50%; - /* Vertically center the checkmark */ left: 50%; - /* Horizontally center the checkmark */ transform: translate(-50%, -50%); - /* Adjust to truly center the checkmark */ line-height: 1; } \ No newline at end of file diff --git a/src/store/taskStore.js b/src/store/taskStore.js index ba213c0d..5a5ea21c 100644 --- a/src/store/taskStore.js +++ b/src/store/taskStore.js @@ -1,11 +1,29 @@ import { create } from 'zustand'; +const getTasksFromLocalStorage = () => { + try { + const tasks = localStorage.getItem("tasks"); + return tasks ? JSON.parse(tasks) : []; + } catch (e) { + console.error("Error reading tasks from localStorage:", e); + return []; + } +}; + +const saveTasksToLocalStorage = (tasks) => { + try { + localStorage.setItem("tasks", JSON.stringify(tasks)); + } catch (e) { + console.error("Error saving tasks to localStorage:", e); + } +}; + export const useTaskStore = create((set) => ({ - tasks: JSON.parse(localStorage.getItem("tasks")) || [], // Läs från localStorage eller använd tom lista + tasks: getTasksFromLocalStorage(), addTask: (text) => set((state) => { const newTasks = [...state.tasks, { id: Date.now(), text, completed: false }]; - localStorage.setItem("tasks", JSON.stringify(newTasks)); // Spara uppgifterna i localStorage + saveTasksToLocalStorage(newTasks); return { tasks: newTasks }; }), toggleTask: (id) => @@ -13,13 +31,13 @@ export const useTaskStore = create((set) => ({ const newTasks = state.tasks.map((task) => task.id === id ? { ...task, completed: !task.completed } : task ); - localStorage.setItem("tasks", JSON.stringify(newTasks)); // Spara uppdaterade uppgifter i localStorage + saveTasksToLocalStorage(newTasks); return { tasks: newTasks }; }), removeTask: (id) => set((state) => { const newTasks = state.tasks.filter((task) => task.id !== id); - localStorage.setItem("tasks", JSON.stringify(newTasks)); // Spara de kvarvarande uppgifterna i localStorage + saveTasksToLocalStorage(newTasks); return { tasks: newTasks }; }), })); diff --git a/tailwind.config.js b/tailwind.config.js index b92886de..8119ec76 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,14 @@ module.exports = { content: [ - "./index.html", // Ensure this file is included - "./src/**/*.{js,jsx,ts,tsx}", // Ensure this pattern matches your source files + "./index.html", + "./src/**/*.{js,jsx,ts,tsx}", ], theme: { - extend: {}, + extend: { + fontFamily: { + caveat: ['Caveat', 'cursive'], + }, + }, }, plugins: [], }; From 2e12f14104a2a5f0a6a62139b05d7b5639afbb23 Mon Sep 17 00:00:00 2001 From: Nella Date: Sun, 24 Nov 2024 14:35:13 +0100 Subject: [PATCH 7/8] README and final styling --- README.md | 19 +++++++++++++++---- src/App.jsx | 7 ++----- src/assets/banner.svg | 18 ------------------ src/components/AddTask.jsx | 9 ++++----- src/components/Todo.jsx | 2 +- src/index.css | 4 ---- src/store/todoStore.js | 1 - 7 files changed, 22 insertions(+), 38 deletions(-) delete mode 100644 src/assets/banner.svg diff --git a/README.md b/README.md index 36daf341..addf2549 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,21 @@ # Todo - useContext Project -Replace this readme with your own information about your project. +Todo App +This Todo app is built using React and Zustand for state management. It features a responsive design with a mobile-first approach, and provides users with an interactive and organized task list. + +Key Technologies & Libraries: +React: Used for building the user interface with reusable components. +Zustand: A lightweight state management library for managing tasks globally. +Tailwind CSS: For styling and responsive design. +React Hooks: Utilized useState, useEffect, and custom hooks to manage state and side effects in the application. +Features: +Add, complete, and delete tasks. +Displays total, completed, and uncompleted tasks with dynamic updates. +Mobile-first design with responsive layout adjustments for tablets and laptops. +This app showcases my skills in state management with Zustand, React hooks, and responsive design principles. + -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## Getting Started with the Project @@ -27,8 +39,7 @@ npm i && code . && npm run dev Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? ### View it live - -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://nella-todo.netlify.app/ ## Instructions diff --git a/src/App.jsx b/src/App.jsx index be1a64d9..9160010c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,9 @@ import Todo from "./components/Todo"; - - export const App = () => { return ( -
+
- ) + ); }; - diff --git a/src/assets/banner.svg b/src/assets/banner.svg deleted file mode 100644 index 2bc0acbb..00000000 --- a/src/assets/banner.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index ff6b7d61..b8d959eb 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -3,13 +3,13 @@ import { useTaskStore } from "../store/taskStore"; const AddTask = () => { const [taskText, setTaskText] = useState(""); - const [charCount, setCharCount] = useState(0); // State för teckenräknaren + const [charCount, setCharCount] = useState(0); const addTask = useTaskStore((state) => state.addTask); const handleChange = (event) => { const text = event.target.value; setTaskText(text); - setCharCount(text.length); // Uppdatera teckenräknaren när användaren skriver + setCharCount(text.length); }; const handleSubmit = (event) => { @@ -17,7 +17,7 @@ const AddTask = () => { if (taskText.trim()) { addTask(taskText); setTaskText(""); - setCharCount(0); // Återställ räknaren när uppgiften skickas + setCharCount(0); } }; @@ -53,8 +53,7 @@ const AddTask = () => {
- {/* Teckenräknare */} -
+
{charCount} / 40
diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx index a267bdd7..78f05187 100644 --- a/src/components/Todo.jsx +++ b/src/components/Todo.jsx @@ -9,7 +9,7 @@ const Todo = () => { const completedToDos = tasks.filter((task) => task.completed).length; return ( -
+
diff --git a/src/index.css b/src/index.css index 3bb0a855..d396d43c 100644 --- a/src/index.css +++ b/src/index.css @@ -11,21 +11,17 @@ body { h1 { font-weight: 700; font-size: 2.5rem; - /* Justera storlek efter behov */ } p { font-weight: 400; font-size: 1rem; - /* Standardstorlek */ line-height: 1.6; - /* För bättre läsbarhet */ } span { font-weight: 400; font-size: 0.875rem; - /* Justera för små textstycken */ } input[type="checkbox"] { diff --git a/src/store/todoStore.js b/src/store/todoStore.js index d4e41838..b1ea1670 100644 --- a/src/store/todoStore.js +++ b/src/store/todoStore.js @@ -1,4 +1,3 @@ -// src/store/todoStore.js import { create } from "zustand"; const useTodoStore = create((set) => ({ From ac150fb70edec469c5fbf6a34c7a0b311ab86614 Mon Sep 17 00:00:00 2001 From: Nella Date: Sun, 24 Nov 2024 14:40:57 +0100 Subject: [PATCH 8/8] aria label button --- src/components/AddTask.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index b8d959eb..c4af429f 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -34,6 +34,7 @@ const AddTask = () => { />