From e7446ea0c9b272475353f5f7f8c1b17ff9fbb1c0 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Wed, 2 Jul 2025 15:47:23 -0300 Subject: [PATCH 1/9] Create header's base structure --- eslint.config.mjs | 2 + package-lock.json | 179 +++++++++++++++++++++++-------------------- package.json | 8 +- src/App.css | 36 +++++++-- src/App.js | 27 +++---- src/img/Pokeball.png | Bin 0 -> 392 bytes src/img/pokeball.svg | 4 + 7 files changed, 146 insertions(+), 110 deletions(-) create mode 100644 src/img/Pokeball.png create mode 100644 src/img/pokeball.svg diff --git a/eslint.config.mjs b/eslint.config.mjs index 5614c5a15..1f317dd8b 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -14,4 +14,6 @@ export default defineConfig([ pluginReact.configs.flat.recommended, { files: ["**/*.md"], plugins: { markdown }, language: "markdown/commonmark", extends: ["markdown/recommended"] }, { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] }, + ]); + diff --git a/package-lock.json b/package-lock.json index 2f908e902..e51640881 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,12 +19,13 @@ }, "devDependencies": { "@eslint/css": "^0.9.0", - "@eslint/js": "^9.29.0", + "@eslint/js": "^9.30.1", "@eslint/markdown": "^6.6.0", - "eslint": "^9.29.0", + "eslint": "^9.30.1", "eslint-plugin-react": "^7.37.5", - "globals": "^16.2.0", - "typescript-eslint": "^8.35.0" + "globals": "^16.3.0", + "prettier": "^3.6.1", + "typescript-eslint": "^8.35.1" } }, "node_modules/@adobe/css-tools": { @@ -2408,9 +2409,9 @@ } }, "node_modules/@eslint/config-array": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.1.tgz", - "integrity": "sha512-OL0RJzC/CBzli0DrrR31qzj6d6i6Mm3HByuhflhl4LOBiWxN+3i6/t/ZQQNii4tjksXi8r2CRW1wMpWA2ULUEw==", + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz", + "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==", "license": "Apache-2.0", "dependencies": { "@eslint/object-schema": "^2.1.6", @@ -2422,9 +2423,9 @@ } }, "node_modules/@eslint/config-helpers": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.3.tgz", - "integrity": "sha512-u180qk2Um1le4yf0ruXH3PYFeEZeYC3p/4wCTKrr2U1CmGdzGi3KtY0nuPDH48UJxlKCC5RDzbcbh4X0XlqgHg==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz", + "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==", "license": "Apache-2.0", "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -2532,9 +2533,9 @@ } }, "node_modules/@eslint/js": { - "version": "9.29.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.29.0.tgz", - "integrity": "sha512-3PIF4cBw/y+1u2EazflInpV+lYsSG0aByVIQzAgb1m1MhHFSbqTyNqtBKHgWf/9Ykud+DhILS9EGkmekVhbKoQ==", + "version": "9.30.1", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.30.1.tgz", + "integrity": "sha512-zXhuECFlyep42KZUhWjfvsmXGX39W8K8LFb8AWXM9gSV9dQB+MrJGLKvW6Zw0Ggnbpw0VHTtrhFXYe3Gym18jg==", "license": "MIT", "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -4154,17 +4155,17 @@ "license": "MIT" }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.0.tgz", - "integrity": "sha512-ijItUYaiWuce0N1SoSMrEd0b6b6lYkYt99pqCPfybd+HKVXtEvYhICfLdwp42MhiI5mp0oq7PKEL+g1cNiz/Eg==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz", + "integrity": "sha512-9XNTlo7P7RJxbVeICaIIIEipqxLKguyh+3UbXuT2XQuFp6d8VOeDEGuz5IiX0dgZo8CiI6aOFLg4e8cF71SFVg==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/regexpp": "^4.10.0", - "@typescript-eslint/scope-manager": "8.35.0", - "@typescript-eslint/type-utils": "8.35.0", - "@typescript-eslint/utils": "8.35.0", - "@typescript-eslint/visitor-keys": "8.35.0", + "@typescript-eslint/scope-manager": "8.35.1", + "@typescript-eslint/type-utils": "8.35.1", + "@typescript-eslint/utils": "8.35.1", + "@typescript-eslint/visitor-keys": "8.35.1", "graphemer": "^1.4.0", "ignore": "^7.0.0", "natural-compare": "^1.4.0", @@ -4178,7 +4179,7 @@ "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "@typescript-eslint/parser": "^8.35.0", + "@typescript-eslint/parser": "^8.35.1", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } @@ -4194,16 +4195,16 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.35.0.tgz", - "integrity": "sha512-6sMvZePQrnZH2/cJkwRpkT7DxoAWh+g6+GFRK6bV3YQo7ogi3SX5rgF6099r5Q53Ma5qeT7LGmOmuIutF4t3lA==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.35.1.tgz", + "integrity": "sha512-3MyiDfrfLeK06bi/g9DqJxP5pV74LNv4rFTyvGDmT3x2p1yp1lOd+qYZfiRPIOf/oON+WRZR5wxxuF85qOar+w==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/scope-manager": "8.35.0", - "@typescript-eslint/types": "8.35.0", - "@typescript-eslint/typescript-estree": "8.35.0", - "@typescript-eslint/visitor-keys": "8.35.0", + "@typescript-eslint/scope-manager": "8.35.1", + "@typescript-eslint/types": "8.35.1", + "@typescript-eslint/typescript-estree": "8.35.1", + "@typescript-eslint/visitor-keys": "8.35.1", "debug": "^4.3.4" }, "engines": { @@ -4219,14 +4220,14 @@ } }, "node_modules/@typescript-eslint/project-service": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.35.0.tgz", - "integrity": "sha512-41xatqRwWZuhUMF/aZm2fcUsOFKNcG28xqRSS6ZVr9BVJtGExosLAm5A1OxTjRMagx8nJqva+P5zNIGt8RIgbQ==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.35.1.tgz", + "integrity": "sha512-VYxn/5LOpVxADAuP3NrnxxHYfzVtQzLKeldIhDhzC8UHaiQvYlXvKuVho1qLduFbJjjy5U5bkGwa3rUGUb1Q6Q==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/tsconfig-utils": "^8.35.0", - "@typescript-eslint/types": "^8.35.0", + "@typescript-eslint/tsconfig-utils": "^8.35.1", + "@typescript-eslint/types": "^8.35.1", "debug": "^4.3.4" }, "engines": { @@ -4241,14 +4242,14 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.35.0.tgz", - "integrity": "sha512-+AgL5+mcoLxl1vGjwNfiWq5fLDZM1TmTPYs2UkyHfFhgERxBbqHlNjRzhThJqz+ktBqTChRYY6zwbMwy0591AA==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.35.1.tgz", + "integrity": "sha512-s/Bpd4i7ht2934nG+UoSPlYXd08KYz3bmjLEb7Ye1UVob0d1ENiT3lY8bsCmik4RqfSbPw9xJJHbugpPpP5JUg==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.35.0", - "@typescript-eslint/visitor-keys": "8.35.0" + "@typescript-eslint/types": "8.35.1", + "@typescript-eslint/visitor-keys": "8.35.1" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -4259,9 +4260,9 @@ } }, "node_modules/@typescript-eslint/tsconfig-utils": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.35.0.tgz", - "integrity": "sha512-04k/7247kZzFraweuEirmvUj+W3bJLI9fX6fbo1Qm2YykuBvEhRTPl8tcxlYO8kZZW+HIXfkZNoasVb8EV4jpA==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.35.1.tgz", + "integrity": "sha512-K5/U9VmT9dTHoNowWZpz+/TObS3xqC5h0xAIjXPw+MNcKV9qg6eSatEnmeAwkjHijhACH0/N7bkhKvbt1+DXWQ==", "dev": true, "license": "MIT", "engines": { @@ -4276,14 +4277,14 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.35.0.tgz", - "integrity": "sha512-ceNNttjfmSEoM9PW87bWLDEIaLAyR+E6BoYJQ5PfaDau37UGca9Nyq3lBk8Bw2ad0AKvYabz6wxc7DMTO2jnNA==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.35.1.tgz", + "integrity": "sha512-HOrUBlfVRz5W2LIKpXzZoy6VTZzMu2n8q9C2V/cFngIC5U1nStJgv0tMV4sZPzdf4wQm9/ToWUFPMN9Vq9VJQQ==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/typescript-estree": "8.35.0", - "@typescript-eslint/utils": "8.35.0", + "@typescript-eslint/typescript-estree": "8.35.1", + "@typescript-eslint/utils": "8.35.1", "debug": "^4.3.4", "ts-api-utils": "^2.1.0" }, @@ -4300,9 +4301,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.35.0.tgz", - "integrity": "sha512-0mYH3emanku0vHw2aRLNGqe7EXh9WHEhi7kZzscrMDf6IIRUQ5Jk4wp1QrledE/36KtdZrVfKnE32eZCf/vaVQ==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.35.1.tgz", + "integrity": "sha512-q/O04vVnKHfrrhNAscndAn1tuQhIkwqnaW+eu5waD5IPts2eX1dgJxgqcPx5BX109/qAz7IG6VrEPTOYKCNfRQ==", "dev": true, "license": "MIT", "engines": { @@ -4314,16 +4315,16 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.35.0.tgz", - "integrity": "sha512-F+BhnaBemgu1Qf8oHrxyw14wq6vbL8xwWKKMwTMwYIRmFFY/1n/9T/jpbobZL8vp7QyEUcC6xGrnAO4ua8Kp7w==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.35.1.tgz", + "integrity": "sha512-Vvpuvj4tBxIka7cPs6Y1uvM7gJgdF5Uu9F+mBJBPY4MhvjrjWGK4H0lVgLJd/8PWZ23FTqsaJaLEkBCFUk8Y9g==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/project-service": "8.35.0", - "@typescript-eslint/tsconfig-utils": "8.35.0", - "@typescript-eslint/types": "8.35.0", - "@typescript-eslint/visitor-keys": "8.35.0", + "@typescript-eslint/project-service": "8.35.1", + "@typescript-eslint/tsconfig-utils": "8.35.1", + "@typescript-eslint/types": "8.35.1", + "@typescript-eslint/visitor-keys": "8.35.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", @@ -4369,16 +4370,16 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.35.0.tgz", - "integrity": "sha512-nqoMu7WWM7ki5tPgLVsmPM8CkqtoPUG6xXGeefM5t4x3XumOEKMoUZPdi+7F+/EotukN4R9OWdmDxN80fqoZeg==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.35.1.tgz", + "integrity": "sha512-lhnwatFmOFcazAsUm3ZnZFpXSxiwoa1Lj50HphnDe1Et01NF4+hrdXONSUHIcbVu2eFb1bAf+5yjXkGVkXBKAQ==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.7.0", - "@typescript-eslint/scope-manager": "8.35.0", - "@typescript-eslint/types": "8.35.0", - "@typescript-eslint/typescript-estree": "8.35.0" + "@typescript-eslint/scope-manager": "8.35.1", + "@typescript-eslint/types": "8.35.1", + "@typescript-eslint/typescript-estree": "8.35.1" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -4393,13 +4394,13 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.35.0.tgz", - "integrity": "sha512-zTh2+1Y8ZpmeQaQVIc/ZZxsx8UzgKJyNg1PTvjzC7WMhPSVS8bfDX34k1SrwOf016qd5RU3az2UxUNue3IfQ5g==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.35.1.tgz", + "integrity": "sha512-VRwixir4zBWCSTP/ljEo091lbpypz57PoeAQ9imjG+vbeof9LplljsL1mos4ccG6H9IjfrVGM359RozUnuFhpw==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.35.0", + "@typescript-eslint/types": "8.35.1", "eslint-visitor-keys": "^4.2.1" }, "engines": { @@ -7479,18 +7480,18 @@ } }, "node_modules/eslint": { - "version": "9.29.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz", - "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==", + "version": "9.30.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.30.1.tgz", + "integrity": "sha512-zmxXPNMOXmwm9E0yQLi5uqXHs7uq2UIiqEKo3Gq+3fwo1XrJ+hijAZImyF7hclW3E6oHz43Yk3RP8at6OTKflQ==", "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", - "@eslint/config-array": "^0.20.1", - "@eslint/config-helpers": "^0.2.1", + "@eslint/config-array": "^0.21.0", + "@eslint/config-helpers": "^0.3.0", "@eslint/core": "^0.14.0", "@eslint/eslintrc": "^3.3.1", - "@eslint/js": "9.29.0", + "@eslint/js": "9.30.1", "@eslint/plugin-kit": "^0.3.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", @@ -8834,9 +8835,9 @@ } }, "node_modules/globals": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz", - "integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==", + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-16.3.0.tgz", + "integrity": "sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==", "dev": true, "license": "MIT", "engines": { @@ -14586,6 +14587,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -18079,15 +18096,15 @@ } }, "node_modules/typescript-eslint": { - "version": "8.35.0", - "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.35.0.tgz", - "integrity": "sha512-uEnz70b7kBz6eg/j0Czy6K5NivaYopgxRjsnAJ2Fx5oTLo3wefTHIbL7AkQr1+7tJCRVpTs/wiM8JR/11Loq9A==", + "version": "8.35.1", + "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.35.1.tgz", + "integrity": "sha512-xslJjFzhOmHYQzSB/QTeASAHbjmxOGEP6Coh93TXmUBFQoJ1VU35UHIDmG06Jd6taf3wqqC1ntBnCMeymy5Ovw==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/eslint-plugin": "8.35.0", - "@typescript-eslint/parser": "8.35.0", - "@typescript-eslint/utils": "8.35.0" + "@typescript-eslint/eslint-plugin": "8.35.1", + "@typescript-eslint/parser": "8.35.1", + "@typescript-eslint/utils": "8.35.1" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" diff --git a/package.json b/package.json index 560e0336c..48ee19542 100644 --- a/package.json +++ b/package.json @@ -39,12 +39,12 @@ }, "devDependencies": { "@eslint/css": "^0.9.0", - "@eslint/js": "^9.29.0", + "@eslint/js": "^9.30.1", "@eslint/markdown": "^6.6.0", - "eslint": "^9.29.0", + "eslint": "^9.30.1", "eslint-plugin-react": "^7.37.5", - "globals": "^16.2.0", + "globals": "^16.3.0", "prettier": "^3.6.1", - "typescript-eslint": "^8.35.0" + "typescript-eslint": "^8.35.1" } } diff --git a/src/App.css b/src/App.css index 74b5e0534..25572d9bb 100644 --- a/src/App.css +++ b/src/App.css @@ -12,18 +12,38 @@ animation: App-logo-spin infinite 20s linear; } } - -.App-header { - background-color: #282c34; - min-height: 100vh; +body { + font-family: 'Poppins', sans-serif; +} +h1 { + font-family: 'Poppins', sans-serif; + font-size: 1.875rem; + font-weight: 700; + color: #000000; + margin: 0; + padding: 0; +} +.header { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + background-color: #ff0000 } +.header-input { + display: flex; + align-items: flex-start; + min-width: 300px; + height: 20px; + gap:15px; + background: white; + border: 1px solid gainsboro; + border-radius: 10px; + padding: 10px; + margin-left: 10px; + color: #000000; + margin: 0; +} .App-link { color: #61dafb; } diff --git a/src/App.js b/src/App.js index 378457572..a9a74ed62 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,17 @@ -import logo from './logo.svg'; +import React from 'react'; +import{ useState, useEffect } from 'react'; import './App.css'; function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ +
+ + +

