From 10308a8db0b78a9b5e577d055a82c392cc81568a Mon Sep 17 00:00:00 2001 From: Olesya Aldoshyna Date: Sun, 12 Nov 2023 15:54:33 +0200 Subject: [PATCH] added backend with axios and mockapi --- README.RO.md | 94 ----- README.en.md | 105 ----- README.es.md | 105 ----- README.md | 5 + README.pl.md | 117 ------ package-lock.json | 528 +++++++++++++++++++++++-- package.json | 9 +- src/components/App.jsx | 17 +- src/components/Avatar/Avatar.jsx | 13 + src/components/Avatar/Avatar.styled.js | 33 ++ src/components/Button/Button.jsx | 17 + src/components/Button/Button.styled.js | 50 +++ src/components/Tweet/Tweet.jsx | 36 ++ src/components/Tweet/Tweet.styled.js | 42 ++ src/images/Logo.png | Bin 0 -> 730 bytes src/images/card-image.png | Bin 0 -> 30290 bytes src/images/sprite.svg | 9 + src/index.css | 40 +- src/index.js | 8 +- src/pages/TweetsPage.jsx | 3 + src/pages/TweetsPage.styled.js | 18 + src/utils/backend.js | 23 ++ 22 files changed, 787 insertions(+), 485 deletions(-) delete mode 100644 README.RO.md delete mode 100644 README.en.md delete mode 100644 README.es.md delete mode 100644 README.pl.md create mode 100644 src/components/Avatar/Avatar.jsx create mode 100644 src/components/Avatar/Avatar.styled.js create mode 100644 src/components/Button/Button.jsx create mode 100644 src/components/Button/Button.styled.js create mode 100644 src/components/Tweet/Tweet.jsx create mode 100644 src/components/Tweet/Tweet.styled.js create mode 100644 src/images/Logo.png create mode 100644 src/images/card-image.png create mode 100644 src/images/sprite.svg create mode 100644 src/pages/TweetsPage.jsx create mode 100644 src/pages/TweetsPage.styled.js create mode 100644 src/utils/backend.js diff --git a/README.RO.md b/README.RO.md deleted file mode 100644 index 4848997..0000000 --- a/README.RO.md +++ /dev/null @@ -1,94 +0,0 @@ -# Model pentru un proiect React - -Acest proiect a fost creat cu ajutorul -[Create React App](https://github.com/facebook/create-react-app). Pentru prezentări -și configurarea de funcții suplimentare -[consultă documentația](https://facebook.github.io/create-react-app/docs/getting-started). - -## Crearea unui repository în baza modelului - -Utilizează acest repository al organizației GoIT ca model pentru crearea unui repository -pentru proiectul tău. Pentru a face acest lucru, dă click pe "Use this template" și selectează opțiunea -`Create a new repository`, după cum se prezintă în imagine. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -Următorul pas va deschide pagina de creare a unui nou repository. Completează câmpul -pentru numele acestuia, asigură-te că repository-ul este public, apoi dă click pe `Create repository from template`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Odată ce repository-ul a fost creat, trebuie să accesezi setările repository-ului creat în fila `Settings > Actions > General`, după cum se prezintă în imagine. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -După ce ai derulat până la sfârșitul paginii, în secțiunea `Workflow permissions`, selectează `Read and write permissions`, (Permisiuni de citire și scriere) și bifează caseta. Acest lucru -este necesar pentru a automatiza procesul de lansare a proiectului. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Avei acum un repository personal de proiecte, cu o structură de fișiere și foldere. - -Lucrează apoi cu acesta așa cum ai face-o cu orice alt repository personal, -clonează-l pe computerul tău, scrie cod, confirmă-l și încarcă-l pe -GitHub. - -## Pregătirea pentru muncă - -1. Asigură-te că ai versiunea LTS a Node.js instalată pe computerul personal. - [Descarcă și instalează](https://nodejs.org/en/) dacă este necesar. -2. Instalează dependențele de bază ale proiectului cu comanda `npm install`. -3. Pornește modul de dezvoltare utilizând comanda `npm start`. -4. Accesează [http://localhost:3000](http://localhost:3000) în browser-ul tău. - Această pagină se va reîncărca automat după salvarea modificărilor în fișierele proiectului. - -## Deploy - -Versiunea de producție a proiectului va trece automat prin procesul de linting, va fi asamblată și implementată pe GitHub Pages, în ramura `gh-pages`, de fiecare dată când ramura `main` este actualizată. De exemplu, după un push direct sau o cerere de pull-request acceptată. - -Pentru a face acest lucru, trebuie să editeezi câmpul "homepage" din fișierul package.json, înlocuind "your_username" și "your_repo_name" cu detaliile tale, apoi să trimiți aceste modificări pe GitHub. - -json -"homepage": "https://your_username.github.io/your_repo_name/" - -În continuare, mergi la setările repository-ului GitHub (`Settings` > `Pages`) și setează distribuirea versiunii de producție a fișierelor în folderul `/root` al ramurii `gh-pages`, dacă acest lucru nu a fost făcut în mod automat. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Deployment status - -Starea de implementare a celui mai recent commit este afișat printr-o iconiță lângă ID-ului acestuia. - -- **Galben** - proiectul este în curs de asamblare și de implementare. -- **Verde** - implementarea a fost finalizată cu succes. -- **Roșu** - a apărut o eroare în timpul procesului de linting, asamblării sau implementării. - -Pentru a obține informații mai detaliate despre starea implementării, poți da click pe iconița corespunzătoare și apoi accesează link-ul "Details" din fereastra pop-up care se deschide. - -![Deployment status](./assets/deploy-status.png) - -### Pagina live - -După un anumit interval de timp, de obicei câteva minute, poți vizualiza pagina live la adresa indicată în proprietatea "homepage" editată. De exemplu, iată un link către versiunea live pentru acest repository: -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Dacă se deschide o pagină goală, asigură-te că în fila "Console" nu există erori legate de căi greșite către fișierele CSS și JS ale proiectului (**Eroare 404**). Cel mai probabil, valoarea proprietății "homepage" din fișierul package.json este incorectă. - -### Rutarea - -Dacă aplicația utilizează biblioteca react-router-dom pentru rutare, -trebuie să configurezi suplimentar componenta ``, trecând în prop-ul "basename" numele exact al repository-ului tău. Bara oblică la începutul șirului este obligatorie. - -jsx - - - - - -## Cum funcționează - -![How it works](./assets/how-it-works.png) - -1. După fiecare "push" în ramura `main` a repository-ului GitHub, se va crea un fișier special script (GitHub Action) din fișierul `.github/workflows/deploy.yml`. -2. Toate fișierele din repository sunt copiate pe server, unde proiectul este inițializat, este efectuat linting-ul și asamblarea înainte de implementare. -3. Dacă toți pașii sunt finalizați cu succes, versiunea asamblată în producție a fișierelor proiectului este trimisă în ramura `gh-pages`. În caz contrar, în jurnalul (log) de execuție al scriptului vor fi indicate problemele întâlnite. diff --git a/README.en.md b/README.en.md deleted file mode 100644 index f7128cb..0000000 --- a/README.en.md +++ /dev/null @@ -1,105 +0,0 @@ -# React homework template - -This project was created with -[Create React App](https://github.com/facebook/create-react-app). To get -acquainted and configure additional features -[refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -## Creating a repository by template - -Use this GoIT repository as a template for creating a repository -of your project. To use it just tap the `«Use this template»` button and choose -`«Create a new repository»` option, as you can see on the image below. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -The page for creating a new repository will open on the next step. Fill out -the Name field and make sure the repository is public, then click -`«Create repository from template»` button. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -You now have a personal project repository, having a repository-template file -and folder structure. After that, you can work with it as you would with any -other private repository: clone it on your computer, write code, commit, and -send it to GitHub. - -## Preparing for coding - -1. Make sure you have an LTS version of Node.js installed on your computer. - [Download and install](https://nodejs.org/en/) if needed. -2. Install the project's base dependencies with the `npm install` command. -3. Start development mode by running the `npm start` command. -4. Go to [http://localhost:3000](http://localhost:3000) in your browser. This - page will automatically reload after saving changes to the project files. - -## Deploy - -The production version of the project will automatically be linted, built, and -deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch -is updated. For example, after a direct push or an accepted pull request. To do -this, you need to edit the `homepage` field in the `package.json` file, -replacing `your_username` and `your_repo_name` with your own, and submit the -changes to GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Next, you need to go to the settings of the GitHub repository (`Settings` > -`Pages`) and set the distribution of the production version of files from the -`/root` folder of the `gh-pages` branch, if this was not done automatically. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Deployment status - -The deployment status of the latest commit is displayed with an icon next to its -ID. - -- **Yellow color** - the project is being built and deployed. -- **Green color** - deployment completed successfully. -- **Red color** - an error occurred during linting, build or deployment. - -More detailed information about the status can be viewed by clicking on the -icon, and in the drop-down window, follow the link `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Live page - -After some time, usually a couple of minutes, the live page can be viewed at the -address specified in the edited `homepage` property. For example, here is a link -to a live version for this repository -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -If a blank page opens, make sure there are no errors in the `Console` tab -related to incorrect paths to the CSS and JS files of the project (**404**). You -most likely have the wrong value for the `homepage` property in the -`package.json` file. - -### Routing - -If your application uses the `react-router-dom` library for routing, you must -additionally configure the `` component by passing the exact name -of your repository in the `basename` prop. Slashes at the beginning and end of -the line are required. - -```jsx - - - -``` - -## How it works - -![How it works](./assets/how-it-works.png) - -1. After each push to the `main` branch of the GitHub repository, a special - script (GitHub Action) is launched from the `.github/workflows/deploy.yml` - file. -2. All repository files are copied to the server, where the project is - initialized and linted and built before deployment. -3. If all steps are successful, the built production version of the project - files is sent to the `gh-pages` branch. Otherwise, the script execution log - will indicate what the problem is. diff --git a/README.es.md b/README.es.md deleted file mode 100644 index d8783c1..0000000 --- a/README.es.md +++ /dev/null @@ -1,105 +0,0 @@ -# React homework template - -Este proyecto fue creado con la ayuda de -[Create React App](https://github.com/facebook/create-react-app). -[Consulte la documentación](https://facebook.github.io/create-react-app/docs/getting-started) -para familiarizarse con las funciones opcionales y configurarlas. - -## Crear un repositorio desde una plantilla - -Usa este repositorio de la organización GoIT como plantilla para crear el repositorio de tu proyecto. -Para hacer esto, haz clic en `«Use this template»` y selecciona la opción -`«Create a new repository»`, tal como se muestra en la imagen. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -Para el siguiente paso deberás abrir la página para crear un nuevo repositorio. -Ponle nombre, asegúrate de que el repositorio sea público y haz clic en el botón -`«Create repository from template»`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Ahora ya tienes un repositorio de proyecto personal, junto a una estructura de -archivos y carpetas del repositorio de plantillas. Luego trabaja con esto, así -como con cualquier otro repositorio personal, realiza una copia en tu computadora -y súbelo a GitHub. - -## Prepararse para el trabajo - -1. Asegúrate de que la versión LTS de Node.js está instalada en tu computador. - [Descárguela e instálela](https://nodejs.org/en/) de ser necesario. -2. Instala las dependencias base del proyecto con el comando `npm install`. -3. Inicia el modo de desarrollo ejecutando el comando `npm start`. -4. En tu navegador, ve a la dirección - [http://localhost:3000](http://localhost:3000). Esta página se recargará - automáticamente después de guardar los cambios en los archivos del proyecto. - -## Implementación - -La versión de producción del proyecto se verificará, compilará y desplegará -automáticamente en GitHub Pages, en la rama `gh-pages`, cada vez que se -actualice la rama `main`. Por ejemplo, después de un Push directo o de una -Pool-request aceptada. Para ello, edita el campo `homepage` del archivo -`package.json`, sustituyendo `your_username` y `your_repo_name` por los tuyos -propios, y envía los cambios a GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -A continuación, ve a la configuración del repositorio de GitHub (`Settings` > -`Pages`) y selecciona distribuir la versión de producción de los archivos desde -la carpeta `/root` de la rama `gh-pages`, si no se ha hecho automáticamente. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Estado de la implantación - -El estado del último commit se indica con un icono junto al ID del commit. - -- **Color amarillo** - el proyecto está compilado e implementado. -- **Color verde** - La implementación se completó con éxito. -- **Color rojo** - Se ha producido un error durante la verificación, la - compilación o la implementación - -Se puede ver información de estado más detallada haciendo clic en el icono y en -la ventana desplegable del enlace `Detalles`. - -![Deployment status](./assets/deploy-status.png) - -### Página activa - -Después de un tiempo, normalmente un par de minutos, la página real se puede ver -en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí está -el enlace a la versión activa de este repositorio -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña -`Console` relacionados con rutas incorrectas de archivos CSS y JS del proyecto -(**404**). Probablemente tienes un valor incorrecto para la propiedad `homepage` -en el archivo `package.json`. - -### Enrutamiento - -Si la aplicación utiliza la librería `react-router-dom` para el enrutamiento, el -componente `` debe ser configurado adicionalmente pasando en la -prop `basename`, el nombre exacto de tu repositorio. Las barras inclinadas al -principio y al final de la cadena son obligatorias. - -```jsx - - - -``` - -## ¿Cómo funciona? - -![How it works](./assets/how-it-works.png) - -1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un - script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`. -2. Todos los archivos del repositorio se copian en el servidor, donde el - proyecto se inicializa, se verifica y se compila antes de ser implementado. -3. Si todos los pasos tienen éxito, la versión de producción compilada de los - archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el - registro de ejecución del script indicará cuál es el problema. diff --git a/README.md b/README.md index af1f02c..57ea835 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ +Верстка фіксована в рх, семантична та валідна. Немає помилок в консолі браузера. +Робота виконана на нативному JS з використанням зборщиків або на React. +Інтерактивність працює відповідно до технічного завдання. Код відформатований та +без коментарів. В репозиторії має бути описаний README.md. + # React homework template Этот проект был создан при помощи diff --git a/README.pl.md b/README.pl.md deleted file mode 100644 index be1f226..0000000 --- a/README.pl.md +++ /dev/null @@ -1,117 +0,0 @@ -**Read in other languages: [rosyjski](README.md), [polski](README.pl.md).** - -# React homework template - -Ten projekt został stworzony przy pomocy -[Create React App](https://github.com/facebook/create-react-app). W celu -zapoznania się z konfiguracją dodatkowych opcji -[zobacz dokumentację](https://facebook.github.io/create-react-app/docs/getting-started). - -## Utworzenie repozytorium zgodnie z szablonem - -Wykorzystaj to repozytorium organizacji GoIT jako szablon do utworzenia -repozytorium własnego projektu. W tym celu kliknij na przycisk -`"Use this template"` i wybierz opcję `"Create a new repository"`, jak pokazano -na rysunku. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -W następnym kroku otworzy się strona utworzenia nowego repozytorium. Wypełnij -pole nazwy i upewnij się, że repozytorium jest publiczne, a następnie kliknij na -przycisk `"Create repository from template"`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Po utworzeniu repozytorium, należy przejść do jego ustawień w zakładce `Settings` > `Actions` > `General`, jak pokazano na rysunku. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -Przescrolluj stronę do samego końca, w sekcji `«Workflow permissions»` wybierz opcję `«Read and write permissions»` i zaznacz pole w checkboksie. Jest to niezbędne do automatyzacji procesu deploymentu projektu. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Teraz masz własne repozytorium projektu, ze strukturą folderów i plików jak w -szablonie. Pracuj z nim jak z innymi repozytoriami, klonuj je na swój komputer, -pisz kod, rób commity i wysyłaj na GitHub. - -## Przygotowanie do pracy - -1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. - [Ściągnij i zainstaluj](https://nodejs.org/en/), jeżeli trzeba. -2. Utwórz bazowe zależności projektu przy pomocy polecenia `npm install`. -3. Włącz tryb pracy, wykonując polecenie `npm start`. -4. Przejdź w przeglądarce pod adres - [http://localhost:3000](http://localhost:3000). Ta strona będzie - automatycznie przeładowywać się po zapisaniu zmian w plikach projektu. - -## Deployment - -Produkcyjna wersja projektu będzie automatycznie poddana pracy lintera, budowana -i deployowana na GitHub Pages, w gałęzi `gh-pages` za każdym razem, gdy -aktualizuje się gałąź `main`, na przykład po bezpośrednim pushu lub przyjętym -pull requeście. W tym celu należy w pliku `package.json` zredagować pole -`homepage`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i -wysłać zmiany do GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) -i wydystrybuować wersję produkcyjną plików z folderu `/root` gałęzi `gh-pages`, -jeśli nie zostało to wykonane automatycznie. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Status deploymentu - -Status deploymentu ostatniego commitu wyświetla się jako ikona obok jego -identyfikatora. - -- **Żółty kolor** - wykonuje się zbudowanie i deployment projektu. -- **Zielony kolor** - deploymnt zakończył się sukcesem. -- **Czerwony kolor** - podczas pracy lintera, budowania lub deploymentu wystąpił - błąd. - -Bardziej szczegółowe informacje o statusie można zobaczyć po kliknięciu na -ikonkę i przejściu w wyskakującym oknie do odnośnika `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Deployowana strona - -Po jakimś czasie, zazwyczaj kilku minut, zdeployowaną stronę będzie można -zobaczyć pod adresem wskazanym w zredagowanej właściwości `homepage`. Tutaj na -przykład znajduje się odnośnik do zdeployowanej strony w wersji dla tego -repozytorium -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma -błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu -(**404**). Najprawdopodobniej wprowadzona została niewłaściwa wartość -właściwości `homepage` w pliku `package.json`. - -### Trasowanie - -Jeżeli aplikacja wykorzystuje bibliotekę `react-router-dom` dla trasowania, -należy uzupełniająco skonfigurować komponent ``, przekazując w -propsie `basename` dokładną nazwę twojego repozytorium. Slash na początku i na -końcu łańcucha jest obowiązkowy. - -```jsx - - - -``` - -## Jak to działa - -![How it works](./assets/how-it-works.png) - -1. Po każdym pushu do gałęzi `main` repozytorium GitHub, uruchamia się specjalny - skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. -2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt zostaje - zainicjowany i przechodzi pracę lintera oraz zbudowanie przed deploymentem. -3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna - plików projektu wysyłana jest do gałęzi `gh-pages`. W przeciwnym razie, w - logu wykonania skryptu zostanie wskazane z czym jest problem. diff --git a/package-lock.json b/package-lock.json index a1d4f24..b109cef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,22 @@ { - "name": "react-homework-template", + "name": "tweets-cards", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "react-homework-template", + "name": "tweets-cards", "version": "0.1.0", "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", + "styled-components": "^6.0.7", "web-vitals": "^2.1.3" } }, @@ -1902,11 +1905,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.17.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz", - "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", + "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -1924,6 +1927,11 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/@babel/template": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", @@ -2107,6 +2115,147 @@ "postcss": "^8.3" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/react": { + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@eslint/eslintrc": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz", @@ -3333,6 +3482,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/stylis": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.3.tgz", + "integrity": "sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.3", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz", @@ -4626,6 +4780,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5161,6 +5323,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", @@ -5334,6 +5504,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -5501,9 +5681,9 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, "node_modules/csstype": { - "version": "3.0.11", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -7042,6 +7222,11 @@ "url": "https://github.com/avajs/find-cache-dir?sponsor=1" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -7562,6 +7747,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -9590,9 +9788,15 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, "node_modules/nanoid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", - "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -10254,9 +10458,9 @@ } }, "node_modules/postcss": { - "version": "8.4.12", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", - "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -10265,10 +10469,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.1", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -12348,6 +12556,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -12739,6 +12952,38 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz", + "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -12754,6 +12999,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -13224,9 +13474,9 @@ } }, "node_modules/tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -15659,11 +15909,18 @@ } }, "@babel/runtime": { - "version": "7.17.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz", - "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", + "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + } } }, "@babel/runtime-corejs3": { @@ -15789,6 +16046,127 @@ "postcss-value-parser": "^4.2.0" } }, + "@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "requires": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==" + } + } + }, + "@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "requires": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "requires": { + "@emotion/memoize": "^0.8.1" + } + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/react": { + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + } + }, + "@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "requires": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + } + }, + "@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "requires": {} + }, + "@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "@eslint/eslintrc": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz", @@ -16720,6 +17098,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/stylis": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.3.tgz", + "integrity": "sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==" + }, "@types/testing-library__jest-dom": { "version": "5.14.3", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz", @@ -17671,6 +18054,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -18067,6 +18455,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", @@ -18169,6 +18562,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -18295,9 +18698,9 @@ } }, "csstype": { - "version": "3.0.11", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "damerau-levenshtein": { "version": "1.0.8", @@ -19457,6 +19860,11 @@ "pkg-dir": "^4.1.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -19805,6 +20213,21 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -21286,9 +21709,9 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, "nanoid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", - "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==" + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" }, "natural-compare": { "version": "1.4.0", @@ -21758,11 +22181,11 @@ } }, "postcss": { - "version": "8.4.12", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", - "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "requires": { - "nanoid": "^3.3.1", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -23153,6 +23576,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -23447,6 +23875,29 @@ "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", "requires": {} }, + "styled-components": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz", + "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==", + "requires": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "dependencies": { + "stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + } + } + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -23456,6 +23907,11 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -23809,9 +24265,9 @@ } }, "tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "tsutils": { "version": "3.21.0", diff --git a/package.json b/package.json index 18768d5..e8bee81 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,17 @@ { - "name": "react-homework-template", + "name": "tweets-cards", "version": "0.1.0", "private": true, - "homepage": "https://goitacademy.github.io/react-homework-template/", + "homepage": "https://olesya-aldoshyna-0885.github.io/tweets-cards/", "dependencies": { + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", + "axios": "^1.3.6", + "numeral": "^2.0.6", + "styled-components": "^6.0.7", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", diff --git a/src/components/App.jsx b/src/components/App.jsx index ce3f3bf..87ee8aa 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,16 +1,11 @@ +// import TweetsPage from 'pages/TweetsPage'; +import Tweet from './Tweet/Tweet'; + export const App = () => { return ( -
- React homework template +
+ {/* */} +
); }; diff --git a/src/components/Avatar/Avatar.jsx b/src/components/Avatar/Avatar.jsx new file mode 100644 index 0000000..c88c9c7 --- /dev/null +++ b/src/components/Avatar/Avatar.jsx @@ -0,0 +1,13 @@ +import { AvatarBackground, AvatarImage, AvavtarWrapper } from './Avatar.styled'; + +const Avatar = ({ src }) => { + return ( + + + + + + ); +}; + +export default Avatar; diff --git a/src/components/Avatar/Avatar.styled.js b/src/components/Avatar/Avatar.styled.js new file mode 100644 index 0000000..240d7bf --- /dev/null +++ b/src/components/Avatar/Avatar.styled.js @@ -0,0 +1,33 @@ +import styled from 'styled-components'; + +export const AvavtarWrapper = styled.div` + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + left: 150px; + top: 178px; + + background: #ebd8ff; + box-shadow: 0px 4.39163px 4.39163px rgba(0, 0, 0, 0.06), + inset 0px -2.19582px 4.39163px #ae7be3, + inset 0px 4.39163px 3.29372px #fbf8ff; + border-radius: 85.9232px; +`; + +export const AvatarBackground = styled.div` + width: 62px; + height: 62px; + + background: #5736a3; + border-radius: 85.9232px; +`; + +export const AvatarImage = styled.img` + width: 100%; + height: 100%; + + border-radius: 85.9232px; +`; \ No newline at end of file diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx new file mode 100644 index 0000000..e4b844c --- /dev/null +++ b/src/components/Button/Button.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { ActiveBtn, DisabledBtn } from './Button.styled'; + +const Button = ({ isActive, onClick, isLoading }) => { + if (isActive) { + return ( + {isLoading ? '...' : 'Follow'} + ); + } + return ( + + {isLoading ? '...' : 'Following'} + + ); +}; + +export default Button; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js new file mode 100644 index 0000000..88f68f6 --- /dev/null +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,50 @@ +import styled from 'styled-components'; + +export const ActiveBtn = styled.button` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 14px 28px; + gap: 6px; + position: absolute; + width: 196px; + height: 50px; + left: 92px; + text-transform: uppercase; + top: 374px; + background: #EBD8FF; + box-shadow: 0px 3.4369285106658936px 3.4369285106658936px rgba(0, 0, 0, 0.25); + border-radius: 10.31px; + font-family: "Montserrat"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 22px; + color: #373737; + word-wrap: break-word +`; + +export const DisabledBtn = styled.button` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 14px 28px; + gap: 6px; + text-transform: uppercase; + position: absolute; + width: 196px; + height: 50px; + left: 92px; + top: 374px; + background: #5cd3a8; + box-shadow: 0px 3.43693px 3.43693px rgba(0, 0, 0, 0.25); + border-radius: 10.3108px; + font-family: "Montserrat"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; +`; \ No newline at end of file diff --git a/src/components/Tweet/Tweet.jsx b/src/components/Tweet/Tweet.jsx new file mode 100644 index 0000000..af7fc1d --- /dev/null +++ b/src/components/Tweet/Tweet.jsx @@ -0,0 +1,36 @@ +import { useState } from 'react'; +import Avatar from '../Avatar/Avatar'; +import Button from '../Button/Button'; +import { CardContainer, CardImage, Line, Logo } from './Tweet.styled'; + +const Tweet = ({ imageURL }) => { + const [isActive, setIsActive] = useState(false); + const [isLoading, setIsLoading] = useState(true); + + const handleClick = () => {}; + if (isActive) { + setIsLoading(true); + setIsActive(false); + } + // if (!isActive) { + // setIsLoading(!isActive); + // setIsActive(false); + // } + return ( + <> + + + + + +