diff --git a/.gitignore b/.gitignore index 4d29575..f3b9212 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ # misc .DS_Store +.idea .env.local .env.development.local .env.test.local diff --git a/package-lock.json b/package-lock.json index acab959..d2ebed3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,12 @@ "@emotion/styled": "^11.11.0", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", + "axios": "^1.6.7", "react": "^18.2.0", "react-color": "^2.19.3", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-redux": "^9.1.0", + "redux": "^5.0.1" }, "devDependencies": { "@pretty-cozy/eslint-config": "^0.2.0", @@ -1326,14 +1329,14 @@ }, "node_modules/@types/prop-types": { "version": "15.7.3", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { - "version": "18.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz", - "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==", - "dev": true, + "version": "18.2.59", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.59.tgz", + "integrity": "sha512-DE+F6BYEC8VtajY85Qr7mmhTd/79rJKIHCg99MU9SWPB4xvLb6D1za2vYflgZfmPqQVEr6UqJTnLXEwzpVPuOg==", + "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1369,7 +1372,7 @@ }, "node_modules/@types/scheduler": { "version": "0.16.1", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/semver": { @@ -1378,6 +1381,11 @@ "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", "dev": true }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", @@ -2106,6 +2114,11 @@ "lodash": "^4.17.14" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -2127,6 +2140,16 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -2382,6 +2405,17 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "2.20.3", "dev": true, @@ -2647,6 +2681,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -3807,6 +3849,25 @@ "dev": true, "peer": true }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -3816,6 +3877,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs-extra": { "version": "8.1.0", "dev": true, @@ -4848,6 +4922,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", @@ -5404,6 +5497,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -5477,6 +5575,32 @@ "version": "16.13.1", "license": "MIT" }, + "node_modules/react-redux": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", + "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "react-native": ">=0.69", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/reactcss": { "version": "1.2.3", "license": "MIT", @@ -5496,6 +5620,11 @@ "node": ">=8.10.0" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, "node_modules/regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", @@ -6268,6 +6397,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/vite": { "version": "4.4.8", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.8.tgz", @@ -7590,13 +7727,13 @@ }, "@types/prop-types": { "version": "15.7.3", - "dev": true + "devOptional": true }, "@types/react": { - "version": "18.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz", - "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==", - "dev": true, + "version": "18.2.59", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.59.tgz", + "integrity": "sha512-DE+F6BYEC8VtajY85Qr7mmhTd/79rJKIHCg99MU9SWPB4xvLb6D1za2vYflgZfmPqQVEr6UqJTnLXEwzpVPuOg==", + "devOptional": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -7631,7 +7768,7 @@ }, "@types/scheduler": { "version": "0.16.1", - "dev": true + "devOptional": true }, "@types/semver": { "version": "7.5.0", @@ -7639,6 +7776,11 @@ "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", "dev": true }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@typescript-eslint/eslint-plugin": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", @@ -8102,6 +8244,11 @@ "lodash": "^4.17.14" } }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -8114,6 +8261,16 @@ "integrity": "sha512-b1WlTV8+XKLj9gZy2DZXgQiyDp9xkkoe2a6U6UbYccScq2wgH/YwCeI2/Jq2mgo0HzQxqJOjWZBLeA/mqsk5Mg==", "dev": true }, + "axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "requires": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -8289,6 +8446,14 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "requires": { + "delayed-stream": "~1.0.0" + } + }, "commander": { "version": "2.20.3", "dev": true @@ -8477,6 +8642,11 @@ "object-keys": "^1.1.1" } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, "dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -9347,6 +9517,11 @@ "dev": true, "peer": true }, + "follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==" + }, "for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -9356,6 +9531,16 @@ "is-callable": "^1.1.3" } }, + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, "fs-extra": { "version": "8.1.0", "dev": true, @@ -10073,6 +10258,19 @@ "picomatch": "^2.3.1" } }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "requires": { + "mime-db": "1.52.0" + } + }, "mimic-fn": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", @@ -10452,6 +10650,11 @@ "react-is": "^16.13.1" } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -10497,6 +10700,15 @@ "react-is": { "version": "16.13.1" }, + "react-redux": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", + "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==", + "requires": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + } + }, "reactcss": { "version": "1.2.3", "requires": { @@ -10512,6 +10724,11 @@ "picomatch": "^2.2.1" } }, + "redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, "regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", @@ -11051,6 +11268,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "vite": { "version": "4.4.8", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.8.tgz", diff --git a/package.json b/package.json index 375b0f9..a019133 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,12 @@ "@emotion/styled": "^11.11.0", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", + "axios": "^1.6.7", "react": "^18.2.0", "react-color": "^2.19.3", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-redux": "^9.1.0", + "redux": "^5.0.1" }, "devDependencies": { "@pretty-cozy/eslint-config": "^0.2.0", diff --git a/src/App.tsx b/src/App.tsx index a8d7d8e..a1d56bd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,8 +2,11 @@ import React from "react" import "./base/variables.css" +import { Provider } from "react-redux" + import * as Settings from "./Startpage/Settings/settingsHandler" import { Startpage } from "./Startpage/Startpage" +import { store } from "./store/root.store" const App = () => { //Apply colors @@ -13,7 +16,11 @@ const App = () => { root.style.setProperty(key, colors[key]) }) - return + return ( + + + + ) } export default App diff --git a/src/Startpage/LinkContainer/Accordion/Accordion.tsx b/src/Startpage/LinkContainer/Accordion/Accordion.tsx index e4b99b3..d4e63e4 100644 --- a/src/Startpage/LinkContainer/Accordion/Accordion.tsx +++ b/src/Startpage/LinkContainer/Accordion/Accordion.tsx @@ -12,6 +12,13 @@ const StyledAccordionContainer = styled.div` margin-left: 100px; display: flex; width: calc(100% - 400px - 100px); + @media (max-width: 500px) { + width: 100%; + flex-direction: column; + margin-left: 0; + align-items: flex-start; + justify-content: flex-start; + } ` export const AccordionContainer = ({ children }: PropsWithChildren) => ( @@ -26,6 +33,15 @@ const StyledAccordionGroup = styled.div` border-right: 3px solid var(--default-color); :first-of-type { border-left: 3px solid var(--default-color); + @media (max-width: 500px) { + border: 0; + } + } + @media (max-width: 500px) { + width: 100%; + height: fit-content; + flex-direction: column; + box-sizing: border-box; } ` @@ -35,8 +51,13 @@ const AccordionContent = styled.div<{ width: number }>` display: flex; flex-direction: column; justify-content: center; - overflow: hidden; + overflow: auto; transition: 0.3s; + + @media (max-width: 700px) { + height: ${({ width }) => `${width}px`}; + transition: 0s; + } ` const AccordionTitleWrapper = styled.button<{ active: boolean }>` @@ -50,15 +71,28 @@ const AccordionTitleWrapper = styled.button<{ active: boolean }>` align-items: center; justify-content: center; opacity: 0.8; + @media (max-width: 700px) { + width: 100%; + height: 80px; + } + position: relative; + ::-webkit-scrollbar { + width: 5px; + } ::before { content: ""; position: absolute; - bottom: 0px; + bottom: 0; width: 100%; height: ${({ active }) => (active ? "390px" : "0")}; background-color: var(--accent-color); transition: ${({ active }) => (active ? "1s" : ".5s")}; + @media (max-width: 700px) { + height: 100%; + width: ${({ active }) => (active ? "100%" : "0")}; + overflow: hidden; + } } :hover, :focus { @@ -88,6 +122,11 @@ const AccordionTitleWrapper = styled.button<{ active: boolean }>` top: ${({ active }) => (active ? "0px" : "350px")}; overflow: hidden; transition: ${({ active }) => (active ? "1s" : ".5s")}; + @media (max-width: 700px) { + right: -20px; + top: 10px; + transform: rotate(90deg); + } ::before { content: ""; width: 180px; @@ -100,6 +139,9 @@ const AccordionTitleWrapper = styled.button<{ active: boolean }>` border-radius: 37%; background-color: var(--bg-color); animation: wave 12s infinite cubic-bezier(0.71, 0.33, 0.33, 0.68); + @media (max-width: 700px) { + display: ${({ active }) => (active ? "flex" : "none")}; + } } @keyframes wave { from { @@ -138,6 +180,9 @@ const AccordionTitle = styled.h1<{ title: string; active: boolean }>` active ? "var(--bg-color)" : "var(--default-color)"}; transition: 0.5s; letter-spacing: 5px; + @media (max-width: 700px) { + transform: rotate(0); + } ` type groupProps = PropsWithChildren<{ diff --git a/src/Startpage/LinkContainer/LinkContainer.tsx b/src/Startpage/LinkContainer/LinkContainer.tsx index f1c70e9..6c7cdbd 100644 --- a/src/Startpage/LinkContainer/LinkContainer.tsx +++ b/src/Startpage/LinkContainer/LinkContainer.tsx @@ -1,17 +1,30 @@ -import React, { MouseEvent, useState } from "react" +import React, { MouseEvent, useEffect, useState } from "react" import styled from "@emotion/styled" +import { useSelector } from "react-redux" import { AccordionContainer, AccordionGroup } from "./Accordion/Accordion" +import { RootStore } from "../../store/root.store" import * as Settings from "../Settings/settingsHandler" -const LinkItem = styled.a` +interface LinkItemPropsInterface { + active?: boolean +} + +const LinkItem = styled.a` width: fit-content; white-space: nowrap; position: relative; padding: 10px 0 10px 30px; font-size: 1rem; + @media (max-width: 700px) { + width: 100%; + text-align: left; + } + + color: ${props => props.active && "#fff"}; + ::before { position: absolute; left: 0px; @@ -24,6 +37,9 @@ const LinkItem = styled.a` transition: 0.5s; opacity: 0.7; } + :visited { + color: ${props => (props.active ? "#fff" : "inherit")}; + } :hover, :focus { @@ -35,7 +51,7 @@ const LinkItem = styled.a` export const LinkContainer = () => { const [active, setActive] = useState(0) - const linkGroups = Settings.Links.getWithFallback() + const [linkGroups, setLinkGroups] = useState(Settings.Links.getWithFallback()) const middleMouseHandler = (event: MouseEvent, groupIndex: number) => { setActive(groupIndex) @@ -45,6 +61,31 @@ export const LinkContainer = () => { }) } } + const search = useSelector((state: RootStore) => state.search).search + + const selectSuggested = () => { + const newData = [...linkGroups] + newData.forEach((group, groupIndex) => { + group.links.forEach(link => { + if (search === "") link.active = false + else { + if ( + link.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()) + ) { + link.active = true + setActive(groupIndex) + } else { + link.active = false + } + } + }) + }) + setLinkGroups(newData) + } + + useEffect(() => { + selectSuggested() + }, [search]) return ( @@ -61,6 +102,7 @@ export const LinkContainer = () => { tabIndex={active !== groupIndex ? -1 : undefined} key={link.label} href={link.value} + active={link.active} > {link.label} diff --git a/src/Startpage/Searchbar/Searchbar.tsx b/src/Startpage/Searchbar/Searchbar.tsx index 118ac7b..ec6e492 100644 --- a/src/Startpage/Searchbar/Searchbar.tsx +++ b/src/Startpage/Searchbar/Searchbar.tsx @@ -1,24 +1,89 @@ -import React from "react" +import React, { useEffect, useState } from "react" import styled from "@emotion/styled" +import axios from "axios" +import { useDispatch, useSelector } from "react-redux" import duckduckgo from "../../data/pictures/duckduckgo.svg" import ecosia from "../../data/pictures/ecosia.svg" import google from "../../data/pictures/google.svg" import qwant from "../../data/pictures/qwant.svg" +import { RootStore } from "../../store/root.store" import * as Settings from "../Settings/settingsHandler" export const queryToken = "{{query}}" -const StyledSearchbarContainer = styled.div` +const StyledWrapper = styled.div` position: absolute; left: calc(100px - 2.9rem - 10px); right: 100px; - bottom: 40px; + bottom: 60px; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + @media (max-width: 700px) { + position: relative; + left: 0; + bottom: 0; + right: 0; + } +` + +const SearchWrapper = styled.div` + display: flex; + flex-direction: row; + padding-bottom: 20px; + width: 100%; + overflow: hidden; + align-items: center; + justify-content: center; + gap: 10px; + + @media (max-width: 700px) { + gap: 5px; + flex-direction: column; + } + + > button { + cursor: pointer; + color: var(--default-color); + background: none; + border: none; + outline: none; + box-shadow: none; + font-size: 30px; + width: 19%; + opacity: 0.5; + text-align: center; + padding: 0 20px; + display: flex; + justify-content: center; + align-items: center; + @media (max-width: 700px) { + font-size: 20px; + width: 100%; + justify-content: left; + } + } + + > button:hover { + opacity: 1; + } +` + +interface SuggestedResult { + phrase: string +} + +const StyledSearchbarContainer = styled.div` height: min-content; display: flex; align-items: flex-start; justify-content: center; + @media (max-width: 700px) { + align-items: center; + } ` const StyledSearchbar = styled.input` width: 100%; @@ -40,6 +105,9 @@ const StyledSearchbar = styled.input` opacity: 1; outline: none; } + @media (max-width: 700px) { + font-size: 20px; + } ` const SearchIcon = styled.div<{ src: string }>` @@ -57,6 +125,44 @@ export const Searchbar = () => { const searchSettings = Settings.Search.getWithFallback() const engine: string = searchSettings.engine || "duckduckgo.com/" + const [suggested, setSuggested] = useState([]) + + const dispatch = useDispatch() + const search: string = useSelector((state: RootStore) => state.search).search + + const getAutocomplete = async (query: string) => { + try { + const { data } = await axios.get( + "/search" + query.replaceAll(" ", "%20"), + { + headers: { + "Access-Control-Allow-Origin": "*", + }, + } + ) + if (data) { + const parsed: SuggestedResult[] = [] + data.forEach((item: SuggestedResult) => { + const parse = item.phrase.substr(item.phrase.indexOf(" ") + 1) + parsed.push({ phrase: parse }) + }) + setSuggested(parsed.splice(0, 5)) + } + console.log(data) + } catch (e) { + console.error(e) + } + } + + //timeout for suggest request + useEffect(() => { + if (search === "") return + const delay = setTimeout(() => { + getAutocomplete(search).catch(e => console.log(e)) + }, 250) + return () => clearTimeout(delay) + }, [search]) + let searchSymbol = undefined if (engine.includes("duckduckgo")) searchSymbol = duckduckgo else if (engine.includes("google")) searchSymbol = google @@ -74,16 +180,35 @@ export const Searchbar = () => { } } + const inputHandler = (str: string) => { + dispatch({ type: "SEARCH_UPDATE", payload: { search: str } }) + } + return ( - - {searchSymbol && } - e.which === 13 && redirectToSearch(e.currentTarget.value)} - // eslint-disable-next-line jsx-a11y/no-autofocus - autoFocus - /> - + + + {suggested.map((item, index) => { + const id = String(index) + return ( + + ) + })} + + + {searchSymbol && } + inputHandler(e.currentTarget.value)} + onKeyUp={e => + e.which === 13 && redirectToSearch(e.currentTarget.value) + } + // eslint-disable-next-line jsx-a11y/no-autofocus + autoFocus + /> + + ) } diff --git a/src/Startpage/Startpage.tsx b/src/Startpage/Startpage.tsx index 8f8193b..f59a458 100644 --- a/src/Startpage/Startpage.tsx +++ b/src/Startpage/Startpage.tsx @@ -12,16 +12,26 @@ const Wrapper = styled.div` max-width: 1920px; height: 100%; margin: auto; - position: relative; ` const StyledStartpage = styled.div` - padding: 0px 100px; + padding: 100px 100px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: calc(100% - 100px); + @media (max-width: 500px) { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-bottom: 100px; + padding-left: 0; + padding-right: 0; + box-sizing: border-box; + gap: 20px; + } ` const Image = styled.img` @@ -30,8 +40,11 @@ const Image = styled.img` border: 2px solid var(--default-color); padding: 10px; object-fit: cover; - animation: circling-shadow 4s ease 0s infinite normal; + @media (max-width: 500px) { + height: 100px; + width: 100px; + } ` export const Startpage = () => { @@ -40,12 +53,10 @@ export const Startpage = () => { return ( -
- setImg(images[0].value)} /> -
+ setImg(images[0].value)} /> + - ) diff --git a/src/base/index.css b/src/base/index.css index eac1fc8..d8ad979 100644 --- a/src/base/index.css +++ b/src/base/index.css @@ -1,5 +1,5 @@ -@import "./variables.css"; -@import "./animations.css"; +@import "./variables.css"; +@import "./animations.css"; /*********************** * Idk what this does. * @@ -35,14 +35,12 @@ body * { ********************/ html, body, #root { - height:100%; width:100%; } body { margin: 0; background-color: var(--bg-color); color: var(--default-color); - overflow: hidden; } p { margin:0px @@ -57,7 +55,8 @@ a, a:visited, a:active { ********************/ ::-webkit-scrollbar { /* width */ - width: 10px; + width: 5px; + height: 3px; } ::-webkit-scrollbar-thumb { diff --git a/src/data/data.ts b/src/data/data.ts index 06ade01..09cdb46 100644 --- a/src/data/data.ts +++ b/src/data/data.ts @@ -1,363 +1,364 @@ -import pic_1 from "./pictures/pic_1.jpg" -import pic_2 from "./pictures/pic_2.jpg" -import pic_3 from "./pictures/pic_3.jpg" -import pic_4 from "./pictures/pic_4.jpg" -import pic_5 from "./pictures/pic_5.jpg" -import pic_6 from "./pictures/pic_6.jpg" -import pic_7 from "./pictures/pic_7.jpg" -import pic_8 from "./pictures/pic_8.png" -import { queryToken } from "../Startpage/Searchbar/Searchbar" - -export interface dataElem { - label: string - value: string -} - -export interface linkGroup { - title: string - links: dataElem[] -} - -/* eslint-disable */ -/* -──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▀▀▀▀▀▌ -───▄▄██▌█ BEEP BEEP -▄▄▄▌▐██▌█ GAY PORN DELIVERY -███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄​▄▄▄▄▄▄▌ -▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▀▀▀(@)▀ -*/ -/* eslint-enable */ - -export const links: linkGroup[] = [ - { - title: "Reddit", - links: [ - { - label: "r/startpages", - value: "https://www.reddit.com/r/startpages/", - }, - { - label: "r/unixporn", - value: "https://www.reddit.com/r/unixporn/", - }, - { - label: "r/rainmeter", - value: "https://www.reddit.com/r/rainmeter/", - }, - { - label: "r/AnimalsBeingDerps", - value: "https://www.reddit.com/r/AnimalsBeingDerps/", - }, - ], - }, - { - title: "3D Modelling", - links: [ - { - label: "Blender", - value: "https://www.blender.org/", - }, - { - label: "BlenderGuru", - value: "https://www.blenderguru.com/", - }, - { - label: "Poliigon", - value: "https://www.poliigon.com/", - }, - { - label: "Blender tutorial", - value: - "https://www.youtube.com/watch?v=NyJWoyVx_XI&list=PLjEaoINr3zgEq0u2MzVgAaHEBt--xLB6U", - }, - { - label: "The other Blender tutorial", - value: - "https://www.youtube.com/watch?v=bpvh-9H8S1g&list=PL8eKBkZzqDiU-qcoaghCz04sMitC1yx6k&index=1", - }, - ], - }, - { - title: "Design", - links: [ - { - label: "PixlrX", - value: "https://pixlr.com/x/", - }, - { - label: "AI Image Enlarger", - value: "https://bigjpg.com/en", - }, - { - label: "Img to Svg Converter", - value: "https://picsvg.com/", - }, - { - label: "Affinity", - value: "https://affinity.serif.com/en-us/tutorials/designer/desktop/", - }, - { - label: "Affinity - YT", - value: "https://www.youtube.com/c/AffinityRevolution/playlists", - }, - ], - }, - { - title: "Music", - links: [ - { - label: "i wanna be a cowboy", - value: "https://www.youtube.com/watch?v=8zWz92f_HGs", - }, - { - label: "let the bodies hit the floor", - value: "https://www.youtube.com/watch?v=b--VKaCB9u0", - }, - { - label: "Nobody Kanna Cross It", - value: "https://www.youtube.com/watch?v=2wqTnwJGvtc", - }, - { - label: "Smug Dancin", - value: "https://www.youtube.com/watch?v=eNZ9Od1jQ4Q", - }, - { - label: "Utamaru - The Sanctified Mind Cover", - value: "https://www.youtube.com/watch?v=MHlJKLlS07U", - }, - ], - }, - { - title: "Sauce", - links: [ - { - label: "Pictures - DeathAndMilk", - value: "https://www.instagram.com/deathandmilk_/", - }, - { - label: "Icons - FontAwesome", - value: "https://fontawesome.com/icons", - }, - { - label: "Text Flicker - CodeMyUI", - value: - "https://codemyui.com/crt-screen-text-flicker-animation-in-pure-css/", - }, - { - label: "Wave Animation - mburakerman", - value: "https://codepen.io/mburakerman/pen/eRZZEv", - }, - { - label: "Da real sauce ԅ(♡﹃♡ԅ)", - value: "https://www.youtube.com/watch?v=qr89xoZyE1g", - }, - { - label: "Even more real sauce ( ͡° ͜ʖ ͡°)", - value: "https://www.youtube.com/watch?v=VLhJOd_TFiI", - }, - ], - }, -] - -export const images: dataElem[] = [ - { label: "pic_1", value: pic_1 }, - { label: "pic_2", value: pic_2 }, - { label: "pic_3", value: pic_3 }, - { label: "pic_4", value: pic_4 }, - { label: "pic_5", value: pic_5 }, - { label: "pic_6", value: pic_6 }, - { label: "pic_7", value: pic_7 }, - { label: "pic_8", value: pic_8 }, -] - -export const searchEngines: dataElem[] = [ - { - label: "DuckDuckGo", - value: `https://duckduckgo.com/?q=${queryToken}`, - }, - { - label: "Google", - value: `https://www.google.com/search?q=${queryToken}`, - }, - { - label: "Qwant", - value: `https://qwant.com/?q=${queryToken}`, - }, - { - label: "Ecosia", - value: `https://ecosia.org/search/?q=${queryToken}`, - }, -] - -export type FastForwards = Record - -export interface Search { - engine: string - fastForward: FastForwards -} - -export const searchSettings: Search = { - engine: searchEngines[0].value, - fastForward: { - deepl: "https://deepl.com/", - maps: "https://google.de/maps/", - reddit: "https://reddit.com/", - github: "https://github.com/", - gitlab: "https://gitlab.com/", - youtube: "https://youtube.com/", - }, -} - -export interface colorsType { - [key: string]: string - "--bg-color": string - "--default-color": string - "--accent-color": string - "--accent-color2": string -} - -export interface Theme { - name: string - colors: colorsType - image: string -} - -export const themes: Theme[] = [ - { - name: "Catppuccin", - image: - "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png", - colors: { - "--bg-color": "#24273A", - "--default-color": "#CAD3F5", - "--accent-color": "#C6A0F6", - "--accent-color2": "#8AADF4", - }, - }, - { - name: "DeathAndMilk", - image: pic_1, - colors: { - "--bg-color": "#2E2E2E", - "--default-color": "#E6E6E6", - "--accent-color": "#FFB4E6", - "--accent-color2": "#B4FFE6", - }, - }, - { - name: "Pop!OS", - image: - "https://oswallpapers.com/wp-content/uploads/2019/04/kate-hazen-unleash-your-robot.jpg", - colors: { - "--bg-color": "#333136", - "--default-color": "#2BC5EB", - "--accent-color": "#FCD307", - "--accent-color2": "#2BC5EB", - }, - }, - { - name: "Dark Souls", - image: - "https://i.pinimg.com/originals/16/74/db/1674dbae45cd38f3d3b4c00dc8616bd7.gif", - colors: { - "--bg-color": "#32323C", - "--default-color": "#A0A08C", - "--accent-color": "#9A6650", - "--accent-color2": "#461E28", - }, - }, - { - name: "S.E.Lain", - image: - "https://64.media.tumblr.com/54a945edd2641e20859d6f6537cd7423/tumblr_pwa4bogz4N1qze3hdo2_r1_500.gifv", - colors: { - "--bg-color": "#0a1a25", - "--default-color": "#a6b7ab", - "--accent-color": "#94656b", - "--accent-color2": "#57182e", - }, - }, - { - name: "Kitties", - image: - "https://64.media.tumblr.com/5a232d5c0999d02388d78e5c1025f94f/0572516693bf4014-3d/s500x750/0306dc89b657093529aa3ce96e64b9c43572e901.gifv", - colors: { - "--bg-color": "#495662", - "--default-color": "#d1f1fa", - "--accent-color": "#80aad4", - "--accent-color2": "#e8a9b7", - }, - }, - { - name: "pretty chill", - image: - "https://e4p7c9i3.stackpathcdn.com/wp-content/uploads/2019/05/tumblr_oymsnbT0111vjxiz1o1_1280.gif?iv=165", - colors: { - "--bg-color": "#397d76", - "--default-color": "#f1daba", - "--accent-color": "#c5bdb5", - "--accent-color2": "#93a662", - }, - }, - { - name: "Tartarus", - image: - "https://64.media.tumblr.com/8de9e4d31a132f7617ecc05e6a0f8807/tumblr_nd048m6QFH1tqptlzo1_500.gifv", - colors: { - "--bg-color": "#282828", - "--default-color": "#D4BE98", - "--accent-color": "#7DAEA3", - "--accent-color2": "#A9B665", - }, - }, - { - name: "Pastel Aesthetic", - image: "https://i.imgur.com/bZHurZn.jpeg", - colors: { - "--bg-color": "#2E2E2E", - "--default-color": "#F3C9CB", - "--accent-color": "#6D79BF", - "--accent-color2": "#FBECEF", - }, - }, - { - name: "Bohemian", - image: "https://i.imgur.com/gcZ6fmk.jpeg", - colors: { - "--bg-color": "#2E2E2E", - "--default-color": "#D6B29A", - "--accent-color": "#B35000", - "--accent-color2": "#FBECEF", - }, - }, - { - name: "Modern Boho", - image: "https://i.imgur.com/HkEcwGl.jpeg", - colors: { - "--bg-color": "#2E2E2E", - "--default-color": "#C66B3C", - "--accent-color": "#F6BC7C", - "--accent-color2": "#54573C", - }, - }, - { - name: "Gruvbox Inspired Green", - image: "https://i.imgur.com/ISjs7cg.jpeg", - colors: { - "--bg-color": "#2E2E2E", - "--default-color": "#CC9A52", - "--accent-color": "#647D44", - "--accent-color2": "#FCE4B4", - }, - }, - { - name: "Beach", - image: "https://i.imgur.com/gcW1jul.jpeg", - colors: { - "--bg-color": "#2E2E2E", - "--default-color": "#E3C9BC", - "--accent-color": "#91C6CC", - "--accent-color2": "#F0F8FA", - }, - }, -] +import pic_1 from "./pictures/pic_1.jpg" +import pic_2 from "./pictures/pic_2.jpg" +import pic_3 from "./pictures/pic_3.jpg" +import pic_4 from "./pictures/pic_4.jpg" +import pic_5 from "./pictures/pic_5.jpg" +import pic_6 from "./pictures/pic_6.jpg" +import pic_7 from "./pictures/pic_7.jpg" +import pic_8 from "./pictures/pic_8.png" +import { queryToken } from "../Startpage/Searchbar/Searchbar" + +export interface dataElem { + label: string + value: string + active?: boolean +} + +export interface linkGroup { + title: string + links: dataElem[] +} + +/* eslint-disable */ +/* +──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▀▀▀▀▀▌ +───▄▄██▌█ BEEP BEEP +▄▄▄▌▐██▌█ GAY PORN DELIVERY +███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄​▄▄▄▄▄▄▌ +▀(@)▀▀▀▀▀▀▀(@)(@)▀▀▀▀▀▀▀▀▀▀▀▀▀​▀▀▀▀(@)▀ +*/ +/* eslint-enable */ + +export const links: linkGroup[] = [ + { + title: "Reddit", + links: [ + { + label: "r/startpages", + value: "https://www.reddit.com/r/startpages/", + }, + { + label: "r/unixporn", + value: "https://www.reddit.com/r/unixporn/", + }, + { + label: "r/rainmeter", + value: "https://www.reddit.com/r/rainmeter/", + }, + { + label: "r/AnimalsBeingDerps", + value: "https://www.reddit.com/r/AnimalsBeingDerps/", + }, + ], + }, + { + title: "3D Modelling", + links: [ + { + label: "Blender", + value: "https://www.blender.org/", + }, + { + label: "BlenderGuru", + value: "https://www.blenderguru.com/", + }, + { + label: "Poliigon", + value: "https://www.poliigon.com/", + }, + { + label: "Blender tutorial", + value: + "https://www.youtube.com/watch?v=NyJWoyVx_XI&list=PLjEaoINr3zgEq0u2MzVgAaHEBt--xLB6U", + }, + { + label: "The other Blender tutorial", + value: + "https://www.youtube.com/watch?v=bpvh-9H8S1g&list=PL8eKBkZzqDiU-qcoaghCz04sMitC1yx6k&index=1", + }, + ], + }, + { + title: "Design", + links: [ + { + label: "PixlrX", + value: "https://pixlr.com/x/", + }, + { + label: "AI Image Enlarger", + value: "https://bigjpg.com/en", + }, + { + label: "Img to Svg Converter", + value: "https://picsvg.com/", + }, + { + label: "Affinity", + value: "https://affinity.serif.com/en-us/tutorials/designer/desktop/", + }, + { + label: "Affinity - YT", + value: "https://www.youtube.com/c/AffinityRevolution/playlists", + }, + ], + }, + { + title: "Music", + links: [ + { + label: "i wanna be a cowboy", + value: "https://www.youtube.com/watch?v=8zWz92f_HGs", + }, + { + label: "let the bodies hit the floor", + value: "https://www.youtube.com/watch?v=b--VKaCB9u0", + }, + { + label: "Nobody Kanna Cross It", + value: "https://www.youtube.com/watch?v=2wqTnwJGvtc", + }, + { + label: "Smug Dancin", + value: "https://www.youtube.com/watch?v=eNZ9Od1jQ4Q", + }, + { + label: "Utamaru - The Sanctified Mind Cover", + value: "https://www.youtube.com/watch?v=MHlJKLlS07U", + }, + ], + }, + { + title: "Sauce", + links: [ + { + label: "Pictures - DeathAndMilk", + value: "https://www.instagram.com/deathandmilk_/", + }, + { + label: "Icons - FontAwesome", + value: "https://fontawesome.com/icons", + }, + { + label: "Text Flicker - CodeMyUI", + value: + "https://codemyui.com/crt-screen-text-flicker-animation-in-pure-css/", + }, + { + label: "Wave Animation - mburakerman", + value: "https://codepen.io/mburakerman/pen/eRZZEv", + }, + { + label: "Da real sauce ԅ(♡﹃♡ԅ)", + value: "https://www.youtube.com/watch?v=qr89xoZyE1g", + }, + { + label: "Even more real sauce ( ͡° ͜ʖ ͡°)", + value: "https://www.youtube.com/watch?v=VLhJOd_TFiI", + }, + ], + }, +] + +export const images: dataElem[] = [ + { label: "pic_1", value: pic_1 }, + { label: "pic_2", value: pic_2 }, + { label: "pic_3", value: pic_3 }, + { label: "pic_4", value: pic_4 }, + { label: "pic_5", value: pic_5 }, + { label: "pic_6", value: pic_6 }, + { label: "pic_7", value: pic_7 }, + { label: "pic_8", value: pic_8 }, +] + +export const searchEngines: dataElem[] = [ + { + label: "DuckDuckGo", + value: `https://duckduckgo.com/?q=${queryToken}`, + }, + { + label: "Google", + value: `https://www.google.com/search?q=${queryToken}`, + }, + { + label: "Qwant", + value: `https://qwant.com/?q=${queryToken}`, + }, + { + label: "Ecosia", + value: `https://ecosia.org/search/?q=${queryToken}`, + }, +] + +export type FastForwards = Record + +export interface Search { + engine: string + fastForward: FastForwards +} + +export const searchSettings: Search = { + engine: searchEngines[0].value, + fastForward: { + deepl: "https://deepl.com/", + maps: "https://google.de/maps/", + reddit: "https://reddit.com/", + github: "https://github.com/", + gitlab: "https://gitlab.com/", + youtube: "https://youtube.com/", + }, +} + +export interface colorsType { + [key: string]: string + "--bg-color": string + "--default-color": string + "--accent-color": string + "--accent-color2": string +} + +export interface Theme { + name: string + colors: colorsType + image: string +} + +export const themes: Theme[] = [ + { + name: "Dark Souls", + image: + "https://i.pinimg.com/originals/16/74/db/1674dbae45cd38f3d3b4c00dc8616bd7.gif", + colors: { + "--bg-color": "#32323C", + "--default-color": "#A0A08C", + "--accent-color": "#9A6650", + "--accent-color2": "#461E28", + }, + }, + { + name: "Catppuccin", + image: + "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png", + colors: { + "--bg-color": "#24273A", + "--default-color": "#CAD3F5", + "--accent-color": "#C6A0F6", + "--accent-color2": "#8AADF4", + }, + }, + { + name: "DeathAndMilk", + image: pic_1, + colors: { + "--bg-color": "#2E2E2E", + "--default-color": "#E6E6E6", + "--accent-color": "#FFB4E6", + "--accent-color2": "#B4FFE6", + }, + }, + { + name: "Pop!OS", + image: + "https://oswallpapers.com/wp-content/uploads/2019/04/kate-hazen-unleash-your-robot.jpg", + colors: { + "--bg-color": "#333136", + "--default-color": "#2BC5EB", + "--accent-color": "#FCD307", + "--accent-color2": "#2BC5EB", + }, + }, + { + name: "S.E.Lain", + image: + "https://64.media.tumblr.com/54a945edd2641e20859d6f6537cd7423/tumblr_pwa4bogz4N1qze3hdo2_r1_500.gifv", + colors: { + "--bg-color": "#0a1a25", + "--default-color": "#a6b7ab", + "--accent-color": "#94656b", + "--accent-color2": "#57182e", + }, + }, + { + name: "Kitties", + image: + "https://64.media.tumblr.com/5a232d5c0999d02388d78e5c1025f94f/0572516693bf4014-3d/s500x750/0306dc89b657093529aa3ce96e64b9c43572e901.gifv", + colors: { + "--bg-color": "#495662", + "--default-color": "#d1f1fa", + "--accent-color": "#80aad4", + "--accent-color2": "#e8a9b7", + }, + }, + { + name: "pretty chill", + image: + "https://e4p7c9i3.stackpathcdn.com/wp-content/uploads/2019/05/tumblr_oymsnbT0111vjxiz1o1_1280.gif?iv=165", + colors: { + "--bg-color": "#397d76", + "--default-color": "#f1daba", + "--accent-color": "#c5bdb5", + "--accent-color2": "#93a662", + }, + }, + { + name: "Tartarus", + image: + "https://64.media.tumblr.com/8de9e4d31a132f7617ecc05e6a0f8807/tumblr_nd048m6QFH1tqptlzo1_500.gifv", + colors: { + "--bg-color": "#282828", + "--default-color": "#D4BE98", + "--accent-color": "#7DAEA3", + "--accent-color2": "#A9B665", + }, + }, + { + name: "Pastel Aesthetic", + image: "https://i.imgur.com/bZHurZn.jpeg", + colors: { + "--bg-color": "#2E2E2E", + "--default-color": "#F3C9CB", + "--accent-color": "#6D79BF", + "--accent-color2": "#FBECEF", + }, + }, + { + name: "Bohemian", + image: "https://i.imgur.com/gcZ6fmk.jpeg", + colors: { + "--bg-color": "#2E2E2E", + "--default-color": "#D6B29A", + "--accent-color": "#B35000", + "--accent-color2": "#FBECEF", + }, + }, + { + name: "Modern Boho", + image: "https://i.imgur.com/HkEcwGl.jpeg", + colors: { + "--bg-color": "#2E2E2E", + "--default-color": "#C66B3C", + "--accent-color": "#F6BC7C", + "--accent-color2": "#54573C", + }, + }, + { + name: "Gruvbox Inspired Green", + image: "https://i.imgur.com/ISjs7cg.jpeg", + colors: { + "--bg-color": "#2E2E2E", + "--default-color": "#CC9A52", + "--accent-color": "#647D44", + "--accent-color2": "#FCE4B4", + }, + }, + { + name: "Beach", + image: "https://i.imgur.com/gcW1jul.jpeg", + colors: { + "--bg-color": "#2E2E2E", + "--default-color": "#E3C9BC", + "--accent-color": "#91C6CC", + "--accent-color2": "#F0F8FA", + }, + }, +] diff --git a/src/store/reducers/search-reducer/search.reducer.ts b/src/store/reducers/search-reducer/search.reducer.ts new file mode 100644 index 0000000..bf1311e --- /dev/null +++ b/src/store/reducers/search-reducer/search.reducer.ts @@ -0,0 +1,34 @@ +export interface SearchInterface { + search: string +} + +export const searchInitialState: SearchInterface = { + search: "", +} + +export interface SearchAction { + type: string + payload: SearchInterface +} + +export const searchReducer = ( + state = searchInitialState, + action: SearchAction +) => { + switch (action.type) { + case "SEARCH_UPDATE": { + return { + ...state, + search: action.payload.search, + } + } + case "DELETE": { + return state + } + case "INPUT": { + return state + } + default: + return state + } +} diff --git a/src/store/root.store.ts b/src/store/root.store.ts new file mode 100644 index 0000000..5c08480 --- /dev/null +++ b/src/store/root.store.ts @@ -0,0 +1,11 @@ +import { combineReducers, createStore } from "redux" + +import { searchReducer } from "./reducers/search-reducer/search.reducer" + +export type RootStore = ReturnType + +const rootStore = combineReducers({ + search: searchReducer, +}) + +export const store = createStore(rootStore) diff --git a/vite.config.ts b/vite.config.ts index 535e3e6..5a9a10b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,6 +9,15 @@ export default defineConfig(() => { build: { outDir: "build", }, + server: { + proxy: { + '/search': + { target: 'https://ac.duckduckgo.com/ac/?q=', + changeOrigin: true, + secure: false, + }, + } + }, plugins: [ react(), checker({