Pokédex

+ + +
); } diff --git a/src/img/Pokeball.png b/src/img/Pokeball.png new file mode 100644 index 0000000000000000000000000000000000000000..78e14190331f9f70ec48fb81f730545d1da29bb5 GIT binary patch literal 392 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(AvYsxEAr*{Ur!@*5GT>kcKF?_7{|KbH-=FOHTZ6m0$f+KXswH`QL*#gGs;``7t1*EtT< z{kpJMSZeB0pE+W07B70ZQqTI$3xV8}CkFpMG~_m9Uh!kPH&f?x3g5dYa~|3p>Zuo> kC-Y%VRMhLe!pSy_Zadeum;afm3=B91Pgg&ebxsLQ06|EeuK)l5 literal 0 HcmV?d00001 diff --git a/src/img/pokeball.svg b/src/img/pokeball.svg new file mode 100644 index 000000000..d72d845fd --- /dev/null +++ b/src/img/pokeball.svg @@ -0,0 +1,4 @@ + + + + From b4114aff7da09cd3b50cac995d05c5b522bd9df5 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Wed, 2 Jul 2025 15:53:14 -0300 Subject: [PATCH 2/9] header updates --- {src => public}/img/Pokeball.png | Bin {src => public}/img/pokeball.svg | 0 src/App.css | 9 ++------- src/App.js | 2 +- 4 files changed, 3 insertions(+), 8 deletions(-) rename {src => public}/img/Pokeball.png (100%) rename {src => public}/img/pokeball.svg (100%) diff --git a/src/img/Pokeball.png b/public/img/Pokeball.png similarity index 100% rename from src/img/Pokeball.png rename to public/img/Pokeball.png diff --git a/src/img/pokeball.svg b/public/img/pokeball.svg similarity index 100% rename from src/img/pokeball.svg rename to public/img/pokeball.svg diff --git a/src/App.css b/src/App.css index 25572d9bb..1c15ac8dc 100644 --- a/src/App.css +++ b/src/App.css @@ -16,12 +16,10 @@ body { font-family: 'Poppins', sans-serif; } h1 { - font-family: 'Poppins', sans-serif; + margin-left: 10px; font-size: 1.875rem; font-weight: 700; - color: #000000; - margin: 0; - padding: 0; + color: white; } .header { display: flex; @@ -44,9 +42,6 @@ h1 { color: #000000; margin: 0; } -.App-link { - color: #61dafb; -} @keyframes App-logo-spin { from { diff --git a/src/App.js b/src/App.js index a9a74ed62..6fbbe5d37 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ function App() {
- +

Pokédex

From 621ab0adb97ebd69683d951cd96669efbb3ea5f1 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Fri, 11 Jul 2025 18:05:53 -0300 Subject: [PATCH 3/9] header changes --- src/App.css | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 1c15ac8dc..d5f53cd53 100644 --- a/src/App.css +++ b/src/App.css @@ -7,23 +7,17 @@ pointer-events: none; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} body { font-family: 'Poppins', sans-serif; } h1 { - margin-left: 10px; font-size: 1.875rem; font-weight: 700; color: white; } .header { - display: flex; - flex-direction: row; + padding: 18px 16px 24px 16px; + display: grid; align-items: center; background-color: #ff0000 } From 6cce8d0062093cfb2960d9652d7fda481401e514 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Mon, 21 Jul 2025 13:16:49 -0300 Subject: [PATCH 4/9] Create search component structure --- public/img/Pokeball.png | Bin 392 -> 0 bytes public/img/Vector.svg | 3 +++ public/img/search.svg | 3 +++ src/App.css | 45 +++++++++++++++++++++++++++++++++------- src/App.js | 20 +++++++++++------- 5 files changed, 56 insertions(+), 15 deletions(-) delete mode 100644 public/img/Pokeball.png create mode 100644 public/img/Vector.svg create mode 100644 public/img/search.svg diff --git a/public/img/Pokeball.png b/public/img/Pokeball.png deleted file mode 100644 index 78e14190331f9f70ec48fb81f730545d1da29bb5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 392 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(AvYsxEAr*{Ur!@*5GT>kcKF?_7{|KbH-=FOHTZ6m0$f+KXswH`QL*#gGs;``7t1*EtT< z{kpJMSZeB0pE+W07B70ZQqTI$3xV8}CkFpMG~_m9Uh!kPH&f?x3g5dYa~|3p>Zuo> kC-Y%VRMhLe!pSy_Zadeum;afm3=B91Pgg&ebxsLQ06|EeuK)l5 diff --git a/public/img/Vector.svg b/public/img/Vector.svg new file mode 100644 index 000000000..e3886c80b --- /dev/null +++ b/public/img/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/search.svg b/public/img/search.svg new file mode 100644 index 000000000..447161dfa --- /dev/null +++ b/public/img/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/App.css b/src/App.css index d5f53cd53..87857986a 100644 --- a/src/App.css +++ b/src/App.css @@ -15,28 +15,57 @@ h1 { font-weight: 700; color: white; } + +.header-nav { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; +} +.header-nav-top { + display: flex; + align-items: center; + gap: 8px; +} .header { padding: 18px 16px 24px 16px; - display: grid; - align-items: center; - background-color: #ff0000 + background-color: #DC0A2D; } .header-input { display: flex; align-items: flex-start; min-width: 300px; - height: 20px; - gap:15px; + height: 30px; + background: white; border: 1px solid gainsboro; - border-radius: 10px; - padding: 10px; - margin-left: 10px; + border-radius: 20px; + padding: 10px 10px 10px 40px; color: #000000; margin: 0; } +.header-input-container { + position: relative; + width: 100%; +} + + +.header-input-icon { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + pointer-events: none; +} +.header-filter { + border: 1px solid white; + border-radius: 20px; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/src/App.js b/src/App.js index 6fbbe5d37..e0f31b809 100644 --- a/src/App.js +++ b/src/App.js @@ -5,13 +5,19 @@ import './App.css'; function App() { return ( -
- - -

Pokédex

- - -
+
+ +
); } From 1d00874e7b1289420be872bb1e85fe37185146c8 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Mon, 28 Jul 2025 13:16:03 -0300 Subject: [PATCH 5/9] search component changes --- src/App.css | 63 +++++++++++++++++++++++++---------------------------- src/App.js | 19 ++++++++-------- 2 files changed, 39 insertions(+), 43 deletions(-) diff --git a/src/App.css b/src/App.css index 87857986a..37d23067e 100644 --- a/src/App.css +++ b/src/App.css @@ -9,6 +9,8 @@ body { font-family: 'Poppins', sans-serif; + padding: 0px 4px 4px 4px; + background-color: #DC0A2D; } h1 { font-size: 1.875rem; @@ -16,56 +18,51 @@ h1 { color: white; } -.header-nav { +.header-top { + display: flex; + align-items: center; + gap: 16px; +} +.header { + padding: 18px 12px 24px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } -.header-nav-top { +.header-input { + border: none; + outline: none; + width: 100%; +} +.header-input-container { display: flex; + background: #FFF; + padding: 8px; align-items: center; + border-radius: 16px; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25) inset; + width: 100%; gap: 8px; } -.header { - padding: 18px 16px 24px 16px; - background-color: #DC0A2D; -} -.header-input { - display: flex; - align-items: flex-start; - min-width: 300px; - height: 30px; - - background: white; - border: 1px solid gainsboro; - border-radius: 20px; - padding: 10px 10px 10px 40px; - color: #000000; - margin: 0; +.header-input-icon { + width: 16px; + height: 16px; } -.header-input-container { - position: relative; +.header-search-wrapper { + display: flex; + gap: 8px; width: 100%; } -.header-input-icon { - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); - width: 16px; - height: 16px; - pointer-events: none; -} -.header-filter { - border: 1px solid white; - border-radius: 20px; +@media screen and (min-width: 1440px) { + .header { + padding: 18px 400px 30px 400px; + } } - @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/src/App.js b/src/App.js index e0f31b809..745b689e7 100644 --- a/src/App.js +++ b/src/App.js @@ -5,19 +5,18 @@ import './App.css'; function App() { return ( -
- -
+
); } From 62bdafa2849e8628078c125c6a71249a529049a5 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Mon, 28 Jul 2025 13:27:36 -0300 Subject: [PATCH 6/9] search component changes --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 745b689e7..29a56bd83 100644 --- a/src/App.js +++ b/src/App.js @@ -13,7 +13,7 @@ function App() {
- +
From aa22e1daee1ea4bee6c20203411d13eee0527fa5 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Tue, 29 Jul 2025 13:28:44 -0300 Subject: [PATCH 7/9] Create filter component feature --- src/App.css | 1 - src/App.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index 37d23067e..28d501c7f 100644 --- a/src/App.css +++ b/src/App.css @@ -57,7 +57,6 @@ h1 { width: 100%; } - @media screen and (min-width: 1440px) { .header { padding: 18px 400px 30px 400px; diff --git a/src/App.js b/src/App.js index 29a56bd83..0b7516c08 100644 --- a/src/App.js +++ b/src/App.js @@ -13,7 +13,8 @@ function App() {
- + +
From 93976f63db914a11c21cd869b8ada95b8dbc554d Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Mon, 4 Aug 2025 20:37:35 -0300 Subject: [PATCH 8/9] filter changes --- src/.prettierrc => .prettierrc | 0 src/App.css | 58 ++++++++++++++++++++++++++++++++ src/App.js | 3 +- src/components/FilterButton.js | 60 ++++++++++++++++++++++++++++++++++ 4 files changed, 120 insertions(+), 1 deletion(-) rename src/.prettierrc => .prettierrc (100%) create mode 100644 src/components/FilterButton.js diff --git a/src/.prettierrc b/.prettierrc similarity index 100% rename from src/.prettierrc rename to .prettierrc diff --git a/src/App.css b/src/App.css index 28d501c7f..4aa19a72e 100644 --- a/src/App.css +++ b/src/App.css @@ -57,6 +57,64 @@ h1 { width: 100%; } +.filter-button-wrapper { + position: relative; +} + +.filter-button { + background: white; + border: none; + border-radius: 16px; + padding: 8px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25) inset; + cursor: pointer; +} + +.filter-button img { + width: 16px; + height: 16px; +} + +.filter-popup { + position: absolute; + top: 120%; + right: 0; + background: #DC0A2D; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border-radius: 12px; + overflow: hidden; + z-index: 10; +} +.filter-label { + font-size: 14px; + font-weight: 500; + margin-bottom: 6px; + color: #333; +} + +.filter-option { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + padding: 4px 0; + cursor: pointer; +} + +.filter-option input[type="radio"] { + accent-color: #dc0a2d; + width: 14px; + height: 14px; + cursor: pointer; +} +.filter-option:hover { + background-color: #f1f1f1; +} + + @media screen and (min-width: 1440px) { .header { padding: 18px 400px 30px 400px; diff --git a/src/App.js b/src/App.js index 0b7516c08..01e7d1184 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from 'react'; import{ useState, useEffect } from 'react'; import './App.css'; +import FilterButton from './components/FilterButton'; function App() { return ( @@ -14,8 +15,8 @@ function App() {
-
+ ); diff --git a/src/components/FilterButton.js b/src/components/FilterButton.js new file mode 100644 index 000000000..a58d55f15 --- /dev/null +++ b/src/components/FilterButton.js @@ -0,0 +1,60 @@ +import React, { useState, useRef, useEffect } from 'react'; + + +function FilterButton() { + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('name'); + const popupRef = useRef(); + + const togglePopup = () => setIsOpen(!isOpen); + + const handleSelect = (option) => { + setSelected(option); + setIsOpen(false); + }; + + useEffect(() => { + function handleClickOutside(event) { + if (popupRef.current && !popupRef.current.contains(event.target)) { + setIsOpen(false); + } + } + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + return ( +
+ + {isOpen && ( +
+

Sort by:

+ + +
+ )} +
+ ); +} + +export default FilterButton; \ No newline at end of file From cb3e62d0a1ad5dda1fa200868f09120393f15f67 Mon Sep 17 00:00:00 2001 From: gabriel-suterio-poatek Date: Fri, 8 Aug 2025 16:29:42 -0300 Subject: [PATCH 9/9] filter changes --- src/App.css | 64 ++------------------------------- src/components/FilterButton.css | 58 ++++++++++++++++++++++++++++++ src/components/FilterButton.js | 36 +++++++------------ 3 files changed, 74 insertions(+), 84 deletions(-) create mode 100644 src/components/FilterButton.css diff --git a/src/App.css b/src/App.css index 4aa19a72e..6b1d23e71 100644 --- a/src/App.css +++ b/src/App.css @@ -10,7 +10,7 @@ body { font-family: 'Poppins', sans-serif; padding: 0px 4px 4px 4px; - background-color: #DC0A2D; + background-color: #dc0a2d; } h1 { font-size: 1.875rem; @@ -37,12 +37,12 @@ h1 { } .header-input-container { display: flex; - background: #FFF; + background: #fff; padding: 8px; align-items: center; border-radius: 16px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25) inset; - width: 100%; + width: 100%; gap: 8px; } @@ -57,64 +57,6 @@ h1 { width: 100%; } -.filter-button-wrapper { - position: relative; -} - -.filter-button { - background: white; - border: none; - border-radius: 16px; - padding: 8px; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25) inset; - cursor: pointer; -} - -.filter-button img { - width: 16px; - height: 16px; -} - -.filter-popup { - position: absolute; - top: 120%; - right: 0; - background: #DC0A2D; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - border-radius: 12px; - overflow: hidden; - z-index: 10; -} -.filter-label { - font-size: 14px; - font-weight: 500; - margin-bottom: 6px; - color: #333; -} - -.filter-option { - display: flex; - align-items: center; - gap: 6px; - font-size: 14px; - padding: 4px 0; - cursor: pointer; -} - -.filter-option input[type="radio"] { - accent-color: #dc0a2d; - width: 14px; - height: 14px; - cursor: pointer; -} -.filter-option:hover { - background-color: #f1f1f1; -} - - @media screen and (min-width: 1440px) { .header { padding: 18px 400px 30px 400px; diff --git a/src/components/FilterButton.css b/src/components/FilterButton.css new file mode 100644 index 000000000..97c5fc918 --- /dev/null +++ b/src/components/FilterButton.css @@ -0,0 +1,58 @@ +.filter-button-wrapper { + position: relative; +} + +.filter-button { + background: white; + border: none; + border-radius: 16px; + padding: 8px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25) inset; + cursor: pointer; +} + +.filter-button img { + width: 16px; + height: 16px; +} + +.filter-popup { + position: absolute; + top: 120%; + right: 0; + background: #dc0a2d; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border-radius: 12px; + overflow: hidden; + z-index: 10; +} +.filter-label { + font-size: 14px; + font-weight: 500; + margin-bottom: 6px; + color: #333; +} + +.filter-option { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + padding: 4px 0; + cursor: pointer; +} + +.filter-option input[type='radio'] { + accent-color: #dc0a2d; + width: 14px; + height: 14px; + cursor: pointer; +} + +.filter-options { + background-color: #f1f1f1; + padding: 16px 20px; +} diff --git a/src/components/FilterButton.js b/src/components/FilterButton.js index a58d55f15..862125c33 100644 --- a/src/components/FilterButton.js +++ b/src/components/FilterButton.js @@ -1,4 +1,5 @@ import React, { useState, useRef, useEffect } from 'react'; +import './FilterButton.css'; function FilterButton() { @@ -29,29 +30,18 @@ function FilterButton() { Filter {isOpen && ( -
-

Sort by:

- - -
+
+

Sort by:

+
+ + +
+
)} );