├── .github
    ├── FUNDING.yml
    └── ISSUE_TEMPLATE
    │   └── issue-template.yml
├── .gitignore
├── .vscode
    └── settings.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── assets
    ├── History
    │   ├── History.md
    │   └── assets
    │   │   ├── mendeleev periodic table.jpg
    │   │   └── mendeleev.jfif
    ├── comingsoon.png
    ├── error404.png
    ├── notAvail.jpeg
    └── wikipedia.png
├── components
    ├── ExploreData.js
    ├── Footer.js
    ├── Header.js
    ├── Periodic_Table
    │   ├── AtomElement.module.css
    │   ├── Elements.js
    │   ├── FilterbyCategory.js
    │   └── PeriodicDetail.js
    └── RandomInfo.js
├── context
    └── userContext.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
    ├── 404.js
    ├── _app.js
    ├── api
    │   └── hello.ts
    ├── elementdata
    │   └── [elementdata].js
    ├── explore.js
    ├── history.js
    ├── index.js
    └── periodictable.js
├── postcss.config.js
├── public
    ├── Periodically-poster.gif
    ├── design_arc.png
    ├── mern.png
    ├── periodically-demo.gif
    ├── periodically_design.png
    └── periodically_favicon.png
├── styles
    └── globals.css
├── tailwind.config.js
├── tsconfig.json
├── utils
    ├── Debounce.js
    ├── SortData.js
    └── colorCode.js
└── yarn.lock


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: HarshKumarraghav
2 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/issue-template.yml:
--------------------------------------------------------------------------------
 1 | name: Issue - Issue Template
 2 | description: Report a software bug on /learn, /news, Community Forum, Code Radio, or any of the platforms.
 3 | labels: ['type: bug', 'status: waiting triage']
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: If you're reporting a security issue, don't create a GitHub issue. Instead, visit https://periodically.tech
 8 |   - type: textarea
 9 |     attributes:
10 |       label: Describe the Issue
11 |       description: A clear and concise description of the issue you encountered.
12 |     validations:
13 |       required: true
14 |   - type: textarea
15 |     attributes:
16 |       label: Screenshots
17 |       description: If applicable, add screenshots to help explain your problem. You can drag and drop `png`, `jpg`, `gif`, etc. in this box.
18 |     validations:
19 |       required: false
20 |   - type: textarea
21 |     attributes:
22 |       label: System
23 |       description: Please complete the following information.
24 |       value: 
25 |     validations:
26 |       required: false
27 |   - type: textarea
28 |     attributes:
29 |       label: Additional context
30 |       description: Add any other context about the problem here.
31 |     validations:
32 |       required: false
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | # typescript
38 | *.tsbuildinfo
39 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501,
3 |     "githubPullRequests.ignoredPullRequestBranches": [
4 |         "main"
5 |     ]
6 | }


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | raghavharsh068@gmail.com.
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | <!-- omit in toc -->
  2 | # Contributing to periodically
  3 | 
  4 | First off, thanks for taking the time to contribute! ❤️
  5 | 
  6 | All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
  7 | 
  8 | > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
  9 | > - Star the project
 10 | > - Tweet about it
 11 | > - Refer this project in your project's readme
 12 | > - Mention the project at local meetups and tell your friends/colleagues
 13 | 
 14 | <!-- omit in toc -->
 15 | ## Table of Contents
 16 | 
 17 | - [Code of Conduct](#code-of-conduct)
 18 | - [I Have a Question](#i-have-a-question)
 19 | - [I Want To Contribute](#i-want-to-contribute)
 20 | - [Reporting Bugs](#reporting-bugs)
 21 | - [Suggesting Enhancements](#suggesting-enhancements)
 22 | - [Your First Code Contribution](#your-first-code-contribution)
 23 | - [Improving The Documentation](#improving-the-documentation)
 24 | - [Styleguides](#styleguides)
 25 | - [Commit Messages](#commit-messages)
 26 | - [Join The Project Team](#join-the-project-team)
 27 | 
 28 | 
 29 | ## Code of Conduct
 30 | 
 31 | This project and everyone participating in it is governed by the
 32 | [periodically Code of Conduct](https://github.com/HarshKumarraghav/periodically_webappblob/master/CODE_OF_CONDUCT.md).
 33 | By participating, you are expected to uphold this code. Please report unacceptable behavior
 34 | to <>.
 35 | 
 36 | 
 37 | ## I Have a Question
 38 | 
 39 | > If you want to ask a question, we assume that you have read the available [Documentation]().
 40 | 
 41 | Before you ask a question, it is best to search for existing [Issues](https://github.com/HarshKumarraghav/periodically_webapp/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.
 42 | 
 43 | If you then still feel the need to ask a question and need clarification, we recommend the following:
 44 | 
 45 | - Open an [Issue](https://github.com/HarshKumarraghav/periodically_webapp/issues/new).
 46 | - Provide as much context as you can about what you're running into.
 47 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
 48 | 
 49 | We will then take care of the issue as soon as possible.
 50 | 
 51 | <!--
 52 | You might want to create a separate issue tag for questions and include it in this description. People should then tag their issues accordingly.
 53 | 
 54 | Depending on how large the project is, you may want to outsource the questioning, e.g. to Stack Overflow or Gitter. You may add additional contact and information possibilities:
 55 | - IRC
 56 | - Slack
 57 | - Gitter
 58 | - Stack Overflow tag
 59 | - Blog
 60 | - FAQ
 61 | - Roadmap
 62 | - E-Mail List
 63 | - Forum
 64 | -->
 65 | 
 66 | ## I Want To Contribute
 67 | 
 68 | > ### Legal Notice <!-- omit in toc -->
 69 | > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
 70 | 
 71 | ### Reporting Bugs
 72 | 
 73 | <!-- omit in toc -->
 74 | #### Before Submitting a Bug Report
 75 | 
 76 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
 77 | 
 78 | - Make sure that you are using the latest version.
 79 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](). If you are looking for support, you might want to check [this section](#i-have-a-question)).
 80 | - To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/HarshKumarraghav/periodically_webappissues?q=label%3Abug).
 81 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue.
 82 | - Collect information about the bug:
 83 | - Stack trace (Traceback)
 84 | - OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
 85 | - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant.
 86 | - Possibly your input and the output
 87 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions?
 88 | 
 89 | <!-- omit in toc -->
 90 | #### How Do I Submit a Good Bug Report?
 91 | 
 92 | > You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to .
 93 | <!-- You may add a PGP key to allow the messages to be sent encrypted as well. -->
 94 | 
 95 | We use GitHub issues to track bugs and errors. If you run into an issue with the project:
 96 | 
 97 | - Open an [Issue](https://github.com/HarshKumarraghav/periodically_webapp/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
 98 | - Explain the behavior you would expect and the actual behavior.
 99 | - Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
100 | - Provide the information you collected in the previous section.
101 | 
102 | Once it's filed:
103 | 
104 | - The project team will label the issue accordingly.
105 | - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
106 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
107 | 
108 | <!-- You might want to create an issue template for bugs and errors that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
109 | 
110 | 
111 | ### Suggesting Enhancements
112 | 
113 | This section guides you through submitting an enhancement suggestion for periodically, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
114 | 
115 | <!-- omit in toc -->
116 | #### Before Submitting an Enhancement
117 | 
118 | - Make sure that you are using the latest version.
119 | - Read the [documentation]() carefully and find out if the functionality is already covered, maybe by an individual configuration.
120 | - Perform a [search](https://github.com/HarshKumarraghav/periodically_webapp/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
121 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
122 | 
123 | <!-- omit in toc -->
124 | #### How Do I Submit a Good Enhancement Suggestion?
125 | 
126 | Enhancement suggestions are tracked as [GitHub issues](https://github.com/HarshKumarraghav/periodically_webapp/issues).
127 | 
128 | - Use a **clear and descriptive title** for the issue to identify the suggestion.
129 | - Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
130 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
131 | - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. <!-- this should only be included if the project has a GUI -->
132 | - **Explain why this enhancement would be useful** to most periodically users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
133 | 
134 | <!-- You might want to create an issue template for enhancement suggestions that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
135 | 
136 | ### Your First Code Contribution
137 | <!-- TODO
138 | include Setup of env, IDE and typical getting started instructions?
139 | 
140 | -->
141 | 
142 | ### Improving The Documentation
143 | <!-- TODO
144 | Updating, improving and correcting the documentation
145 | 
146 | -->
147 | 
148 | ## Styleguides
149 | ### Commit Messages
150 | <!-- TODO
151 | 
152 | -->
153 | 
154 | ## Join The Project Team
155 | <!-- TODO -->
156 | 
157 | <!-- omit in toc -->
158 | ## Attribution
159 | This guide is based on the **contributing-gen**. [Make your own](https://github.com/bttger/contributing-gen)!
160 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ### [Periodically - The Periodic table](https://periodically.tech)
  2 | 
  3 | We all remember the times when we used to struggle to remember the names, properties, groups, etc. of periodic elements. Those sweet-saur nostalgic school memories of memorizing the whole periodic table for our upcoming Unit test used to be a nightmare for many of us! The periodic table is the heart of chemistry and to make its learning more fun and engaging, the idea to build **"Periodically-The Periodic Table"** was born.
  4 | 
  5 | <p align="center">
  6 | <img src="https://img.shields.io/badge/Author-@HarshKumarraghav-critical" />
  7 | </p>
  8 | 
  9 | ![Periodically](public/Periodically-poster.gif)
 10 | 
 11 | ## ⚛️ Why a periodic table
 12 | 
 13 | In the **Periodically** web application you will find a huge amount of data about chemical elements for free. You will learn a lot of new and are useful for yourself, no matter if you are a schoolboy, student, engineer, housewife, or a person of any other provisions that do not have a refresher in Chemistry.
 14 | 
 15 | The chemistry falls into to a number of the most important sciences and is one of the main school objects.
 16 | Its studying begins with the Periodic Table. An interactive approach to a training material is more effective than a classical one. As in it
 17 | technologies which became the family for the modern pupils are used.
 18 | 
 19 | ## Periodically Demo
 20 | 
 21 | ![Video](public/periodically-demo.gif)
 22 | 
 23 | ## 📌 Description
 24 | 
 25 | **Periodically** - is a free web application that displays the entire Periodic Table at the startup interface. The table has a long-
 26 | form approved by the International Union of Pure and Applied Chemistry (IUPAC) as the core. Besides the Periodic Table of
 27 | chemical elements, you can use the Table of solubility.
 28 | 
 29 | The chemistry falls into to a number of the most important sciences and is one of the main school objects.
 30 | Its studying begins with the Periodic Table. An interactive approach to a training material is more effective than a classical one. As in it
 31 | technologies which became the family for the modern pupils are used.
 32 | 
 33 | ## ✨ Features
 34 | 
 35 | - Displays the entire Periodic Table at the startup interface.
 36 | - Thought of the day.
 37 | - When you click on any element provides information that is constantly updated.
 38 | - For most of the items have an image.
 39 | - For more information, there are direct links to Wikipedia for each item
 40 | - Table solubility
 41 | - To find any element you can use the search. The search engine is not choosy to the registry or writing style search.
 42 | - You can sort the items into 10 categories:
 43 |   • Alkaline earth metals
 44 |   • Other nonmetals
 45 |   Alkali metals
 46 |   • Halogens
 47 |   • Transition metals
 48 |   • Noble gases
 49 |   • Semiconductor
 50 |   • Lanthanides
 51 |   • Metalloids
 52 |   • Actinides
 53 |   Elements of the selected category will be listed in the search results and are highlighted in the table on the main application
 54 |   screen.
 55 | 
 56 | ## 🛠️ Design Architecture
 57 | 
 58 | ![Periodically](public/design_arc.png)
 59 | 
 60 | ## 🛠️ Periodically_golang_servers (API)
 61 | 
 62 | A simple Golang API for **Periodic Table Elements** returns in JSON format.
 63 | You can access the data by using this link:
 64 | [Periodically](https://periodically-golang-server.herokuapp.com)
 65 | 
 66 | ## 💡 Upcoming Feature
 67 | 
 68 | - Authentication
 69 | - Periodical Table - History
 70 | - Subscription-based data
 71 | - payment system (stripe or Paytm)
 72 | - Newsletter
 73 | - Contact us page
 74 | 
 75 | ## Expected JSON Data Format
 76 | 
 77 | ```JSON
 78 | {
 79 |   "name": "Hydrogen",
 80 |   "appearance": "colorless gas",
 81 |   "atomic_mass": 1.008,
 82 |   "boil": 20.271,
 83 |   "category": "diatomic nonmetal",
 84 |   "color": null,
 85 |   "density": 0.08988,
 86 |   "discovered_by": "Henry Cavendish",
 87 |   "melt": 13.99,
 88 |   "molar_heat": 28.836,
 89 |   "named_by": "Antoine Lavoisier",
 90 |   "number": 1,
 91 |   "period": 1,
 92 |   "phase": "Gas",
 93 |   "source": "https://en.wikipedia.org/wiki/Hydrogen",
 94 |   "spectral_img": "https://upload.wikimedia.org/wikipedia/commons/e/e4/Hydrogen_Spectra.jpg",
 95 |   "summary": "Hydrogen is a chemical element with chemical symbol H and atomic number 1. With an atomic weight of 1.00794 u, hydrogen is the lightest element on the periodic table. Its monatomic form (H) is the most abundant chemical substance in the Universe, constituting roughly 75% of all baryonic mass.",
 96 |   "symbol": "H",
 97 |   ":": 1,
 98 |   "ypos": 1,
 99 |   "shells": [1],
100 |   "electron_configuration": "1s1",
101 |   "electron_configuration_semantic": "1s1",
102 |   "electron_affinity": 72.769,
103 |   "electronegativity_pauling": 2.2,
104 |   "ionization_energies": [1312],
105 |   "cpk-hex": "ffffff"
106 | }
107 | ```
108 | 
109 | ---
110 | 
111 | ## 💻 Development
112 | 
113 | ### Install Repository
114 | 
115 | ```git
116 | git clone https://github.com/HarshKumarraghav/periodically_webapp
117 | ```
118 | 
119 | ### Run Project
120 | 
121 | Install node modules and run the project.
122 | 
123 | ```
124 | npm install
125 | or
126 | yarn install
127 | ```
128 | 
129 | ```
130 | npm run dev
131 | or
132 | yarn run dev
133 | ```
134 | 
135 | ### Finish
136 | 
137 | ```
138 | Your project is running on https://localhost:3000.
139 | ```
140 | 


--------------------------------------------------------------------------------
/assets/History/History.md:
--------------------------------------------------------------------------------
 1 | # History
 2 | 
 3 | - **Metals and Non-Metals**
 4 | _Antoine Lavoisier_, a French chemist, attempted to classify elements as metals and non-metals in 1789. 
 5 | 
 6 | - **Döbereiner Triads**
 7 | _Johann Wolfgang Döbereiner_, a German physicist, discovered similarities in the physical and chemical properties of certain elements forty years later after Lavoisier's classification. He grouped the similar elements into groups of three in **increasing atomic weight** and named then **triads**, properties of middle element like atomic weight, density were approximately equal to the average of the properties of other two elements. The triads were:
 8 | 
 9 |   - Lithium, Sodium, Potassium
10 |   - Calcium, Strontium, Barium 
11 |   - Chlorine, Bromine, Iodine
12 | 
13 |   For example, lithium(6.9), potassium(39.1) -> average = 23 which is sodium's atomic mass.
14 | 
15 |   So it can be seen that average atomic masses of first and last element will approximately result in the atomic mass of second element. 
16 | 
17 | - **Law of Octaves**
18 | _John Newlands_, a British scientist, organised the 62 known elements into the periodic table in the increasing order of their atomic masses. He discovered that every 8th element had similar properties.
19 | He compared the similarity between the elements with the octaves of music where every 8th note is comparable to the first, hence the name.
20 | 
21 |   - Sodium is one of lithium's eight elements. 
22 |   - Chlorine is the 8th element after Fluorine.
23 |   
24 |   But this was only applicable till calcium and not to the elements with higher atomic masses than calcium. Also, few dissimilar elements were grouped together like halogens with metals such as Cobalt(Co), Nickel(Ni) and Platinum(Pt).
25 |   
26 |   
27 | 
28 | # About Mendeleev - Father of Periodic Table
29 | <img src="assets/mendeleev.jfif" align="left" alt="mendeleev" width="200" height="200" />
30 | 
31 | _Dmriti Ivanovich Mendeleev_, a Russian chemist, who is best known for developing the **Periodic Law** and creating a version of **periodic table of elements**. He was born in 1783 near Tobolsk in Siberia. He faced a lot of problems from financial issues to health problems like tuberculosis and the demise of his parents.
32 | 
33 | In his professional life, he worked on **capillarity of liquids** and the workings of **spectroscope**. He also published a textbook named **Principles of Chemistry** which made him won **Demidov Prize**. This book dealt with the elasticity of gases and a major formula for their deviation from Boyle’s law, the principle that the volume of a gas varies inversely with its pressure. After this he studied the thermal expansion too. While working on this book, he accidently discovered the periodic law. Later, he became Doctor of Science for his dissertion on the "Combinations of Water with Alcohol".
34 | He was honored with Noble prize in 1906 for his Periodic Table.
35 | 
36 | <br clear="left"/>
37 | <br>
38 | 
39 | # Mendeleev's Periodic Table
40 | <br>
41 | <p align="center">
42 |     <img src="assets/mendeleev periodic table.jpg" alt="mendeleev periodic table" width="800" height="400" />
43 | </p>
44 | <br>
45 | 
46 | Mendeleev arranged all 63 elements known at that time in the form of a table i.e. **Mendeleev's Periodic Table**. The elements were arranged in the order of their increasing atomic weights. These series were divided into 7 horizontal columns(periods) and 8 vertical columns(groups). He proposed a Periodic Law:
47 | 
48 | ` "The physical and chemical properties of the elements are the periodic function of their atomic weights." `
49 | 
50 | One of the major property of his table was that **he left some gaps for the undiscovered elements** which were later found to be correct like Germanium, Scandium and Gallium which were known as Eka - silicon, Eka - boron and Eka - aluminium respectively in the table.
51 | 
52 | Another important characteristic is that noble gases were placed in a separate group called **Zero Group**, after VIII group without making disturbance to the initial arrangement.


--------------------------------------------------------------------------------
/assets/History/assets/mendeleev periodic table.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/assets/History/assets/mendeleev periodic table.jpg


--------------------------------------------------------------------------------
/assets/History/assets/mendeleev.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/assets/History/assets/mendeleev.jfif


--------------------------------------------------------------------------------
/assets/comingsoon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/assets/comingsoon.png


--------------------------------------------------------------------------------
/assets/error404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/assets/error404.png


--------------------------------------------------------------------------------
/assets/notAvail.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/assets/notAvail.jpeg


--------------------------------------------------------------------------------
/assets/wikipedia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/assets/wikipedia.png


--------------------------------------------------------------------------------
/components/ExploreData.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import Link from "next/link";
  3 | import Classes from "../components/Periodic_Table/AtomElement.module.css";
  4 | import { ArrowBack, GitHub } from "@mui/icons-material";
  5 | import { useRouter } from "next/router";
  6 | import { SortExplore } from "../utils/SortData";
  7 | const ExploreData = ({ filterData, tableData, setFilterData, handleClick }) => {
  8 |   const router = useRouter();
  9 |   const [sortingData, setSortingData] = useState("number");
 10 |   const colorMap = {
 11 |     "noble gas": "#3AB0FF",
 12 |     "polyatomic nonmetal": "#F00699",
 13 |     "alkaline earth metal": "#01708F",
 14 |     "diatomic nonmetal": "#FF5F00",
 15 |     "alkali metal": "#3E00FF",
 16 |     "transition metal": "#BF1A2F",
 17 |     "post-transition metal": "#890596",
 18 |     lanthanide: "#7868E6",
 19 |     actinide: "#FF8C32",
 20 |     metalloid: "#3EC70B",
 21 |   };
 22 |   // sorting  by name
 23 |   useEffect(() => {
 24 |     if (sortingData === "") {
 25 |       setFilterData(tableData);
 26 |     } else if (sortingData === "name") {
 27 |       const sortedData = [...tableData].sort((a, b) =>
 28 |         a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
 29 |       );
 30 |       setFilterData(sortedData);
 31 |     }
 32 |   }, [sortingData, tableData]);
 33 | 
 34 |   // sorting by symbol
 35 |   useEffect(() => {
 36 |     if (sortingData === "") {
 37 |       setFilterData(tableData);
 38 |     } else if (sortingData === "symbol") {
 39 |       const sortedData = [...tableData].sort((a, b) =>
 40 |         a.symbol.toLowerCase() < b.symbol.toLowerCase() ? -1 : 1
 41 |       );
 42 |       setFilterData(sortedData);
 43 |     }
 44 |   }, [sortingData, tableData]);
 45 | 
 46 |   // sorting by atomic number
 47 |   useEffect(() => {
 48 |     if (sortingData === "") {
 49 |       setFilterData(tableData);
 50 |     } else if (sortingData === "number") {
 51 |       const sortedData = [...tableData].sort((a, b) =>
 52 |         a.number < b.number ? -1 : 1
 53 |       );
 54 |       setFilterData(sortedData);
 55 |     }
 56 |   }, [sortingData, tableData]);
 57 |   // sorting by category
 58 |   useEffect(() => {
 59 |     if (sortingData === "") {
 60 |       setFilterData(tableData);
 61 |     } else if (sortingData === "category") {
 62 |       const sortedData = [...tableData].sort((a, b) =>
 63 |         a.category.toLowerCase() < b.category.toLowerCase() ? -1 : 1
 64 |       );
 65 |       setFilterData(sortedData);
 66 |     }
 67 |   }, [sortingData, tableData]);
 68 |   // sorting by Appearence
 69 |   useEffect(() => {
 70 |     if (sortingData === "") {
 71 |       setFilterData(tableData);
 72 |     } else if (sortingData === "appearance") {
 73 |       const sortedData = [...tableData].sort((a, b) =>
 74 |         a.phase.toLowerCase() < b.phase.toLowerCase() ? -1 : 1
 75 |       );
 76 |       setFilterData(sortedData);
 77 |     }
 78 |   }, [sortingData, tableData]);
 79 |   return (
 80 |     <div className="w-screen h-screen bg-primary">
 81 |       <div className="w-full bg-primary h-14">
 82 |         <div className="flex items-center justify-between">
 83 |           <div onClick={() => router.push("/periodictable")}>
 84 |             <ArrowBack className="ml-8 active:scale-90 hover:scale-95 transition text-primary-white  w-10 h-10 rounded-md shadow-light-card m-2" />
 85 |           </div>
 86 | 
 87 |           <Link href={"https://github.com/HarshKumarraghav/"}>
 88 |             <a target="_blank">
 89 |               <div>
 90 |                 <GitHub className="mr-8 active:scale-90 hover:scale-95 transition text-primary-white  w-10 h-10 rounded-md shadow-light-card m-2" />
 91 |               </div>
 92 |             </a>
 93 |           </Link>
 94 |         </div>
 95 |       </div>
 96 |       <div className="w-screen h-[400px] md:h-[750px] sticky col-span-3 mx-auto md:flex flex-col items-center bg-primary">
 97 |         <div className="w-full h-2"></div>
 98 |         <div className="text-primary-white p-4 rounded-md fond-custom">
 99 |           <h1 className="text-2xl text-primary-color ">
100 |             Sort the element on the basis of:{" "}
101 |           </h1>
102 |           <ul>
103 |             <li>- Atomic Number</li>
104 |             <li>- Name</li>
105 |             <li>- Symbol</li>
106 |             <li>
107 |               - Category(Alkali metal, Alkaline earth metal, Nobel gas ...)
108 |             </li>
109 |             <li>- Phase (Gas Liquid , Solid)</li>
110 |           </ul>
111 |         </div>
112 |         <div className="w-full h-4"></div>
113 | 
114 |         <div className="item-center bg-primary p-3 flex">
115 |           {SortExplore?.map((data) => (
116 |             <button
117 |               key={data.key + data.id}
118 |               onClick={() => setSortingData(data.key)}
119 |               className={
120 |                 sortingData === data.key
121 |                   ? "w-40 h-8 font-bold p-1 bg-primary-color rounded-md shadow-light-card text-[10px] font-custom active:scale-90 hover:scale-95 transition text-gray-300"
122 |                   : "w-40 h-8 font-bold p-1 rounded-md shadow-light-card text-[10px] font-custom active:scale-90 hover:scale-95 transition text-gray-300"
123 |               }
124 |             >
125 |               {data.title}
126 |             </button>
127 |           ))}
128 |         </div>
129 |         <div className="overflow-y-scroll bg-gray-900 mb-4 h-[335px] md:h-full overflow-hidden scrollbar-hide">
130 |           {filterData.map((item) => (
131 |             <div
132 |               className="flex md:w-[600px] bg-primary-light h-20 gap-2 shadow-light-card m-4 items-center justify-between rounded-md active:scale-90 hover:scale-95 transition"
133 |               key={item.number}
134 |               onClick={() => {
135 |                 router.push(`/elementdata/${item.number}`);
136 |               }}
137 |             >
138 |               <div className="w-16 md:w-20 h-full">
139 |                 <div
140 |                   className="relative w-16 md:w-20 h-full flex items-center flex-col rounded-md text-primary-white"
141 |                   style={{ backgroundColor: colorMap[item.category] }}
142 |                 >
143 |                   <div className={Classes.number}>{item.number}</div>
144 |                   <div className={Classes.symbol}>{item.symbol}</div>
145 |                   <div className={Classes.name}>{item.name}</div>
146 |                 </div>
147 |               </div>
148 |               <div className="flex justify-center text-left flex-col w-30 h-full  text-primary-white">
149 |                 <h1
150 |                   className="text-sm font-bold"
151 |                   style={{ color: colorMap[item.category] }}
152 |                 >
153 |                   {item.number}.{item.name}
154 |                 </h1>
155 |                 <h1 Discovered className="text-[12px] italic">
156 |                   Discovered by:{item.discovered_by}
157 |                 </h1>
158 |               </div>
159 |               <div className="flex text-left justify-center flex-col w-30 h-full text-primary-white mr-5">
160 |                 <h1 className="text-[11px] font-bold">
161 |                   Nature:{item.category.toUpperCase()}
162 |                 </h1>
163 |                 <div className="flex p-1 gap-2 justify-center">
164 |                   <div className="text-[12px]">
165 |                     <h2>Electron</h2>
166 |                     <p className="text-center">{item.number}</p>
167 |                   </div>
168 |                   <div className="text-[12px]">
169 |                     <h2>Proton</h2>
170 |                     <p className="text-center">{item.number}</p>
171 |                   </div>
172 |                   <div className="text-[12px]">
173 |                     <h2>Neutron</h2>
174 |                     <p className="text-center">
175 |                       {Math.round(item.atomic_mass - item.number)}
176 |                     </p>
177 |                   </div>
178 |                 </div>
179 |               </div>
180 |             </div>
181 |           ))}
182 |         </div>
183 |         <div className="flex items-center justify-between flex-col mt-8">
184 |           <div onClick={() => router.push("/periodictable")}>
185 |             <h1 className="text-primary-color text-xl md:text-md text-gara font-bold">
186 |               Explore the random Element:
187 |             </h1>
188 |           </div>
189 | 
190 |           <div onClick={handleClick}>
191 |             <button className="mr-8 active:scale-90 hover:scale-95 text-primary-white bg-primary-color transition w-44 h-12 rounded-md shadow-light-card m-2">
192 |               Spin Element!
193 |             </button>
194 |           </div>
195 |         </div>
196 |       </div>
197 |     </div>
198 |   );
199 | };
200 | 
201 | export default ExploreData;
202 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Link from "next/link";
  3 | import {
  4 |   GitHub,
  5 |   Instagram,
  6 |   LinkedIn,
  7 |   Public,
  8 |   Twitter,
  9 | } from "@mui/icons-material";
 10 | const Footer = () => {
 11 |   return (
 12 |     <>
 13 |       <div className=" text-grey-600 grid grid-cols-1 gap-y-10 bg-primary-light shadow-light-card px-8 py-14 md:grid-cols-3 font-custom">
 14 |       <div className="flex flex-col text-primary-white">
 15 |       <h2 className="font-head bg-primary-color text-primary-white text-md w-28 text-center border-2 p-2 rounded-xl shadow-light-card">
 16 |          Periodically
 17 |         </h2>
 18 |         <p className="text-md mt-2">
 19 |               "The place where you can learn anything and everything about
 20 |               elements by which our universe is made of."
 21 |             </p>
 22 |         </div>
 23 |         <div className="flex text-xs flex-col  text-primary-white">
 24 |           <h5 className="font-bold text-center mb-8 text-lg  hover:text-primary-color transition">
 25 |             Social
 26 |           </h5>
 27 |           <div className="flex justify-center">
 28 |             <Link href={"https://github.com/HarshKumarraghav"} target="_blank">
 29 |               <a target="_blank">
 30 |                 <div className="hover:text-primary-color m-2 mr-4 active:scale-90 hover:scale-95 transition shadow-light-card p-3 bg-primary rounded-lg hover:-translate-y-4">
 31 |                   <GitHub />
 32 |                 </div>
 33 |               </a>
 34 |             </Link>
 35 |             <Link
 36 |               href={"https://www.linkedin.com/in/harsh-kumar-raghav-7285311b9/"}
 37 |               target="_blank"
 38 |             >
 39 |               <a target="_blank">
 40 |                 <div className="hover:text-primary-color m-2 mr-4 active:scale-90 hover:scale-95 transition shadow-light-card p-3 bg-primary rounded-lg hover:-translate-y-4">
 41 |                   <LinkedIn />
 42 |                 </div>
 43 |               </a>
 44 |             </Link>
 45 |             <Link href={"https://www.instagram.com/"} target="_blank">
 46 |               <a target="_blank">
 47 |                 <div className="hover:text-primary-color m-2 mr-4 active:scale-90 hover:scale-95 transition shadow-light-card p-3 bg-primary rounded-lg hover:-translate-y-4">
 48 |                   <Instagram />
 49 |                 </div>
 50 |               </a>
 51 |             </Link>
 52 |             <Link href={"https://twitter.com/_Harsh_raghav_"} target="_blank">
 53 |               <a target="_blank">
 54 |                 <div className="hover:text-primary-color m-2 mr-4 active:scale-90 hover:scale-95 transition shadow-light-card p-3 bg-primary rounded-lg hover:-translate-y-4">
 55 |                   <Twitter />
 56 |                 </div>
 57 |               </a>
 58 |             </Link>
 59 |             <Link
 60 |               href={"https://harshraghav.me"}
 61 |               target="_blank"
 62 |             >
 63 |               <a target="_blank">
 64 |                 <div className="hover:text-primary-color m-2 mr-4 active:scale-90 hover:scale-95 transition shadow-light-card p-3 bg-primary rounded-lg hover:-translate-y-4">
 65 |                   <Public />
 66 |                 </div>
 67 |               </a>
 68 |             </Link>
 69 |           </div>
 70 |         </div>
 71 | 
 72 |         <div className="flex text-xs flex-col text-primary-white">
 73 |           <h5 className="font-bold text-lg  text-center mb-2 hover:text-primary-color transition">
 74 |             About Me
 75 |           </h5>
 76 |           <h2 className="text-sm">
 77 |             Front-end Developer intern at
 78 |             <Link
 79 |               href={"http://botsfusionai.com"}
 80 |               target="_blank"
 81 |             >
 82 |               <a target="_blank">
 83 |                 <span className="text-primary-color"> Bots Fusion AI</span>
 84 |                
 85 |               </a>
 86 |             </Link>
 87 |             , Skilled at Algorithms, C (Programming Language), C++, and Video Editing.
 88 |             Strong media and communication professional with a Bachelor's degree
 89 |             focused in Information Technology from Gautam buddha University.
 90 |           </h2>
 91 |         </div>
 92 |       </div>
 93 |       <div className="display flex items-center flex-col bg-primary text-primary-white">
 94 |         <h5 className="text-md">Create with ❤️ by "Harsh Raghav"</h5>
 95 |         <h5 className="text-[12px]">Ⓒ2022 Raghav inc. All rights reserved. </h5>
 96 |       </div>
 97 |     </>
 98 |   );
 99 | };
100 | 
101 | export default Footer;
102 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { SearchIcon } from "@heroicons/react/solid";
  3 | import Link from "next/link";
  4 | import Classes from "../components/Periodic_Table/AtomElement.module.css";
  5 | import { GitHub, HistoryEdu, Explore } from "@mui/icons-material";
  6 | import { useRouter } from "next/router";
  7 | import { usePeriodicTable } from "../context/userContext";
  8 | import { MyDebounce } from "../utils/Debounce";
  9 | import { colorMap } from "../utils/colorCode";
 10 | import { SortHeader } from "../utils/SortData";
 11 | const Header = () => {
 12 |   const router = useRouter();
 13 |   const [tableData] = usePeriodicTable();
 14 |   const [filterData, setFilterData] = useState("");
 15 |   const [sortingData, setSortingData] = useState("number");
 16 |   useEffect(() => {
 17 |     setFilterData(tableData);
 18 |   }, [tableData]);
 19 | 
 20 |   const [searchInput, setSearchInput] = useState("");
 21 |   const [active, setActive] = useState(false);
 22 | 
 23 |   // sorting  by name
 24 |   useEffect(() => {
 25 |     if (sortingData === "") {
 26 |       setFilterData(tableData);
 27 |     } else if (sortingData === "name") {
 28 |       const sortedData = [...tableData].sort((a, b) =>
 29 |         a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
 30 |       );
 31 |       setFilterData(sortedData);
 32 |     }
 33 |   }, [sortingData, tableData]);
 34 | 
 35 |   // sorting by symbol
 36 |   useEffect(() => {
 37 |     if (sortingData === "") {
 38 |       setFilterData(tableData);
 39 |     } else if (sortingData === "symbol") {
 40 |       const sortedData = [...tableData].sort((a, b) =>
 41 |         a.symbol.toLowerCase() < b.symbol.toLowerCase() ? -1 : 1
 42 |       );
 43 |       setFilterData(sortedData);
 44 |     }
 45 |   }, [sortingData, tableData]);
 46 | 
 47 |   // sorting by atomic number
 48 |   useEffect(() => {
 49 |     if (sortingData === "") {
 50 |       setFilterData(tableData);
 51 |     } else if (sortingData === "number") {
 52 |       const sortedData = [...tableData].sort((a, b) =>
 53 |         a.number < b.number ? -1 : 1
 54 |       );
 55 |       setFilterData(sortedData);
 56 |     }
 57 |   }, [sortingData, tableData]);
 58 |   const handleClose = (e) => {
 59 |     if (e.target.id === "handle") {
 60 |       setActive(false);
 61 |     }
 62 |   };
 63 |   const SetInputString = (value) => {
 64 |     setSearchInput(value);
 65 |   };
 66 |   /* `const DebouncedSetInputString = MyDebounce(SetInputString, 3000);` is creating a debounced version
 67 | of the `SetInputString` function using the `MyDebounce` utility function. This means that when
 68 | `DebouncedSetInputString` is called, it will wait for 3000 milliseconds (3 seconds) before actually
 69 | executing the `SetInputString` function. This is useful for handling user input in real-time without
 70 | overwhelming the system with too many requests. */
 71 |   const DebouncedSetInputString = MyDebounce(SetInputString, 300);
 72 |   return (
 73 |     <header
 74 |       className="sticky top-0 z-50 grid grid-cols-3 bg-primary p-5 shadow-light-card md:px-10"
 75 |       id="handle"
 76 |       onClick={handleClose}
 77 |     >
 78 |       {/* left div */}
 79 |       <div
 80 |         onClick={() => router.push("/periodictable")}
 81 |         className="relative my-auto flex h-10 cursor-pointer sm:items-center sm:justify-start items-center"
 82 |       >
 83 |         <h2 className="font-head md:w-40 text-center bg-primary-color text-primary-white text-md  border-2 p-2 rounded-xl shadow-light-card">
 84 |           Periodically
 85 |         </h2>
 86 |       </div>
 87 |       {/*  middle div - search*/}
 88 |       <div
 89 |         className="hidden md:hidden lg:flex items-center rounded-xl py-2 text-sm text-primary-white placeholder-primary-white lg:border-2 lg:shadow-light-card "
 90 |         onClick={() => setActive(true)}
 91 |       >
 92 |         <input
 93 |           onChange={(e) => {
 94 |             DebouncedSetInputString(e.target.value);
 95 |           }}
 96 |           type="text"
 97 |           placeholder={"Search your element by name || symbol || number"}
 98 |           className=" flex-grow bg-transparent pl-5 outline-none text-primary-white"
 99 |         />
100 |         <SearchIcon className="hidden h-8 cursor-pointer rounded-full bg-primary-color p-2 text-white md:mx-2 md:inline-flex active:scale-90 hover:scale-95" />
101 |       </div>
102 |       <div
103 |         className="lg:hidden flex items-center md:w-40 justify-between bg-primary-color rounded-xl border-2 p-2  shadow-light-card active:scale-90 hover:scale-95"
104 |         onClick={() => router.push("/explore")}
105 |       >
106 |         <button className="md:inline text-primary-white">Explore</button>
107 |         <Explore className="h-6 cursor-pointer text-primary-white" />
108 |       </div>
109 |       {/* right div */}
110 |       <div className="flex items-center justify-end space-x-4 text-gray-500 ">
111 |         <div
112 |           className="hidden md:hidden lg:flex items-center justify-around  bg-primary-color rounded-xl lg:border-2 lg:p-2  ml-4 shadow-light-card active:scale-90 hover:scale-95"
113 |           onClick={() => router.push("/explore")}
114 |         >
115 |           <button className=" md:inline text-primary-white">Explore</button>
116 |           <Explore className="h-6 cursor-pointer text-primary-white" />
117 |         </div>
118 |         <div
119 |           className="flex items-center rounded-xl border-2 p-2 shadow-light-card active:scale-90 hover:scale-95"
120 |           onClick={() => router.push("/history")}
121 |         >
122 |           <HistoryEdu className="h-6 cursor-pointer text-primary-white" />
123 |           <button className=" hidden md:inline text-primary-white">
124 |             History
125 |           </button>
126 |         </div>
127 |         <Link
128 |           href={
129 |             "https://github.com/HarshKumarraghav/periodically_golang_server"
130 |           }
131 |         >
132 |           <a target="_blank">
133 |             <div className=" flex items-center rounded-xl border-2 p-2 shadow-light-card active:scale-90 hover:scale-95">
134 |               <GitHub className="h-6 cursor-pointer text-primary-white" />
135 |               <p className="hidden md:inline md:text-primary-white">Api-docs</p>
136 |             </div>
137 |           </a>
138 |         </Link>
139 |       </div>
140 |       {active && (
141 |         <div className="hidden sticky col-span-3  mx-auto md:flex flex-col items-center h-[550px]">
142 |           <div className="item-center m-4 flex">
143 |             {SortHeader?.map((data) => (
144 |               <button
145 |                 key={data.key + data.id}
146 |                 onClick={() => setSortingData(data.key)}
147 |                 className={
148 |                   sortingData === data.key
149 |                     ? "w-40 h-8 font-bold p-1 bg-primary-color rounded-md shadow-light-card text-[10px] font-custom active:scale-90 hover:scale-95 transition text-gray-300"
150 |                     : "w-40 h-8 font-bold p-1 rounded-md shadow-light-card text-[10px] font-custom active:scale-90 hover:scale-95 transition text-gray-300"
151 |                 }
152 |               >
153 |                 {data.title}
154 |               </button>
155 |             ))}
156 |           </div>
157 |           <div className="col-span-3 overflow-x-scroll scrollbar-hide">
158 |             {filterData
159 |               .filter((value) => {
160 |                 if (searchInput === "") {
161 |                   return value;
162 |                 } else {
163 |                   return (
164 |                     value.name
165 |                       .toLowerCase()
166 |                       .includes(searchInput.toLowerCase()) ||
167 |                     value.symbol
168 |                       .toLowerCase()
169 |                       .includes(searchInput.toLowerCase()) ||
170 |                     value.number.toString().includes(searchInput)
171 |                   );
172 |                 }
173 |               })
174 |               .map((item) => (
175 |                 <div
176 |                   className="flex w-[450px] bg-primary-light h-20 gap-2 shadow-light-card m-4 items-center justify-between rounded-md active:scale-90 hover:scale-95 transition "
177 |                   key={item.number}
178 |                   onClick={() => {
179 |                     router.push(`/elementdata/${item.number}`),
180 |                       setActive(false);
181 |                   }}
182 |                 >
183 |                   <div className="w-20 h-full">
184 |                     <div
185 |                       className="relative w-20 h-full flex items-center flex-col rounded-md text-primary-white"
186 |                       style={{ backgroundColor: colorMap[item.category] }}
187 |                     >
188 |                       <div className={Classes.number}>{item.number}</div>
189 |                       <div className={Classes.symbol}>{item.symbol}</div>
190 |                       <div className={Classes.name}>{item.name}</div>
191 |                     </div>
192 |                   </div>
193 |                   <div className="flex justify-center text-left flex-col w-30 h-full mr-12 text-primary-white">
194 |                     <h1
195 |                       className="text-sm font-bold"
196 |                       style={{ color: colorMap[item.category] }}
197 |                     >
198 |                       {item.number}.{item.name}
199 |                     </h1>
200 |                     <h1 Discovered className="text-[12px] italic">
201 |                       Discovered by:{item.discovered_by}
202 |                     </h1>
203 |                   </div>
204 |                   <div className="flex text-left justify-center flex-col w-30 h-full text-primary-white mr-5">
205 |                     <h1 className="text-[11px] font-bold">
206 |                       Nature:{item.category.toUpperCase()}
207 |                     </h1>
208 |                     <div className="flex p-1 gap-2 justify-center">
209 |                       <div className="text-[12px]">
210 |                         <h2>Electron</h2>
211 |                         <p className="text-center">{item.number}</p>
212 |                       </div>
213 |                       <div className="text-[12px]">
214 |                         <h2>Proton</h2>
215 |                         <p className="text-center">{item.number}</p>
216 |                       </div>
217 |                       <div className="text-[12px]">
218 |                         <h2>Neutron</h2>
219 |                         <p className="text-center">
220 |                           {Math.round(item.atomic_mass - item.number)}
221 |                         </p>
222 |                       </div>
223 |                     </div>
224 |                   </div>
225 |                 </div>
226 |               ))}
227 |           </div>
228 |         </div>
229 |       )}
230 |     </header>
231 |   );
232 | };
233 | 
234 | export default Header;
235 | 


--------------------------------------------------------------------------------
/components/Periodic_Table/AtomElement.module.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cormorant+Garamond:wght@400;500&family=Montserrat:wght@400;500&display=swap");
 2 | .periodictable {
 3 |   display: grid;
 4 |   grid-template-columns: repeat(18, 68px);
 5 |   grid-template-rows: repeat(10, 68px);
 6 |   grid-gap: 8px;
 7 | }
 8 | 
 9 | .element {
10 |   background: #ffffff26;
11 |   box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
12 |   border-radius: 5px;
13 |   position: relative;
14 |   text-align: center;
15 |   display: flex;
16 |   flex-direction: column;
17 |   cursor: pointer;
18 |   z-index: 1;
19 | }
20 | .element:hover {
21 |   box-shadow: -12px -12px 12px 0 rgba(58, 58, 58, 0.3),
22 |     12px 12px 12px 0 rgba(0, 0, 0, 0.2);
23 |   transform: scale3d(1.1, 1.1, 1.1);
24 |   transition: all 250ms ease-in-out;
25 | }
26 | .number {
27 |   font-family: "Cormorant Garamond", serif;
28 |   font-weight: 400;
29 |   font-size: 14px;
30 |   position: absolute;
31 |   top: 7px;
32 |   left: 7px;
33 |   display: table;
34 |   flex: 0 1;
35 | }
36 | .symbol {
37 |   font-size: 25px;
38 |   padding-top: 7px;
39 |   font-weight: 700;
40 |   padding-top: 15px;
41 |   flex: 6 1;
42 |   font-family: "Cormorant Garamond", serif;
43 | }
44 | 
45 | .name {
46 |   font-size: 10px;
47 |   letter-spacing: 0.54px;
48 |   flex: 3 1;
49 |   text-transform: capitalize;
50 |   font-family: "Cormorant Garamond", serif;
51 | }
52 | 
53 | .ptlegend {
54 |   position: absolute;
55 |   top: 1%;
56 |   left: 250px;
57 |   display: grid;
58 |   grid-template-columns: repeat(2, 1fr);
59 |   grid-gap: 12px;
60 |   color: #eeeeee;
61 | }
62 | .elementDetail {
63 |   width: 150px;
64 |   height: 150px;
65 |   background: #ffffff26;
66 |   box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
67 |   border-radius: 5px;
68 |   position: relative;
69 |   text-align: center;
70 |   display: flex;
71 |   justify-content: space-evenly;
72 |   flex-direction: column;
73 |   cursor: pointer;
74 |   z-index: 1;
75 | }
76 | .numberDetail {
77 |   font-family: "Cormorant Garamond", serif;
78 |   font-weight: 400;
79 |   position: absolute;
80 |   top: 7px;
81 |   left: 7px;
82 |   display: table;
83 |   flex: 0 1;
84 | }
85 | .symbolDetail {
86 |   padding-top: 7px;
87 |   font-weight: 700;
88 |   padding-top: 15px;
89 |   font-family: "Cormorant Garamond", serif;
90 | }
91 | 
92 | .nameDetail {
93 |   padding-top: 7px;
94 |   letter-spacing: 0.54px;
95 |   text-transform: capitalize;
96 |   font-family: "Cormorant Garamond", serif;
97 | }
98 | 


--------------------------------------------------------------------------------
/components/Periodic_Table/Elements.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { motion, AnimatePresence } from "framer-motion";
 3 | import Classes from "./AtomElement.module.css";
 4 | import { usePeriodicTable } from "../../context/userContext";
 5 | import FilterbyCategory from "../../components/Periodic_Table/FilterbyCategory";
 6 | import Link from "next/link";
 7 | import { Rings } from "react-loader-spinner";
 8 | import { colorMap } from "../../utils/colorCode";
 9 | 
10 | const Elements = () => {
11 |   const [tableData] = usePeriodicTable();
12 |   const [loadingTable] = usePeriodicTable();
13 |   const [filterData, setFilterData] = useState([]);
14 |   const [activeCategory, setActiveCategory] = useState("");
15 |   useEffect(() => {
16 |     setFilterData(tableData);
17 |   }, [tableData]);
18 | 
19 |   return (
20 |     <>
21 |       {loadingTable == false ? (
22 |         <div className="w-screen h-screen bg-primary flex items-center justify-center flex-col ">
23 |           <Rings
24 |             height="300"
25 |             width="300"
26 |             radius="20"
27 |             color="#D82148"
28 |             ariaLabel="three-dots-loading"
29 |             wrapperStyle
30 |             wrapperClass
31 |           />
32 |           <p className="font-head text-2xl text-primary-color">Loading....</p>
33 |         </div>
34 |       ) : (
35 |         <div className="w-full min-h-screen bg-primary text-primary-white p-4">
36 |           <div className="w-full h-full flex items-center justify-center relative overflow-x-auto scroll whitespace-nowrap p-3 mt-8">
37 |             <aside className={Classes.ptlegend}>
38 |               <FilterbyCategory
39 |                 setFilterData={setFilterData}
40 |                 activeCategory={activeCategory}
41 |                 setActiveCategory={setActiveCategory}
42 |               />
43 |             </aside>
44 |             <div
45 |               className={Classes.periodictable}
46 |               style={{ position: "relative" }}
47 |             >
48 |               <AnimatePresence>
49 |                 {filterData?.map((element, i) => (
50 |                   <Link
51 |                     href="/elementdata/[elementdata]"
52 |                     as={`/elementdata/${element.number}`}
53 |                     key={element.number}
54 |                   >
55 |                     <motion.div
56 |                       className={Classes.element}
57 |                       style={{
58 |                         gridRow: element.ypos,
59 |                         gridColumn: element.xpos,
60 |                         backgroundColor:
61 |                           activeCategory === ""
62 |                             ? colorMap[element.category]
63 |                             : element?.bgColor,
64 |                       }}
65 |                       initial={{ opacity: 0, scale: 0 }}
66 |                       animate={{ opacity: 1, scale: 1 }}
67 |                       transition={{ duration: 0.5 }}
68 |                       exit={{ opacity: 0, scale: 0 }}
69 |                     >
70 |                       <div className={Classes.number}>{element.number}</div>
71 |                       <div className={Classes.symbol}>{element.symbol}</div>
72 |                       <div className={Classes.name}>{element.name}</div>
73 |                     </motion.div>
74 |                   </Link>
75 |                 ))}
76 |               </AnimatePresence>
77 |             </div>
78 |             <div
79 |               className={Classes.periodictable}
80 |               style={{ position: "absolute", top: 12 }}
81 |             ></div>
82 |           </div>
83 |         </div>
84 |       )}
85 |     </>
86 |   );
87 | };
88 | 
89 | export default Elements;
90 | 


--------------------------------------------------------------------------------
/components/Periodic_Table/FilterbyCategory.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { usePeriodicTable } from "../../context/userContext";
 3 | import { color, motion } from "framer-motion";
 4 | import { buttonDataMap, colorMap } from "../../utils/colorCode";
 5 | 
 6 | const FilterbyCategory = ({
 7 |   setFilterData,
 8 |   activeCategory,
 9 |   setActiveCategory,
10 | }) => {
11 |   const [tableData] = usePeriodicTable();
12 |   useEffect(() => {
13 |     setFilterData(
14 |       tableData.map((element) =>
15 |         element.category === activeCategory
16 |           ? { ...element, bgColor: colorMap[activeCategory] }
17 |           : activeCategory === ""
18 |           ? {
19 |               ...element,
20 |               bgColor: colorMap[element.category],
21 |             }
22 |           : {
23 |               ...element,
24 |               bgColor: "#ffffff26",
25 |             }
26 |       )
27 |     );
28 |   }, [activeCategory, tableData]);
29 |   return (
30 |     <motion.div
31 |       initial={{ opacity: 0, y: -50 }}
32 |       animate={{ opacity: 1, y: 0 }}
33 |       transition={{ duration: 0.8, delay: 0.2 }}
34 |       className="w-full flex flex-wrap items-center justify-center gap-2 z-10"
35 |     >
36 |       <div className="w-full text-center p-1 rounded-md text-primary-color z-10 mb-1 text-2xl font-bold font-gara">
37 |         Filter the Elements
38 |       </div>
39 |       <motion.button
40 |         onClick={() => setActiveCategory("")}
41 |         className="w-40 h-8 font-bold p-1 rounded-md shadow-light-card text-[10px] font-custom active:scale-90 hover:scale-95 transition text-gray-300"
42 |         whileHover={{ scale: 1.05 }}
43 |         whileTap={{ scale: 0.95 }}
44 |       >
45 |         ALL ELEMENTS
46 |       </motion.button>
47 |       {buttonDataMap?.map((buttonData) => (
48 |         <motion.button
49 |           className="w-40 h-8 p-1 font-bold rounded-md shadow-light-card text-[11px] font-custom active:scale-90 hover:scale-95 transition"
50 |           key={buttonData.id}
51 |           onClick={() => setActiveCategory(buttonData.name)}
52 |           style={{ color: buttonData.color }}
53 |           whileHover={{ scale: 1.05 }}
54 |           whileTap={{ scale: 0.95 }}
55 |         >
56 |           {buttonData.name.toUpperCase()}
57 |         </motion.button>
58 |       ))}
59 |     </motion.div>
60 |   );
61 | };
62 | 
63 | export default FilterbyCategory;
64 | 


--------------------------------------------------------------------------------
/components/Periodic_Table/PeriodicDetail.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { useRouter } from "next/router";
  3 | import Image from "next/image";
  4 | import Head from "next/head";
  5 | import Classes from "./AtomElement.module.css";
  6 | import {
  7 |   ArrowBack,
  8 |   Book,
  9 |   ContentPasteSearch,
 10 |   Analytics,
 11 |   Biotech,
 12 |   ArrowForward,
 13 | } from "@mui/icons-material";
 14 | import Wiki from "../../assets/wikipedia.png";
 15 | import notAvail from "../../assets/notAvail.jpeg";
 16 | import Link from "next/link";
 17 | 
 18 | const PeriodicDetail = ({ elementDataDetail }) => {
 19 |   const [elementData, setElementData] = useState([]);
 20 |   const router = useRouter();
 21 |   /* The above code is defining a JavaScript object called `colorMap` which maps different types of
 22 |  chemical elements to specific colors. Each chemical element type is represented as a key in the
 23 |  object, and its corresponding color is represented as the value associated with that key. */
 24 |   const colorMap = {
 25 |     "noble gas": "#3AB0FF",
 26 |     "polyatomic nonmetal": "#F00699",
 27 |     "alkaline earth metal": "#01708F",
 28 |     "diatomic nonmetal": "#FF5F00",
 29 |     "alkali metal": "#3E00FF",
 30 |     "transition metal": "#BF1A2F",
 31 |     "post-transition metal": "#890596",
 32 |     lanthanide: "#7868E6",
 33 |     actinide: "#FF8C32",
 34 |     metalloid: "#3EC70B",
 35 |   };
 36 |   /* The above code is using the `useEffect` hook in React to update the state of `elementData` whenever
 37 | `elementDataDetail` changes. It creates an empty array `Data`, pushes the value of
 38 | `elementDataDetail` into it, and then sets the state of `elementData` to `Data`. */
 39 |   useEffect(() => {
 40 |     const Data = [];
 41 |     Data.push(elementDataDetail);
 42 |     setElementData(Data);
 43 |   }, [elementDataDetail]);
 44 | 
 45 |   return (
 46 |     <>
 47 |       {elementData?.map((element, i) => (
 48 |         <div key={i}>
 49 |           <Head>
 50 |             <title>
 51 |               {element.number}. || {element.name}
 52 |             </title>
 53 |             <link rel="icon" href="/periodically_favicon.png" />
 54 |           </Head>
 55 |           {/* nav seaction */}
 56 |           {/* The above code is a JSX code snippet written in React. It is
 57 |           rendering a header component with a background color of "primary",
 58 |           containing an arrow back icon, a category label with the element
 59 |           number, and a link to the element's source page. The category label's
 60 |           background color is determined by a color map based on the element's
 61 |           category. The component is also using React Router to navigate to the
 62 |           periodic table page when the arrow back icon is clicked. */}
 63 |           <div className="w-full bg-primary h-16">
 64 |             <div className="flex items-center justify-between">
 65 |               <div onClick={() => router.push("/periodictable")}>
 66 |                 <ArrowBack className="ml-8 active:scale-90 hover:scale-95 transition text-primary-white  w-8 h-7 rounded-md shadow-light-card m-2" />
 67 |               </div>
 68 |               <div
 69 |                 className="w-44 p-1 border-2 text-primary-white font-bold rounded-md shadow-light-card text-center text-[10px] font-custom active:scale-90 hover:scale-95 transition"
 70 |                 style={{ backgroundColor: colorMap[element.category] }}
 71 |               >
 72 |                 <span className="mr-3 border-spacing-2">{element.number}.</span>
 73 |                 {element.category.toUpperCase()}
 74 |               </div>
 75 | 
 76 |               <Link href={element.source} target="_blank">
 77 |                 <a target="_blank">
 78 |                   <div className="m-2 mr-8 active:scale-90 hover:scale-95 transition">
 79 |                     <Image src={Wiki} width={"32px"} height={"32px"} />
 80 |                   </div>
 81 |                 </a>
 82 |               </Link>
 83 |             </div>
 84 |           </div>
 85 |           {/* header seaction */}
 86 |           <div className="w-full bg-primary flex justify-center items-center">
 87 |             <div className=" md:w-3/4 mb-8 flex flex-col bg-primary-light p-4 rounded-xl mt-2">
 88 |               <div className="w-full relative flex flex-col items-center justify-center md:justify-start bg-primary">
 89 |                 <div className="md:flex items-center justify-between w-full bg-primary shadow-light-card h-10 hidden mt-4">
 90 |                   {element.number === 1 ? (
 91 |                     <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-center item-center p-2 text-sm text-gara , text-primary-white">
 92 |                       No element exists
 93 |                     </div>
 94 |                   ) : (
 95 |                     <div
 96 |                       className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
 97 |                       onClick={() =>
 98 |                         router.push(`/elementdata/${element.number - 1}`)
 99 |                       }
100 |                     >
101 |                       <ArrowBack className="text-[20px]" />
102 |                       <h1 className="text-[15px]">
103 |                         Atomic Number-{element.number - 1}
104 |                       </h1>
105 |                     </div>
106 |                   )}
107 |                   {element.number === 119 ? (
108 |                     <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-center item-center p-2 text-sm text-gara , text-primary-white">
109 |                       No element exists
110 |                     </div>
111 |                   ) : (
112 |                     <div
113 |                       className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
114 |                       onClick={() =>
115 |                         router.push(`/elementdata/${element.number + 1}`)
116 |                       }
117 |                     >
118 |                       <h1 className="text-[15px]">
119 |                         Atomic Number-{element.number + 1}
120 |                       </h1>
121 |                       <ArrowForward className="text-[20px]" />
122 |                     </div>
123 |                   )}
124 |                 </div>
125 |                 <div className="w-full flex mt-8 mr-4 ml-4 items-center md:items-start flex-col md:flex-row">
126 |                   <div
127 |                     className={`hover:scale-95 md:ml-4 md:mt-6 transition border-2 ${Classes.elementDetail}`}
128 |                     key={element.number}
129 |                     style={{
130 |                       backgroundColor: colorMap[element.category],
131 |                     }}
132 |                   >
133 |                     <div className="flex items-center justify-between flex-col text-primary-white">
134 |                       <div
135 |                         className={`text-2xl absolute ${Classes.numberDetail}`}
136 |                       >
137 |                         {element.number}
138 |                       </div>
139 |                       <div className={`text-4xl ${Classes.symbolDetail}`}>
140 |                         {element.symbol}
141 |                       </div>
142 |                       <div className={`text-2xl  ${Classes.nameDetail}`}>
143 |                         {element.name}
144 |                       </div>
145 |                     </div>
146 |                   </div>
147 | 
148 |                   <div className="w-full flex md:ml-4 md:mt-0 flex-col">
149 |                     <div className="flex items-center md:hidden justify-between w-full text-primary mb-4 mt-4 rounded-md h-10 ">
150 |                       {element.number === 1 ? (
151 |                         <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition text-center item-center p-2 text-sm text-gara , text-primary-white">
152 |                           No element exists
153 |                         </div>
154 |                       ) : (
155 |                         <div
156 |                           className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
157 |                           onClick={() =>
158 |                             router.push(`/elementdata/${element.number - 1}`)
159 |                           }
160 |                         >
161 |                           <ArrowBack className="text-[15px]" />
162 |                           <h1 className="text-[10px]">
163 |                             Atomic Number-{element.number - 1}
164 |                           </h1>
165 |                         </div>
166 |                       )}
167 |                       {element.number === 119 ? (
168 |                         <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition text-center item-center p-2 text-sm text-gara , text-primary-white">
169 |                           No element exists
170 |                         </div>
171 |                       ) : (
172 |                         <div
173 |                           className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
174 |                           onClick={() =>
175 |                             router.push(`/elementdata/${element.number + 1}`)
176 |                           }
177 |                         >
178 |                           <h1 className="text-[10px]">
179 |                             Atomic Number-{element.number + 1}
180 |                           </h1>
181 |                           <ArrowForward className="text-[15px]" />
182 |                         </div>
183 |                       )}
184 |                     </div>
185 |                     <div className="flex w-full bg-primary-light rounded-md shadow-light-card">
186 |                       <Book className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
187 |                       <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2 ">
188 |                         Overview
189 |                       </h2>
190 |                     </div>
191 |                     <div className="flex text-[20px] flex-col mt-2 mr-4 ml-4">
192 |                       <h1
193 |                         className="text-[15px] font-gara"
194 |                         style={{ color: colorMap[element.category] }}
195 |                       >
196 |                         Atomic Number:
197 |                       </h1>
198 |                       <h2 className="text-xl  text-primary-white mt-1 font-gara">
199 |                         {element.number}
200 |                       </h2>
201 |                     </div>
202 |                     <div className="mt-2 mr-4 ml-4 border-b border-primary-light"></div>
203 |                     <div className="flex text-[20px] flex-col mt-2 mr-4 ml-4">
204 |                       <h1
205 |                         className="text-[15px] font-gara"
206 |                         style={{ color: colorMap[element.category] }}
207 |                       >
208 |                         Name:
209 |                       </h1>
210 |                       <h2 className="text-2xl text-primary-white mt-1 font-gara">
211 |                         {element.name}
212 |                       </h2>
213 |                     </div>
214 |                     <div className="mt-2 border-b mr-4 ml-4 border-primary-light"></div>
215 |                   </div>
216 |                 </div>
217 |               </div>
218 |               <div className=" bg-primary">
219 |                 <div className="mr-4 ml-4">
220 |                   <div className="flex flex-col text-2xl">
221 |                     <h1
222 |                       className="text-[15px]  text-gray-400 font-gara"
223 |                       style={{ color: colorMap[element.category] }}
224 |                     >
225 |                       Summary:
226 |                     </h1>
227 |                     <h2 className="text-sm text-primary-white mt-1 font-custom">
228 |                       {element.summary}
229 |                     </h2>
230 |                   </div>
231 |                   <div className="mt-2 border-b border-primary-light"></div>
232 | 
233 |                   <div className="flex flex-col text-2xl mt-2">
234 |                     <h1
235 |                       className="text-[15px]  text-gray-400 font-gara"
236 |                       style={{ color: colorMap[element.category] }}
237 |                     >
238 |                       Discovered By:
239 |                     </h1>
240 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
241 |                       {element.discovered_by || "Unknown"}
242 |                     </h2>
243 |                   </div>
244 |                   <div className="mt-2 border-b border-primary-light"></div>
245 | 
246 |                   <div className="flex flex-col text-2xl mt-2">
247 |                     <h1
248 |                       className="text-[15px]  text-gray-400 font-gara"
249 |                       style={{ color: colorMap[element.category] }}
250 |                     >
251 |                       Named By:
252 |                     </h1>
253 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
254 |                       {element.named_by || "Unknown"}{" "}
255 |                     </h2>
256 |                   </div>
257 |                   <div className="mt-2 border-b border-primary-light"></div>
258 |                   <div className="flex flex-col text-2xl mt-2">
259 |                     <h1
260 |                       className="text-[15px]  text-gray-400 font-gara"
261 |                       style={{ color: colorMap[element.category] }}
262 |                     >
263 |                       Appearance:
264 |                     </h1>
265 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
266 |                       {element.appearance || "Unknown"}
267 |                     </h2>
268 |                   </div>
269 |                   <div className="mt-2 border-b border-primary-light"></div>
270 |                   <div className="flex flex-col text-2xl mt-2">
271 |                     <h1
272 |                       className="text-[15px]  text-gray-400 font-gara"
273 |                       style={{ color: colorMap[element.category] }}
274 |                     >
275 |                       Color:
276 |                     </h1>
277 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
278 |                       {element.color || "Unknown"}
279 |                     </h2>
280 |                   </div>
281 |                   <div className="mt-2 border-b border-primary-light"></div>
282 |                   <div className="flex w-full bg-primary-light rounded-md shadow-light-card">
283 |                     <ContentPasteSearch className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
284 |                     <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2">
285 |                       Properties
286 |                     </h2>
287 |                   </div>
288 |                   <div className="flex flex-col text-2xl mt-2">
289 |                     <h1
290 |                       className="text-[15px]  text-gray-400 font-gara"
291 |                       style={{ color: colorMap[element.category] }}
292 |                     >
293 |                       Atomic Mass:
294 |                     </h1>
295 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
296 |                       {Math.round(element.atomic_mass) || "Unknown"}g/mol
297 |                     </h2>
298 |                   </div>
299 |                   <div className="mt-2 border-b border-primary-light"></div>
300 |                   <div className="flex flex-col text-2xl mt-2">
301 |                     <h1
302 |                       className="text-[15px]  text-gray-400 font-gara"
303 |                       style={{ color: colorMap[element.category] }}
304 |                     >
305 |                       Density:
306 |                     </h1>
307 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
308 |                       {Math.round(element.density) || "Unknown"}g/cm³
309 |                     </h2>
310 |                   </div>
311 |                   <div className="mt-2 border-b border-primary-light"></div>
312 |                   <div className="flex flex-col text-2xl mt-2">
313 |                     <h1
314 |                       className="text-[15px]  font-gara"
315 |                       style={{ color: colorMap[element.category] }}
316 |                     >
317 |                       Phase
318 |                     </h1>
319 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
320 |                       {element.phase || "Unknown"}
321 |                     </h2>
322 |                   </div>
323 |                   <div className="mt-2 border-b border-primary-light"></div>
324 | 
325 |                   <div className="flex flex-col text-2xl mt-2">
326 |                     <h1
327 |                       className="text-[15px]  text-gray-400 font-gara"
328 |                       style={{ color: colorMap[element.category] }}
329 |                     >
330 |                       Electron Shells
331 |                     </h1>
332 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
333 |                       {element.shells.map((data, i) => (
334 |                         <span key={i}>{`${data}, `}</span>
335 |                       ))}
336 |                     </h2>
337 |                   </div>
338 |                   <div className="mt-2 border-b border-primary-light"></div>
339 | 
340 |                   <div className="flex justify-around shadow-light-card  md:mr-20 md:ml-20 bg-primary-light p-2 rounded-md text-2xl mt-2 text-center">
341 |                     <div className="flex flex-col">
342 |                       <h1
343 |                         className="text-[20px]  text-gray-400 font-gara"
344 |                         style={{ color: colorMap[element.category] }}
345 |                       >
346 |                         Electron
347 |                       </h1>
348 |                       <p className="text-[18px] text-primary-white mt-1 font-custom">
349 |                         {element.number}
350 |                       </p>
351 |                     </div>
352 |                     <div className="flex flex-col">
353 |                       <h1
354 |                         className="text-[20px]  text-gray-400 font-gara"
355 |                         style={{ color: colorMap[element.category] }}
356 |                       >
357 |                         Protron
358 |                       </h1>
359 |                       <p className="text-[18px] text-primary-white mt-1 font-custom">
360 |                         {element.number}
361 |                       </p>
362 |                     </div>
363 |                     <div className="flex flex-col">
364 |                       <h1
365 |                         className="text-[20px]  text-gray-400 font-gara"
366 |                         style={{ color: colorMap[element.category] }}
367 |                       >
368 |                         Neutron
369 |                       </h1>
370 |                       <p className="text-[18px] text-primary-white mt-1 font-custom">
371 |                         {Math.round(element.atomic_mass - element.number)}
372 |                       </p>
373 |                     </div>
374 |                   </div>
375 |                   <div className="mt-2 border-b border-primary-light"></div>
376 |                   <div className="flex w-full bg-primary-light rounded-md shadow-light-card">
377 |                     <Analytics className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
378 |                     <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2">
379 |                       Physical Properties
380 |                     </h2>
381 |                   </div>
382 |                   <div className="flex flex-col text-2xl mt-2">
383 |                     <h1
384 |                       className="text-[15px]  text-gray-400 font-gara"
385 |                       style={{ color: colorMap[element.category] }}
386 |                     >
387 |                       Period:
388 |                     </h1>
389 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
390 |                       {element.period || "Unknown"}
391 |                     </h2>
392 |                   </div>
393 |                   <div className="mt-2 border-b border-primary-light"></div>
394 |                   <div className="flex flex-col text-2xl mt-2">
395 |                     <h1
396 |                       className="text-[15px]  text-gray-400 font-gara"
397 |                       style={{ color: colorMap[element.category] }}
398 |                     >
399 |                       Melting Point
400 |                     </h1>
401 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
402 |                       {Math.round(element.melt)}
403 |                       <span className="text-red-600">°K</span> ={" "}
404 |                       {Math.round(element.melt - 273.15)}
405 |                       <span className="text-green-600">°C</span> ={" "}
406 |                       {Math.round((element.melt - 273.15) * 1.8) + 32}
407 |                       <span className="text-blue-600">°F</span>
408 |                     </h2>
409 |                   </div>
410 |                   <div className="mt-2 border-b border-primary-light"></div>
411 |                   <div className="flex flex-col text-2xl mt-2">
412 |                     <h1
413 |                       className="text-[15px]  text-gray-400 font-gara"
414 |                       style={{ color: colorMap[element.category] }}
415 |                     >
416 |                       Boiling Point
417 |                     </h1>
418 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
419 |                       {Math.round(element.boil)}
420 |                       <span className="text-red-600">°K</span> =
421 |                       {Math.round(element.boil - 273.15)}
422 |                       <span className="text-green-600">°C</span> =
423 |                       {Math.round((element.boil - 273.15) * 1.8) + 32}
424 |                       <span className="text-blue-600">°F</span>
425 |                     </h2>
426 |                   </div>
427 |                   <div className="mt-2 border-b border-primary-light"></div>
428 |                   <div className="flex flex-col text-2xl mt-2">
429 |                     <h1
430 |                       className="text-[15px]  text-gray-400 font-gara"
431 |                       style={{ color: colorMap[element.category] }}
432 |                     >
433 |                       Molar Heat:
434 |                     </h1>
435 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
436 |                       {Math.round(element.molar_heat) || "Unknown"} J/mol·K
437 |                     </h2>
438 |                   </div>
439 |                   <div className="mt-2 border-b border-primary-light"></div>
440 |                   <div className="flex flex-col justify-around shadow-light-card  md:mr-20 md:ml-20 bg-primary-light p-2 rounded-md text-2xl mt-2 text-center">
441 |                     <h1
442 |                       className="text-[15px] text-left font-gara"
443 |                       style={{ color: colorMap[element.category] }}
444 |                     >
445 |                       Spectrals Line:
446 |                     </h1>
447 |                     <div className=" w-full flex flex-col">
448 |                       <Image
449 |                         src={element.spectral_img || notAvail}
450 |                         width={"100%"}
451 |                         height={"100%"}
452 |                       />
453 |                     </div>
454 |                   </div>
455 |                   <div className="flex w-full bg-primary-light rounded-md shadow-light-card mt-2">
456 |                     <Biotech className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
457 |                     <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2">
458 |                       Atomic Properties
459 |                     </h2>
460 |                   </div>
461 |                   <div className="flex flex-col text-2xl">
462 |                     <h1
463 |                       className="text-[15px]  text-gray-400 font-gara"
464 |                       style={{ color: colorMap[element.category] }}
465 |                     >
466 |                       Electronic Configuration:
467 |                     </h1>
468 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
469 |                       {element.electron_configuration}
470 |                     </h2>
471 |                   </div>
472 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
473 |                   <div className="flex flex-col text-2xl">
474 |                     <h1
475 |                       className="text-[15px]  text-gray-400 font-gara"
476 |                       style={{ color: colorMap[element.category] }}
477 |                     >
478 |                       Electronic Configuration Semantic:
479 |                     </h1>
480 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
481 |                       {element.electron_configuration_semantic}
482 |                     </h2>
483 |                   </div>
484 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
485 |                   <div className="flex flex-col text-2xl">
486 |                     <h1
487 |                       className="text-[15px]  text-gray-400 font-gara"
488 |                       style={{ color: colorMap[element.category] }}
489 |                     >
490 |                       Electronic Affenity:
491 |                     </h1>
492 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
493 |                       {element.electron_affinity} kJ/mol
494 |                     </h2>
495 |                   </div>
496 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
497 |                   <div className="flex flex-col text-2xl">
498 |                     <h1
499 |                       className="text-[15px]  text-gray-400 font-gara"
500 |                       style={{ color: colorMap[element.category] }}
501 |                     >
502 |                       Electronegativity Paulingy:
503 |                     </h1>
504 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
505 |                       {element.electronegativity_pauling}
506 |                     </h2>
507 |                   </div>
508 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
509 |                   <div className="flex flex-col text-2xl mt-2">
510 |                     <h1
511 |                       className="text-[15px]  text-gray-400 font-gara"
512 |                       style={{ color: colorMap[element.category] }}
513 |                     >
514 |                       Ionization Energies
515 |                     </h1>
516 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
517 |                       {element?.ionization_energies?.map((data, i) => (
518 |                         <span key={i}>{`${data}, `}</span>
519 |                       ))}
520 |                     </h2>
521 |                   </div>
522 |                   <div className="mt-2 border-b border-primary-light"></div>
523 |                 </div>
524 |               </div>
525 |             </div>
526 |           </div>
527 |         </div>
528 |       ))}
529 |     </>
530 |   );
531 | };
532 | export default PeriodicDetail;
533 | 


--------------------------------------------------------------------------------
/components/RandomInfo.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { useRouter } from "next/router";
  3 | import Image from "next/image";
  4 | import Classes from "./Periodic_Table/AtomElement.module.css";
  5 | import {
  6 |   ArrowBack,
  7 |   Book,
  8 |   ContentPasteSearch,
  9 |   Analytics,
 10 |   Biotech,
 11 |   ArrowForward,
 12 | } from "@mui/icons-material";
 13 | import Wiki from "../assets/wikipedia.png";
 14 | import notAvail from "../assets/notAvail.jpeg";
 15 | import Link from "next/link";
 16 | const RandomInfo = ({ elementData, handleClick }) => {
 17 |   const [elementDataDetail, setElementDataDetail] = useState([]);
 18 |   const router = useRouter();
 19 |   const colorMap = {
 20 |     "noble gas": "#3AB0FF",
 21 |     "polyatomic nonmetal": "#F00699",
 22 |     "alkaline earth metal": "#01708F",
 23 |     "diatomic nonmetal": "#FF5F00",
 24 |     "alkali metal": "#3E00FF",
 25 |     "transition metal": "#BF1A2F",
 26 |     "post-transition metal": "#890596",
 27 |     lanthanide: "#7868E6",
 28 |     actinide: "#FF8C32",
 29 |     metalloid: "#3EC70B",
 30 |   };
 31 |   useEffect(() => {
 32 |     setElementDataDetail(elementData);
 33 |   }, [elementData]);
 34 | 
 35 |   return (
 36 |     <>
 37 |       {elementDataDetail.map((element) => (
 38 |         <div key={element?.number}>
 39 |           {/* header seaction */}
 40 |           <div className="w-full bg-primary flex justify-center items-center">
 41 |             <div className=" md:w-3/4 mb-8 flex flex-col bg-primary-light p-4 rounded-xl mt-2">
 42 |               <div className="w-full relative flex flex-col items-center justify-center md:justify-start bg-primary">
 43 |                 <div className="md:flex items-center justify-between w-full bg-primary shadow-light-card h-10 hidden mt-4">
 44 |                   {element.number === 1 ? (
 45 |                     <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-center item-center p-2 text-sm text-gara , text-primary-white">
 46 |                       No element exists
 47 |                     </div>
 48 |                   ) : (
 49 |                     <div
 50 |                       className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
 51 |                       onClick={() =>
 52 |                         router.push(`/elementdata/${element.number - 1}`)
 53 |                       }
 54 |                     >
 55 |                       <ArrowBack className="text-[20px]" />
 56 |                       <h1 className="text-[15px]">
 57 |                         Atomic Number-{element.number - 1}
 58 |                       </h1>
 59 |                     </div>
 60 |                   )}
 61 |                   {element.number === 119 ? (
 62 |                     <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-center item-center p-2 text-sm text-gara , text-primary-white">
 63 |                       No element exists
 64 |                     </div>
 65 |                   ) : (
 66 |                     <div
 67 |                       className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
 68 |                       onClick={() =>
 69 |                         router.push(`/elementdata/${element.number + 1}`)
 70 |                       }
 71 |                     >
 72 |                       <h1 className="text-[15px]">
 73 |                         Atomic Number-{element.number + 1}
 74 |                       </h1>
 75 |                       <ArrowForward className="text-[20px]" />
 76 |                     </div>
 77 |                   )}
 78 |                 </div>
 79 |                 <div className="w-full flex mt-8 mr-4 ml-4 items-center md:items-start flex-col md:flex-row">
 80 |                   <div
 81 |                     className={`hover:scale-95 md:ml-4 md:mt-6 transition border-2 ${Classes.elementDetail}`}
 82 |                     key={element.number}
 83 |                     style={{
 84 |                       backgroundColor: colorMap[element.category],
 85 |                     }}
 86 |                   >
 87 |                     <div className="flex items-center justify-between flex-col text-primary-white">
 88 |                       <div
 89 |                         className={`text-2xl absolute ${Classes.numberDetail}`}
 90 |                       >
 91 |                         {element.number}
 92 |                       </div>
 93 |                       <div className={`text-4xl ${Classes.symbolDetail}`}>
 94 |                         {element.symbol}
 95 |                       </div>
 96 |                       <div className={`text-2xl  ${Classes.nameDetail}`}>
 97 |                         {element.name}
 98 |                       </div>
 99 |                     </div>
100 |                   </div>
101 | 
102 |                   <div className="w-full flex md:ml-4 md:mt-0 flex-col">
103 |                     <div className="flex items-center md:hidden justify-between w-full text-primary mb-4 mt-4 rounded-md h-10 ">
104 |                       {element.number === 1 ? (
105 |                         <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition text-center item-center p-2 text-sm text-gara , text-primary-white">
106 |                           No element exists
107 |                         </div>
108 |                       ) : (
109 |                         <div
110 |                           className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
111 |                           onClick={() =>
112 |                             router.push(`/elementdata/${element.number - 1}`)
113 |                           }
114 |                         >
115 |                           <ArrowBack className="text-[15px]" />
116 |                           <h1 className="text-[10px]">
117 |                             Atomic Number-{element.number - 1}
118 |                           </h1>
119 |                         </div>
120 |                       )}
121 |                       {element.number === 119 ? (
122 |                         <div className="flex w-full h-full bg-primary-light  rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition text-center item-center p-2 text-sm text-gara , text-primary-white">
123 |                           No element exists
124 |                         </div>
125 |                       ) : (
126 |                         <div
127 |                           className="flex w-full h-full bg-primary-light rounded-md mr-4 ml-2 border-2 shadow-light-card active:scale-90 transition justify-between item-center p-2  text-gara , text-primary-white"
128 |                           onClick={() =>
129 |                             router.push(`/elementdata/${element.number + 1}`)
130 |                           }
131 |                         >
132 |                           <h1 className="text-[10px]">
133 |                             Atomic Number-{element.number + 1}
134 |                           </h1>
135 |                           <ArrowForward className="text-[15px]" />
136 |                         </div>
137 |                       )}
138 |                     </div>
139 |                     <div className="flex w-full bg-primary-light rounded-md shadow-light-card">
140 |                       <Book className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
141 |                       <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2 ">
142 |                         Overview
143 |                       </h2>
144 |                     </div>
145 |                     <div className="flex text-[20px] flex-col mt-2 mr-4 ml-4">
146 |                       <h1
147 |                         className="text-[15px] font-gara"
148 |                         style={{ color: colorMap[element.category] }}
149 |                       >
150 |                         Atomic Number:
151 |                       </h1>
152 |                       <h2 className="text-xl  text-primary-white mt-1 font-gara">
153 |                         {element.number}
154 |                       </h2>
155 |                     </div>
156 |                     <div className="mt-2 mr-4 ml-4 border-b border-primary-light"></div>
157 |                     <div className="flex text-[20px] flex-col mt-2 mr-4 ml-4">
158 |                       <h1
159 |                         className="text-[15px] font-gara"
160 |                         style={{ color: colorMap[element.category] }}
161 |                       >
162 |                         Name:
163 |                       </h1>
164 |                       <h2 className="text-2xl text-primary-white mt-1 font-gara">
165 |                         {element.name}
166 |                       </h2>
167 |                     </div>
168 |                     <div className="mt-2 border-b mr-4 ml-4 border-primary-light"></div>
169 |                   </div>
170 |                 </div>
171 |               </div>
172 |               <div className=" bg-primary">
173 |                 <div className="mr-4 ml-4">
174 |                   <div className="flex flex-col text-2xl">
175 |                     <h1
176 |                       className="text-[15px]  text-gray-400 font-gara"
177 |                       style={{ color: colorMap[element.category] }}
178 |                     >
179 |                       Summary:
180 |                     </h1>
181 |                     <h2 className="text-sm text-primary-white mt-1 font-custom">
182 |                       {element.summary}
183 |                     </h2>
184 |                   </div>
185 |                   <div className="mt-2 border-b border-primary-light"></div>
186 | 
187 |                   <div className="flex flex-col text-2xl mt-2">
188 |                     <h1
189 |                       className="text-[15px]  text-gray-400 font-gara"
190 |                       style={{ color: colorMap[element.category] }}
191 |                     >
192 |                       Discovered By:
193 |                     </h1>
194 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
195 |                       {element.discovered_by || "Unknown"}
196 |                     </h2>
197 |                   </div>
198 |                   <div className="mt-2 border-b border-primary-light"></div>
199 | 
200 |                   <div className="flex flex-col text-2xl mt-2">
201 |                     <h1
202 |                       className="text-[15px]  text-gray-400 font-gara"
203 |                       style={{ color: colorMap[element.category] }}
204 |                     >
205 |                       Named By:
206 |                     </h1>
207 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
208 |                       {element.named_by || "Unknown"}{" "}
209 |                     </h2>
210 |                   </div>
211 |                   <div className="mt-2 border-b border-primary-light"></div>
212 |                   <div className="flex flex-col text-2xl mt-2">
213 |                     <h1
214 |                       className="text-[15px]  text-gray-400 font-gara"
215 |                       style={{ color: colorMap[element.category] }}
216 |                     >
217 |                       Appearance:
218 |                     </h1>
219 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
220 |                       {element.appearance || "Unknown"}
221 |                     </h2>
222 |                   </div>
223 |                   <div className="mt-2 border-b border-primary-light"></div>
224 |                   <div className="flex flex-col text-2xl mt-2">
225 |                     <h1
226 |                       className="text-[15px]  text-gray-400 font-gara"
227 |                       style={{ color: colorMap[element.category] }}
228 |                     >
229 |                       Color:
230 |                     </h1>
231 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
232 |                       {element.color || "Unknown"}
233 |                     </h2>
234 |                   </div>
235 |                   <div className="mt-2 border-b border-primary-light"></div>
236 |                   <div className="flex w-full bg-primary-light rounded-md shadow-light-card">
237 |                     <ContentPasteSearch className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
238 |                     <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2">
239 |                       Properties
240 |                     </h2>
241 |                   </div>
242 |                   <div className="flex flex-col text-2xl mt-2">
243 |                     <h1
244 |                       className="text-[15px]  text-gray-400 font-gara"
245 |                       style={{ color: colorMap[element.category] }}
246 |                     >
247 |                       Atomic Mass:
248 |                     </h1>
249 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
250 |                       {Math.round(element.atomic_mass) || "Unknown"}g/mol
251 |                     </h2>
252 |                   </div>
253 |                   <div className="mt-2 border-b border-primary-light"></div>
254 |                   <div className="flex flex-col text-2xl mt-2">
255 |                     <h1
256 |                       className="text-[15px]  text-gray-400 font-gara"
257 |                       style={{ color: colorMap[element.category] }}
258 |                     >
259 |                       Density:
260 |                     </h1>
261 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
262 |                       {Math.round(element.density) || "Unknown"}g/cm³
263 |                     </h2>
264 |                   </div>
265 |                   <div className="mt-2 border-b border-primary-light"></div>
266 |                   <div className="flex flex-col text-2xl mt-2">
267 |                     <h1
268 |                       className="text-[15px]  font-gara"
269 |                       style={{ color: colorMap[element.category] }}
270 |                     >
271 |                       Phase
272 |                     </h1>
273 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
274 |                       {element.phase || "Unknown"}
275 |                     </h2>
276 |                   </div>
277 |                   <div className="mt-2 border-b border-primary-light"></div>
278 | 
279 |                   <div className="flex flex-col text-2xl mt-2">
280 |                     <h1
281 |                       className="text-[15px]  text-gray-400 font-gara"
282 |                       style={{ color: colorMap[element.category] }}
283 |                     >
284 |                       Electron Shells
285 |                     </h1>
286 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
287 |                       {element.shells.map((data, i) => (
288 |                         <span key={i}>{`${data}, `}</span>
289 |                       ))}
290 |                     </h2>
291 |                   </div>
292 |                   <div className="mt-2 border-b border-primary-light"></div>
293 | 
294 |                   <div className="flex justify-around shadow-light-card  md:mr-20 md:ml-20 bg-primary-light p-2 rounded-md text-2xl mt-2 text-center">
295 |                     <div className="flex flex-col">
296 |                       <h1
297 |                         className="text-[20px]  text-gray-400 font-gara"
298 |                         style={{ color: colorMap[element.category] }}
299 |                       >
300 |                         Electron
301 |                       </h1>
302 |                       <p className="text-[18px] text-primary-white mt-1 font-custom">
303 |                         {element.number}
304 |                       </p>
305 |                     </div>
306 |                     <div className="flex flex-col">
307 |                       <h1
308 |                         className="text-[20px]  text-gray-400 font-gara"
309 |                         style={{ color: colorMap[element.category] }}
310 |                       >
311 |                         Protron
312 |                       </h1>
313 |                       <p className="text-[18px] text-primary-white mt-1 font-custom">
314 |                         {element.number}
315 |                       </p>
316 |                     </div>
317 |                     <div className="flex flex-col">
318 |                       <h1
319 |                         className="text-[20px]  text-gray-400 font-gara"
320 |                         style={{ color: colorMap[element.category] }}
321 |                       >
322 |                         Neutron
323 |                       </h1>
324 |                       <p className="text-[18px] text-primary-white mt-1 font-custom">
325 |                         {Math.round(element.atomic_mass - element.number)}
326 |                       </p>
327 |                     </div>
328 |                   </div>
329 |                   <div className="mt-2 border-b border-primary-light"></div>
330 |                   <div className="flex w-full bg-primary-light rounded-md shadow-light-card">
331 |                     <Analytics className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
332 |                     <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2">
333 |                       Physical Properties
334 |                     </h2>
335 |                   </div>
336 |                   <div className="flex flex-col text-2xl mt-2">
337 |                     <h1
338 |                       className="text-[15px]  text-gray-400 font-gara"
339 |                       style={{ color: colorMap[element.category] }}
340 |                     >
341 |                       Period:
342 |                     </h1>
343 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
344 |                       {element.period || "Unknown"}
345 |                     </h2>
346 |                   </div>
347 |                   <div className="mt-2 border-b border-primary-light"></div>
348 |                   <div className="flex flex-col text-2xl mt-2">
349 |                     <h1
350 |                       className="text-[15px]  text-gray-400 font-gara"
351 |                       style={{ color: colorMap[element.category] }}
352 |                     >
353 |                       Melting Point
354 |                     </h1>
355 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
356 |                       {Math.round(element.melt)}
357 |                       <span className="text-red-600">°K</span> ={" "}
358 |                       {Math.round(element.melt - 273.15)}
359 |                       <span className="text-green-600">°C</span> ={" "}
360 |                       {Math.round((element.melt - 273.15) * 1.8) + 32}
361 |                       <span className="text-blue-600">°F</span>
362 |                     </h2>
363 |                   </div>
364 |                   <div className="mt-2 border-b border-primary-light"></div>
365 |                   <div className="flex flex-col text-2xl mt-2">
366 |                     <h1
367 |                       className="text-[15px]  text-gray-400 font-gara"
368 |                       style={{ color: colorMap[element.category] }}
369 |                     >
370 |                       Boiling Point
371 |                     </h1>
372 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
373 |                       {Math.round(element.boil)}
374 |                       <span className="text-red-600">°K</span> =
375 |                       {Math.round(element.boil - 273.15)}
376 |                       <span className="text-green-600">°C</span> =
377 |                       {Math.round((element.boil - 273.15) * 1.8) + 32}
378 |                       <span className="text-blue-600">°F</span>
379 |                     </h2>
380 |                   </div>
381 |                   <div className="mt-2 border-b border-primary-light"></div>
382 |                   <div className="flex flex-col text-2xl mt-2">
383 |                     <h1
384 |                       className="text-[15px]  text-gray-400 font-gara"
385 |                       style={{ color: colorMap[element.category] }}
386 |                     >
387 |                       Molar Heat:
388 |                     </h1>
389 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
390 |                       {Math.round(element.molar_heat) || "Unknown"} J/mol·K
391 |                     </h2>
392 |                   </div>
393 |                   <div className="mt-2 border-b border-primary-light"></div>
394 |                   <div className="flex flex-col justify-around shadow-light-card  md:mr-20 md:ml-20 bg-primary-light p-2 rounded-md text-2xl mt-2 text-center">
395 |                     <h1
396 |                       className="text-[15px] text-left font-gara"
397 |                       style={{ color: colorMap[element.category] }}
398 |                     >
399 |                       Spectrals Line:
400 |                     </h1>
401 |                     <div className=" w-full flex flex-col">
402 |                       <Image
403 |                         src={element.spectral_img || notAvail}
404 |                         width={"100%"}
405 |                         height={"100%"}
406 |                       />
407 |                     </div>
408 |                   </div>
409 |                   <div className="flex w-full bg-primary-light rounded-md shadow-light-card mt-2">
410 |                     <Biotech className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2" />
411 |                     <h2 className="active:scale-90 hover:scale-95 transition text-primary-white rounded-md m-2">
412 |                       Atomic Properties
413 |                     </h2>
414 |                   </div>
415 |                   <div className="flex flex-col text-2xl">
416 |                     <h1
417 |                       className="text-[15px]  text-gray-400 font-gara"
418 |                       style={{ color: colorMap[element.category] }}
419 |                     >
420 |                       Electronic Configuration:
421 |                     </h1>
422 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
423 |                       {element.electron_configuration}
424 |                     </h2>
425 |                   </div>
426 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
427 |                   <div className="flex flex-col text-2xl">
428 |                     <h1
429 |                       className="text-[15px]  text-gray-400 font-gara"
430 |                       style={{ color: colorMap[element.category] }}
431 |                     >
432 |                       Electronic Configuration Semantic:
433 |                     </h1>
434 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
435 |                       {element.electron_configuration_semantic}
436 |                     </h2>
437 |                   </div>
438 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
439 |                   <div className="flex flex-col text-2xl">
440 |                     <h1
441 |                       className="text-[15px]  text-gray-400 font-gara"
442 |                       style={{ color: colorMap[element.category] }}
443 |                     >
444 |                       Electronic Affenity:
445 |                     </h1>
446 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
447 |                       {element.electron_affinity} kJ/mol
448 |                     </h2>
449 |                   </div>
450 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
451 |                   <div className="flex flex-col text-2xl">
452 |                     <h1
453 |                       className="text-[15px]  text-gray-400 font-gara"
454 |                       style={{ color: colorMap[element.category] }}
455 |                     >
456 |                       Electronegativity Paulingy:
457 |                     </h1>
458 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
459 |                       {element.electronegativity_pauling}
460 |                     </h2>
461 |                   </div>
462 |                   <div className="mt-2 border-b border-primary-light mb-4"></div>
463 |                   <div className="flex flex-col text-2xl mt-2">
464 |                     <h1
465 |                       className="text-[15px]  text-gray-400 font-gara"
466 |                       style={{ color: colorMap[element.category] }}
467 |                     >
468 |                       Ionization Energies
469 |                     </h1>
470 |                     <h2 className="text-[18px] text-primary-white mt-1 font-custom">
471 |                       {element.ionization_energies.map((data, i) => (
472 |                         <span key={i}>{`${data}, `}</span>
473 |                       ))}
474 |                     </h2>
475 |                   </div>
476 |                   <div className="mt-2 border-b border-primary-light"></div>
477 |                 </div>
478 |               </div>
479 |             </div>
480 |           </div>
481 |         </div>
482 |       ))}
483 |     </>
484 |   );
485 | };
486 | export default RandomInfo;
487 | 


--------------------------------------------------------------------------------
/context/userContext.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useEffect, useState } from "react";
 2 | export const tableContext = createContext();
 3 | 
 4 | export const TableProvider = ({ children }) => {
 5 |   const [tableData, setTableData] = useState([]);
 6 |   const [loadingTable, setLoadingTable] = useState(true);
 7 |   const periodictableData = async () => {
 8 |     await fetch("https://periodically-go-servers.onrender.com/", {
 9 |       method: "GET",
10 |     })
11 |       .then((res) => res.json())
12 |       .then((data) => {
13 |         setTableData(data);
14 |         setLoadingTable(false);
15 |       })
16 |       .catch((err) => console.log(err));
17 |   };
18 | 
19 |   useEffect(() => {
20 |     periodictableData();
21 |   }, []);
22 |   return (
23 |     <tableContext.Provider value={[tableData, loadingTable, setTableData]}>
24 |       {children}
25 |     </tableContext.Provider>
26 |   );
27 | };
28 | export function usePeriodicTable() {
29 |   return useContext(tableContext);
30 | }
31 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   target: "serverless",
 3 |   serverless: {
 4 |     timeout: 30,
 5 |   },
 6 |   images: {
 7 |     domains: [
 8 |       "upload.wikimedia.org",
 9 |       "en.wikipedia.org",
10 |       "material-properties.org",
11 |       "assets/",
12 |     ],
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start"
 7 |   },
 8 |   "dependencies": {
 9 |     "@badrap/bar-of-progress": "^0.2.1",
10 |     "@emotion/react": "^11.9.3",
11 |     "@emotion/styled": "^11.9.3",
12 |     "@heroicons/react": "^1.0.6",
13 |     "@mui/icons-material": "^5.8.4",
14 |     "@mui/lab": "^5.0.0-alpha.90",
15 |     "@mui/material": "^5.9.0",
16 |     "framer-motion": "^10.12.17",
17 |     "next": "latest",
18 |     "next-share": "^0.16.0",
19 |     "react": "18.1.0",
20 |     "react-dom": "18.1.0",
21 |     "react-loader-spinner": "^5.1.7-beta.1",
22 |     "react-loading": "^2.0.3",
23 |     "tailwind-scrollbar-hide": "^1.1.7"
24 |   },
25 |   "devDependencies": {
26 |     "@types/node": "17.0.35",
27 |     "@types/react": "18.0.9",
28 |     "@types/react-dom": "18.0.5",
29 |     "autoprefixer": "^10.4.7",
30 |     "postcss": "^8.4.14",
31 |     "tailwindcss": "^3.1.2",
32 |     "typescript": "4.7.2"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Image from "next/image";
 3 | import Head from "next/head";
 4 | import error404 from "../assets/error404.png";
 5 | const Custom404 = () => {
 6 |   return (
 7 |     <>
 8 |       <Head>
 9 |         <title>ERROR-404</title>
10 |         <link rel="icon" href="/periodically_favicon.png" />
11 |       </Head>
12 |       <div className="w-screen h-screen bg-primary overflow-hidden flex justify-center items-center">
13 |         <div className="w-full md:w-1/2  h-full md:h-1/4  flex justify-center items-center">
14 |           <Image src={error404} objectFit="fill" />
15 |         </div>
16 |       </div>
17 |     </>
18 |   );
19 | };
20 | 
21 | export default Custom404;
22 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import ProgressBar from "@badrap/bar-of-progress";
 3 | import Router from "next/router";
 4 | import { TableProvider } from "../context/userContext";
 5 | const progress = new ProgressBar({
 6 |   size: 4,
 7 |   color: "#D82148",
 8 |   className: "z-50",
 9 |   delay: 100,
10 | });
11 | Router.events.on("routeChangeStart", progress.start);
12 | Router.events.on("routeChangeComplete", progress.finish);
13 | Router.events.on("routeChangeError", progress.finish);
14 | function MyApp({ Component, pageProps }) {
15 |   return (
16 |     <TableProvider>
17 |       <Component {...pageProps} />
18 |     </TableProvider>
19 |   );
20 | }
21 | 
22 | export default MyApp;
23 | 


--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 2 | import type { NextApiRequest, NextApiResponse } from 'next'
 3 | 
 4 | type Data = {
 5 |   name: string
 6 | }
 7 | 
 8 | export default function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Data>
11 | ) {
12 |   res.status(200).json({ name: 'John Doe' })
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/elementdata/[elementdata].js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Header from "../../components/Header";
 3 | import Footer from "../../components/Footer";
 4 | import PeriodicDetail from "../../components/Periodic_Table/PeriodicDetail";
 5 | 
 6 | const ElementDataPage = ({ elementDataDetail }) => {
 7 |   return (
 8 |     <div>
 9 |       <Header />
10 |       <PeriodicDetail elementDataDetail={elementDataDetail} />
11 |       <Footer />
12 |     </div>
13 |   );
14 | };
15 | 
16 | export async function getServerSideProps(context) {
17 |   try {
18 |     const { elementdata } = context.query;
19 |     const response = await fetch(
20 |       `https://periodically-go-servers.onrender.com/number/${elementdata}`,
21 |       {
22 |         method: "GET",
23 |       }
24 |     );
25 | 
26 |     if (!response.ok) {
27 |       throw new Error("Failed to fetch data");
28 |     }
29 | 
30 |     const data = await response.json();
31 | 
32 |     return {
33 |       props: {
34 |         elementDataDetail: data,
35 |       },
36 |     };
37 |   } catch (error) {
38 |     console.error("Error fetching data:", error);
39 | 
40 |     return {
41 |       props: {
42 |         elementDataDetail: null,
43 |         error: "Error fetching data",
44 |       },
45 |     };
46 |   }
47 | }
48 | 
49 | export default ElementDataPage;
50 | 


--------------------------------------------------------------------------------
/pages/explore.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import ExploreData from "../components/ExploreData";
 3 | import Header from "../components/Header";
 4 | import Head from "next/head";
 5 | import RandomInfo from "../components/RandomInfo";
 6 | import { usePeriodicTable } from "../context/userContext";
 7 | import Footer from "../components/Footer";
 8 | const explore = () => {
 9 |   const [data, setData] = useState([]);
10 |   const dataFetch = async () => {
11 |     const response = await fetch(
12 |       "https://periodically-go-servers.onrender.com/random"
13 |     );
14 |     const arr = [];
15 |     const Data = await response.json();
16 |     arr.push(Data);
17 |     setData(arr);
18 |   };
19 |   useEffect(() => {
20 |     dataFetch();
21 |   }, []);
22 |   const handleClick = (e) => {
23 |     e.preventDefault();
24 |     dataFetch();
25 |   };
26 |   const [tableData, randomData] = usePeriodicTable();
27 |   const [filterData, setFilterData] = useState([]);
28 |   useEffect(() => {
29 |     setFilterData(tableData);
30 |   }, []);
31 |   return (
32 |     <>
33 |       <Head>
34 |         <title>Periodically-explore</title>
35 |         <link rel="icon" href="/periodically_favicon.png" />
36 |       </Head>
37 |       <Header />
38 |       <ExploreData
39 |         tableData={tableData}
40 |         filterData={filterData}
41 |         setFilterData={setFilterData}
42 |         handleClick={handleClick}
43 |       />
44 |       <RandomInfo elementData={data} />
45 |       <Footer />
46 |     </>
47 |   );
48 | };
49 | 
50 | export default explore;
51 | 


--------------------------------------------------------------------------------
/pages/history.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Header from "../components/Header";
 3 | import Image from "next/image";
 4 | import Comingsoon from '../assets/comingsoon.png';
 5 | import Head from "next/head";
 6 | const history = () => {
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <title>Periodically-History</title>
11 |         <link rel="icon" href="/periodically_favicon.png" />
12 |       </Head>
13 |      
14 |       <div className="w-screen h-screen bg-primary overflow-hidden">
15 |       <Header />
16 |         <div className="w-full  h-full  flex justify-center items-center">
17 |           <Image src={Comingsoon} objectFit="fill" />
18 |         </div>
19 |       </div>
20 |     </>
21 |   );
22 | };
23 | 
24 | export default history;
25 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import React, { useState, useEffect } from "react";
 3 | import { useRouter } from "next/router";
 4 | import { Explore } from "@mui/icons-material";
 5 | import ReactLoading from "react-loading";
 6 | const Home = () => {
 7 |   const [data, setData] = useState([]);
 8 |   const [loading, setLoading] = useState(true);
 9 |   const randomQuote = async () => {
10 |     await fetch("https://api.quotable.io/random", { method: "GET" })
11 |       .then((res) => res.json())
12 |       .then((data) => setData(data))
13 |       .catch((err) => console.log(err));
14 |     setLoading(false);
15 |   };
16 |   useEffect(() => {
17 |     randomQuote();
18 |   }, []);
19 |   const router = useRouter();
20 |   const explore = () => {
21 |     router.push("/periodictable");
22 |   };
23 |   return (
24 |     <div className="font-gara">
25 |       <Head>
26 |         <title>Periodically</title>
27 |         <link rel="icon" href="/periodically_favicon.png" />
28 |       </Head>
29 |       <div className="relative w-screen h-screen text-primary-white bg-primary">
30 |         <div className="w-full h-screen flex flex-col items-center justify-center">
31 |           <div>
32 |             <h2 className="font-head text-primary-color text-4xl font-bold text-center p-2 rounded-xl ">
33 |               Periodically
34 |             </h2>
35 |             <p className="text-lg italic text-center">
36 |               "The place where you can learn anything and everything about
37 |               elements."
38 |             </p>
39 |           </div>
40 |           <div className="mt-8 w-80 md:w-[600px] bg-primary-light shadow-light-card p-4 rounded-md flex justify-center item-center">
41 |             {loading ? (
42 |               <ReactLoading
43 |                 type={"bars"}
44 |                 color={"D82148"}
45 |                 height={35}
46 |                 width={35}
47 |               />
48 |             ) : (
49 |               <div className="mt-2">
50 |                 <p className="italic text-xl">
51 |                   `
52 |                   {data.content ||
53 |                     "An expert is a man who has made all the mistakes, which can be made, in a very narrow field."}
54 |                   `
55 |                 </p>
56 |                 <p className="text-right">~{data.author || "A L Mackay"}</p>
57 |               </div>
58 |             )}
59 |           </div>
60 |           <div
61 |             className="flex mt-4 w-36 items-center justify-between pr-4 pl-4  bg-primary-color rounded-xl border-2 p-2  ml-4 shadow-light-card font-custom active:scale-90 hover:scale-95"
62 |             onClick={explore}
63 |           >
64 |             <button className="inline text-primary-white">Enter</button>
65 |             <Explore className="h-6 cursor-pointer text-primary-white" />
66 |           </div>
67 |         </div>
68 |       </div>
69 |     </div>
70 |   );
71 | };
72 | 
73 | export default Home;
74 | 


--------------------------------------------------------------------------------
/pages/periodictable.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Footer from "../components/Footer";
 3 | import Headers from "../components/Header";
 4 | import Head from "next/head";
 5 | import Elements from "../components/Periodic_Table/Elements";
 6 | const periodictable = () => {
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <title>Periodically-The periodic table</title>
11 |         <link rel="icon" href="/periodically_favicon.png" />
12 |       </Head>
13 |       <Headers />
14 |       <div className="grid place-items-center overflow-auto  overflow-y-auto">
15 |         <Elements />
16 |       </div>
17 |       <Footer />
18 |     </>
19 |   );
20 | };
21 | 
22 | export default periodictable;
23 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/Periodically-poster.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/public/Periodically-poster.gif


--------------------------------------------------------------------------------
/public/design_arc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/public/design_arc.png


--------------------------------------------------------------------------------
/public/mern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/public/mern.png


--------------------------------------------------------------------------------
/public/periodically-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/public/periodically-demo.gif


--------------------------------------------------------------------------------
/public/periodically_design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/public/periodically_design.png


--------------------------------------------------------------------------------
/public/periodically_favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshKumarraghav/periodically/3694d529621dd138e32f92189e32dab70edb71d9/public/periodically_favicon.png


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Handjet:wght@300;400;500;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 | 
6 | * {
7 |   font-family: "Poppins", sans-serif;
8 | }
9 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./pages/**/*.{js,ts,jsx,tsx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         head: ["Handjet", "cursive"],
11 |         gara: ["Cormorant Garamond", "serif"],
12 |         custom: ["Poppins", "sans-serif"],
13 |       },
14 |       colors: {
15 |         primary: "#222831",
16 |         "primary-light": "#393E46",
17 |         "primary-color": "#D82148",
18 |         "primary-white": "#EEEEEE",
19 |         "light-theme-gray": "#bfbfbf",
20 |         "light-button-gray": "#bfbfbf",
21 |         "light-font": "#474747",
22 |         glass: "#ffffff26",
23 |       },
24 |       borderRadius: {
25 |         card: "10px",
26 |       },
27 |       boxShadow: {
28 |         "light-card":
29 |           "-12px -12px 12px 0 rgba(58, 58, 58, 0.3),12px 12px 12px 0 rgba(0,0,0,.2)",
30 |         "light-button":
31 |           "6px 6px 8px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(0, 0, 0, .25)",
32 |         glass: "0 0 1rem 0 rgba(0, 0, 0, .2)",
33 |       },
34 |       height: {
35 |         card: "300px",
36 |         button: "40px",
37 |       },
38 |       width: {
39 |         card: "250px",
40 |         button: "100px",
41 |       },
42 |     },
43 |   },
44 |   plugins: [require("tailwind-scrollbar-hide")],
45 | };
46 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/index.js", "pages/_app.js"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/utils/Debounce.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * The MyDebounce function is a higher-order function that returns a debounced version of a given
 3 |  * function.
 4 |  * @param fn - `fn` is a function that you want to debounce. It is the function that will be called
 5 |  * after the debounce time has elapsed.
 6 |  * @param d - d is the delay time in milliseconds for the debounce function. It determines how long the
 7 |  * function should wait before executing after the last time it was called.
 8 |  * @returns The function `Debounce` is being returned.
 9 |  */
10 | export const MyDebounce = (fn, d) => {
11 |   let timer;
12 |   const Debounce = (...args) => {
13 |     if (timer) clearInterval(timer);
14 |     timer = setTimeout(() => fn(...args), d);
15 |   };
16 |   return Debounce;
17 | };
18 | 


--------------------------------------------------------------------------------
/utils/SortData.js:
--------------------------------------------------------------------------------
 1 | export const SortHeader = [
 2 |   { id: 1, key: "number", title: "Atomic Number" },
 3 |   { id: 2, key: "name", title: "Name" },
 4 |   { id: 3, key: "symbol", title: "Symbol" },
 5 | ];
 6 | export const SortExplore = [
 7 |   { id: 1, key: "number", title: "Atomic Number" },
 8 |   { id: 2, key: "name", title: "Name" },
 9 |   { id: 3, key: "symbol", title: "Symbol" },
10 |   { id: 4, key: "category", title: "Category" },
11 |   { id: 5, key: "appearance", title: "Phase" },
12 | ];
13 | 


--------------------------------------------------------------------------------
/utils/colorCode.js:
--------------------------------------------------------------------------------
 1 | export const colorMap = {
 2 |   "noble gas": "#3AB0FF",
 3 |   "polyatomic nonmetal": "#F00699",
 4 |   "alkaline earth metal": "#01708F",
 5 |   "diatomic nonmetal": "#FF5F00",
 6 |   "alkali metal": "#3E00FF",
 7 |   "transition metal": "#BF1A2F",
 8 |   "post-transition metal": "#890596",
 9 |   lanthanide: "#7868E6",
10 |   actinide: "#FF8C32",
11 |   metalloid: "#3EC70B",
12 | };
13 | export const buttonDataMap = [
14 |   { id: 1, name: "noble gas", color: "#3AB0FF" },
15 |   { id: 2, name: "polyatomic nonmetal", color: "#F00699" },
16 |   { id: 3, name: "alkaline earth metal", color: "#01708F" },
17 |   { id: 4, name: "diatomic nonmetal", color: "#FF5F00" },
18 |   { id: 5, name: "alkali metal", color: "#3E00FF" },
19 |   { id: 6, name: "transition metal", color: "#BF1A2F" },
20 |   { id: 7, name: "post-transition metal", color: "#890596" },
21 |   { id: 8, name: "lanthanide", color: "#7868E6" },
22 |   { id: 9, name: "actinide", color: "#FF8C32" },
23 |   { id: 10, name: "metalloid", color: "#3EC70B" },
24 | ];
25 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
   1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
   2 | # yarn lockfile v1
   3 | 
   4 | 
   5 | "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.18.6":
   6 |   version "7.18.6"
   7 |   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz"
   8 |   integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
   9 |   dependencies:
  10 |     "@babel/highlight" "^7.18.6"
  11 | 
  12 | "@babel/generator@^7.18.10":
  13 |   version "7.18.12"
  14 |   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.12.tgz#fa58daa303757bd6f5e4bbca91b342040463d9f4"
  15 |   integrity sha512-dfQ8ebCN98SvyL7IxNMCUtZQSq5R7kxgN+r8qYTGDmmSion1hX2C0zq2yo1bsCDhXixokv1SAWTZUMYbO/V5zg==
  16 |   dependencies:
  17 |     "@babel/types" "^7.18.10"
  18 |     "@jridgewell/gen-mapping" "^0.3.2"
  19 |     jsesc "^2.5.1"
  20 | 
  21 | "@babel/helper-annotate-as-pure@^7.16.0":
  22 |   version "7.18.6"
  23 |   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
  24 |   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
  25 |   dependencies:
  26 |     "@babel/types" "^7.18.6"
  27 | 
  28 | "@babel/helper-environment-visitor@^7.18.9":
  29 |   version "7.18.9"
  30 |   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
  31 |   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
  32 | 
  33 | "@babel/helper-function-name@^7.18.9":
  34 |   version "7.18.9"
  35 |   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
  36 |   integrity sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==
  37 |   dependencies:
  38 |     "@babel/template" "^7.18.6"
  39 |     "@babel/types" "^7.18.9"
  40 | 
  41 | "@babel/helper-hoist-variables@^7.18.6":
  42 |   version "7.18.6"
  43 |   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
  44 |   integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
  45 |   dependencies:
  46 |     "@babel/types" "^7.18.6"
  47 | 
  48 | "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
  49 |   version "7.18.6"
  50 |   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
  51 |   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
  52 |   dependencies:
  53 |     "@babel/types" "^7.18.6"
  54 | 
  55 | "@babel/helper-plugin-utils@^7.18.6":
  56 |   version "7.18.6"
  57 |   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz"
  58 |   integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
  59 | 
  60 | "@babel/helper-split-export-declaration@^7.18.6":
  61 |   version "7.18.6"
  62 |   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
  63 |   integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
  64 |   dependencies:
  65 |     "@babel/types" "^7.18.6"
  66 | 
  67 | "@babel/helper-string-parser@^7.18.10":
  68 |   version "7.18.10"
  69 |   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
  70 |   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
  71 | 
  72 | "@babel/helper-validator-identifier@^7.18.6":
  73 |   version "7.18.6"
  74 |   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz"
  75 |   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
  76 | 
  77 | "@babel/highlight@^7.18.6":
  78 |   version "7.18.6"
  79 |   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
  80 |   integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
  81 |   dependencies:
  82 |     "@babel/helper-validator-identifier" "^7.18.6"
  83 |     chalk "^2.0.0"
  84 |     js-tokens "^4.0.0"
  85 | 
  86 | "@babel/parser@^7.18.10", "@babel/parser@^7.18.11":
  87 |   version "7.18.11"
  88 |   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
  89 |   integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
  90 | 
  91 | "@babel/plugin-syntax-jsx@^7.12.13":
  92 |   version "7.18.6"
  93 |   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
  94 |   integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
  95 |   dependencies:
  96 |     "@babel/helper-plugin-utils" "^7.18.6"
  97 | 
  98 | "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
  99 |   version "7.18.6"
 100 |   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz"
 101 |   integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
 102 |   dependencies:
 103 |     regenerator-runtime "^0.13.4"
 104 | 
 105 | "@babel/template@^7.18.6":
 106 |   version "7.18.10"
 107 |   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
 108 |   integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
 109 |   dependencies:
 110 |     "@babel/code-frame" "^7.18.6"
 111 |     "@babel/parser" "^7.18.10"
 112 |     "@babel/types" "^7.18.10"
 113 | 
 114 | "@babel/traverse@^7.4.5":
 115 |   version "7.18.11"
 116 |   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.11.tgz#3d51f2afbd83ecf9912bcbb5c4d94e3d2ddaa16f"
 117 |   integrity sha512-TG9PiM2R/cWCAy6BPJKeHzNbu4lPzOSZpeMfeNErskGpTJx6trEvFaVCbDvpcxwy49BKWmEPwiW8mrysNiDvIQ==
 118 |   dependencies:
 119 |     "@babel/code-frame" "^7.18.6"
 120 |     "@babel/generator" "^7.18.10"
 121 |     "@babel/helper-environment-visitor" "^7.18.9"
 122 |     "@babel/helper-function-name" "^7.18.9"
 123 |     "@babel/helper-hoist-variables" "^7.18.6"
 124 |     "@babel/helper-split-export-declaration" "^7.18.6"
 125 |     "@babel/parser" "^7.18.11"
 126 |     "@babel/types" "^7.18.10"
 127 |     debug "^4.1.0"
 128 |     globals "^11.1.0"
 129 | 
 130 | "@babel/types@^7.18.10", "@babel/types@^7.18.9":
 131 |   version "7.18.10"
 132 |   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.10.tgz#4908e81b6b339ca7c6b7a555a5fc29446f26dde6"
 133 |   integrity sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==
 134 |   dependencies:
 135 |     "@babel/helper-string-parser" "^7.18.10"
 136 |     "@babel/helper-validator-identifier" "^7.18.6"
 137 |     to-fast-properties "^2.0.0"
 138 | 
 139 | "@babel/types@^7.18.6":
 140 |   version "7.18.8"
 141 |   resolved "https://registry.npmjs.org/@babel/types/-/types-7.18.8.tgz"
 142 |   integrity sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==
 143 |   dependencies:
 144 |     "@babel/helper-validator-identifier" "^7.18.6"
 145 |     to-fast-properties "^2.0.0"
 146 | 
 147 | "@badrap/bar-of-progress@^0.2.1":
 148 |   version "0.2.1"
 149 |   resolved "https://registry.npmjs.org/@badrap/bar-of-progress/-/bar-of-progress-0.2.1.tgz"
 150 |   integrity sha512-+vqWaMkHnCcoKDo0dRhMpY40Lt2+Li2/vo0IArrbYWKTLeHatEGLJRX23iUl6quxwxVqrflJPCr8F0Sak+hujg==
 151 | 
 152 | "@emotion/babel-plugin@^11.7.1":
 153 |   version "11.9.2"
 154 |   resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz"
 155 |   integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
 156 |   dependencies:
 157 |     "@babel/helper-module-imports" "^7.12.13"
 158 |     "@babel/plugin-syntax-jsx" "^7.12.13"
 159 |     "@babel/runtime" "^7.13.10"
 160 |     "@emotion/hash" "^0.8.0"
 161 |     "@emotion/memoize" "^0.7.5"
 162 |     "@emotion/serialize" "^1.0.2"
 163 |     babel-plugin-macros "^2.6.1"
 164 |     convert-source-map "^1.5.0"
 165 |     escape-string-regexp "^4.0.0"
 166 |     find-root "^1.1.0"
 167 |     source-map "^0.5.7"
 168 |     stylis "4.0.13"
 169 | 
 170 | "@emotion/cache@^11.9.3":
 171 |   version "11.9.3"
 172 |   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz"
 173 |   integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
 174 |   dependencies:
 175 |     "@emotion/memoize" "^0.7.4"
 176 |     "@emotion/sheet" "^1.1.1"
 177 |     "@emotion/utils" "^1.0.0"
 178 |     "@emotion/weak-memoize" "^0.2.5"
 179 |     stylis "4.0.13"
 180 | 
 181 | "@emotion/hash@^0.8.0":
 182 |   version "0.8.0"
 183 |   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
 184 |   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 185 | 
 186 | "@emotion/is-prop-valid@^0.8.2":
 187 |   version "0.8.8"
 188 |   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
 189 |   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
 190 |   dependencies:
 191 |     "@emotion/memoize" "0.7.4"
 192 | 
 193 | "@emotion/is-prop-valid@^1.1.0":
 194 |   version "1.2.0"
 195 |   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
 196 |   integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
 197 |   dependencies:
 198 |     "@emotion/memoize" "^0.8.0"
 199 | 
 200 | "@emotion/is-prop-valid@^1.1.3":
 201 |   version "1.1.3"
 202 |   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz"
 203 |   integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
 204 |   dependencies:
 205 |     "@emotion/memoize" "^0.7.4"
 206 | 
 207 | "@emotion/memoize@0.7.4":
 208 |   version "0.7.4"
 209 |   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
 210 |   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 211 | 
 212 | "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
 213 |   version "0.7.5"
 214 |   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz"
 215 |   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 216 | 
 217 | "@emotion/memoize@^0.8.0":
 218 |   version "0.8.0"
 219 |   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
 220 |   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
 221 | 
 222 | "@emotion/react@^11.9.3":
 223 |   version "11.9.3"
 224 |   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.3.tgz#f4f4f34444f6654a2e550f5dab4f2d360c101df9"
 225 |   integrity sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==
 226 |   dependencies:
 227 |     "@babel/runtime" "^7.13.10"
 228 |     "@emotion/babel-plugin" "^11.7.1"
 229 |     "@emotion/cache" "^11.9.3"
 230 |     "@emotion/serialize" "^1.0.4"
 231 |     "@emotion/utils" "^1.1.0"
 232 |     "@emotion/weak-memoize" "^0.2.5"
 233 |     hoist-non-react-statics "^3.3.1"
 234 | 
 235 | "@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.4":
 236 |   version "1.0.4"
 237 |   resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.4.tgz"
 238 |   integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==
 239 |   dependencies:
 240 |     "@emotion/hash" "^0.8.0"
 241 |     "@emotion/memoize" "^0.7.4"
 242 |     "@emotion/unitless" "^0.7.5"
 243 |     "@emotion/utils" "^1.0.0"
 244 |     csstype "^3.0.2"
 245 | 
 246 | "@emotion/sheet@^1.1.1":
 247 |   version "1.1.1"
 248 |   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz"
 249 |   integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
 250 | 
 251 | "@emotion/styled@^11.9.3":
 252 |   version "11.9.3"
 253 |   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.9.3.tgz#47f0c71137fec7c57035bf3659b52fb536792340"
 254 |   integrity sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==
 255 |   dependencies:
 256 |     "@babel/runtime" "^7.13.10"
 257 |     "@emotion/babel-plugin" "^11.7.1"
 258 |     "@emotion/is-prop-valid" "^1.1.3"
 259 |     "@emotion/serialize" "^1.0.4"
 260 |     "@emotion/utils" "^1.1.0"
 261 | 
 262 | "@emotion/stylis@^0.8.4":
 263 |   version "0.8.5"
 264 |   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
 265 |   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 266 | 
 267 | "@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
 268 |   version "0.7.5"
 269 |   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
 270 |   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 271 | 
 272 | "@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
 273 |   version "1.1.0"
 274 |   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz"
 275 |   integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 276 | 
 277 | "@emotion/weak-memoize@^0.2.5":
 278 |   version "0.2.5"
 279 |   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
 280 |   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 281 | 
 282 | "@heroicons/react@^1.0.6":
 283 |   version "1.0.6"
 284 |   resolved "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz"
 285 |   integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
 286 | 
 287 | "@jridgewell/gen-mapping@^0.3.2":
 288 |   version "0.3.2"
 289 |   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
 290 |   integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
 291 |   dependencies:
 292 |     "@jridgewell/set-array" "^1.0.1"
 293 |     "@jridgewell/sourcemap-codec" "^1.4.10"
 294 |     "@jridgewell/trace-mapping" "^0.3.9"
 295 | 
 296 | "@jridgewell/resolve-uri@^3.0.3":
 297 |   version "3.1.0"
 298 |   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
 299 |   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 300 | 
 301 | "@jridgewell/set-array@^1.0.1":
 302 |   version "1.1.2"
 303 |   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
 304 |   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 305 | 
 306 | "@jridgewell/sourcemap-codec@^1.4.10":
 307 |   version "1.4.14"
 308 |   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
 309 |   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 310 | 
 311 | "@jridgewell/trace-mapping@^0.3.9":
 312 |   version "0.3.15"
 313 |   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
 314 |   integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
 315 |   dependencies:
 316 |     "@jridgewell/resolve-uri" "^3.0.3"
 317 |     "@jridgewell/sourcemap-codec" "^1.4.10"
 318 | 
 319 | "@mui/base@5.0.0-alpha.89":
 320 |   version "5.0.0-alpha.89"
 321 |   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.89.tgz#d72681fa20e05297b426e113c47a0912b59c8b44"
 322 |   integrity sha512-2g18hzt947qQ3gQQPOPEBfzQmaT2wafVhyJ7ZOZXeU6kKb88MdlHoPkK2lKXCHMBtRGnnsiF36j0rmhQXu0I5g==
 323 |   dependencies:
 324 |     "@babel/runtime" "^7.17.2"
 325 |     "@emotion/is-prop-valid" "^1.1.3"
 326 |     "@mui/types" "^7.1.4"
 327 |     "@mui/utils" "^5.9.0"
 328 |     "@popperjs/core" "^2.11.5"
 329 |     clsx "^1.2.1"
 330 |     prop-types "^15.8.1"
 331 |     react-is "^18.2.0"
 332 | 
 333 | "@mui/icons-material@^5.8.4":
 334 |   version "5.8.4"
 335 |   resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.4.tgz#3f2907c9f8f5ce4d754cb8fb4b68b5a1abf4d095"
 336 |   integrity sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==
 337 |   dependencies:
 338 |     "@babel/runtime" "^7.17.2"
 339 | 
 340 | "@mui/lab@^5.0.0-alpha.90":
 341 |   version "5.0.0-alpha.90"
 342 |   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.90.tgz#c70549f2c398a5c5e41755de22c1e18c9e470d77"
 343 |   integrity sha512-9ze3cIo5OU7XSdB/FaV6JHJlFfyg2MpedakDHcFncoZRL2vvKJas3NOBaLKKxNN360RdUiUbHJZzKcCOyhQJug==
 344 |   dependencies:
 345 |     "@babel/runtime" "^7.17.2"
 346 |     "@mui/base" "5.0.0-alpha.89"
 347 |     "@mui/system" "^5.9.0"
 348 |     "@mui/utils" "^5.9.0"
 349 |     clsx "^1.2.1"
 350 |     prop-types "^15.8.1"
 351 |     react-is "^18.2.0"
 352 | 
 353 | "@mui/material@^5.9.0":
 354 |   version "5.9.0"
 355 |   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.9.0.tgz#e1cc4f67f16d337e9b94939caa8d6905db45d4e4"
 356 |   integrity sha512-KZN3QEeCtwSP1IRpDZ7KQghDX7tyxZojADRCn+UKnoq8HUGNMJm2XKdb7hy9/ybaSW4EXQSKXSGg1AjdfS7Cdg==
 357 |   dependencies:
 358 |     "@babel/runtime" "^7.17.2"
 359 |     "@mui/base" "5.0.0-alpha.89"
 360 |     "@mui/system" "^5.9.0"
 361 |     "@mui/types" "^7.1.4"
 362 |     "@mui/utils" "^5.9.0"
 363 |     "@types/react-transition-group" "^4.4.5"
 364 |     clsx "^1.2.1"
 365 |     csstype "^3.1.0"
 366 |     prop-types "^15.8.1"
 367 |     react-is "^18.2.0"
 368 |     react-transition-group "^4.4.2"
 369 | 
 370 | "@mui/private-theming@^5.9.0":
 371 |   version "5.9.0"
 372 |   resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.9.0.tgz#d2437ed95ecfa3bfc9d2ee7c6053c94d4931cb26"
 373 |   integrity sha512-t0ZsWxE/LvX5RH5azjx1esBHbIfD9zjnbSAYkpE59BPpkOrqAYDGoJguL2EPd9LaUb6COmBozmAwNenvI6RJRQ==
 374 |   dependencies:
 375 |     "@babel/runtime" "^7.17.2"
 376 |     "@mui/utils" "^5.9.0"
 377 |     prop-types "^15.8.1"
 378 | 
 379 | "@mui/styled-engine@^5.8.7":
 380 |   version "5.8.7"
 381 |   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.7.tgz#63d0779c07677fe76d4705a02c7ae99f89b50780"
 382 |   integrity sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==
 383 |   dependencies:
 384 |     "@babel/runtime" "^7.17.2"
 385 |     "@emotion/cache" "^11.9.3"
 386 |     csstype "^3.1.0"
 387 |     prop-types "^15.8.1"
 388 | 
 389 | "@mui/system@^5.9.0":
 390 |   version "5.9.0"
 391 |   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.9.0.tgz#804055bc6fcd557479b8b28dfca7ed5c98fd9bf9"
 392 |   integrity sha512-KLZDYMmT1usokEJH+raGTh1SbdOx4BVrT+wg8nRpKGNii2sfc3ntuJSKuv3Fu9oeC9xVFTnNBHXKrpJuxeDcqg==
 393 |   dependencies:
 394 |     "@babel/runtime" "^7.17.2"
 395 |     "@mui/private-theming" "^5.9.0"
 396 |     "@mui/styled-engine" "^5.8.7"
 397 |     "@mui/types" "^7.1.4"
 398 |     "@mui/utils" "^5.9.0"
 399 |     clsx "^1.2.1"
 400 |     csstype "^3.1.0"
 401 |     prop-types "^15.8.1"
 402 | 
 403 | "@mui/types@^7.1.4":
 404 |   version "7.1.4"
 405 |   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.4.tgz#4185c05d6df63ec673cda15feab80440abadc764"
 406 |   integrity sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==
 407 | 
 408 | "@mui/utils@^5.9.0":
 409 |   version "5.9.0"
 410 |   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.9.0.tgz#2e1ac58905b767de47412cb32475862875b8e880"
 411 |   integrity sha512-GAaiWP6zBC3RE1NHP9y1c1iKZh5s/nyKKqWxfTrw5lNQY5tWTh9/47F682FuiE5WT1o3h4w/LEkSSIZpMEDzrA==
 412 |   dependencies:
 413 |     "@babel/runtime" "^7.17.2"
 414 |     "@types/prop-types" "^15.7.5"
 415 |     "@types/react-is" "^16.7.1 || ^17.0.0"
 416 |     prop-types "^15.8.1"
 417 |     react-is "^18.2.0"
 418 | 
 419 | "@next/env@12.2.2":
 420 |   version "12.2.2"
 421 |   resolved "https://registry.npmjs.org/@next/env/-/env-12.2.2.tgz"
 422 |   integrity sha512-BqDwE4gDl1F608TpnNxZqrCn6g48MBjvmWFEmeX5wEXDXh3IkAOw6ASKUgjT8H4OUePYFqghDFUss5ZhnbOUjw==
 423 | 
 424 | "@next/swc-android-arm-eabi@12.2.2":
 425 |   version "12.2.2"
 426 |   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.2.tgz#f6c4111e6371f73af6bf80c9accb3d96850a92cd"
 427 |   integrity sha512-VHjuCHeq9qCprUZbsRxxM/VqSW8MmsUtqB5nEpGEgUNnQi/BTm/2aK8tl7R4D0twGKRh6g1AAeFuWtXzk9Z/vQ==
 428 | 
 429 | "@next/swc-android-arm64@12.2.2":
 430 |   version "12.2.2"
 431 |   resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.2.2.tgz#b69de59c51e631a7600439e7a8993d6e82f3369e"
 432 |   integrity sha512-v5EYzXUOSv0r9mO/2PX6mOcF53k8ndlu9yeFHVAWW1Dhw2jaJcvTRcCAwYYN8Q3tDg0nH3NbEltJDLKmcJOuVA==
 433 | 
 434 | "@next/swc-darwin-arm64@12.2.2":
 435 |   version "12.2.2"
 436 |   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.2.tgz#80157c91668eff95b72d052428c353eab0fc4c50"
 437 |   integrity sha512-JCoGySHKGt+YBk7xRTFGx1QjrnCcwYxIo3yGepcOq64MoiocTM3yllQWeOAJU2/k9MH0+B5E9WUSme4rOCBbpA==
 438 | 
 439 | "@next/swc-darwin-x64@12.2.2":
 440 |   version "12.2.2"
 441 |   resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.2.tgz"
 442 |   integrity sha512-dztDtvfkhUqiqpXvrWVccfGhLe44yQ5tQ7B4tBfnsOR6vxzI9DNPHTlEOgRN9qDqTAcFyPxvg86mn4l8bB9Jcw==
 443 | 
 444 | "@next/swc-freebsd-x64@12.2.2":
 445 |   version "12.2.2"
 446 |   resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.2.tgz#de1363431a49059f1efb8c0f86ce6a79c53b3a95"
 447 |   integrity sha512-JUnXB+2xfxqsAvhFLPJpU1NeyDsvJrKoOjpV7g3Dxbno2Riu4tDKn3kKF886yleAuD/1qNTUCpqubTvbbT2VoA==
 448 | 
 449 | "@next/swc-linux-arm-gnueabihf@12.2.2":
 450 |   version "12.2.2"
 451 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.2.tgz#d5b8e0d1bb55bbd9db4d2fec018217471dc8b9e6"
 452 |   integrity sha512-XeYC/qqPLz58R4pjkb+x8sUUxuGLnx9QruC7/IGkK68yW4G17PHwKI/1njFYVfXTXUukpWjcfBuauWwxp9ke7Q==
 453 | 
 454 | "@next/swc-linux-arm64-gnu@12.2.2":
 455 |   version "12.2.2"
 456 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.2.tgz#3bc75984e1d5ec8f59eb53702cc382d8e1be2061"
 457 |   integrity sha512-d6jT8xgfKYFkzR7J0OHo2D+kFvY/6W8qEo6/hmdrTt6AKAqxs//rbbcdoyn3YQq1x6FVUUd39zzpezZntg9Naw==
 458 | 
 459 | "@next/swc-linux-arm64-musl@12.2.2":
 460 |   version "12.2.2"
 461 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.2.tgz#270db73e07a18d999f61e79a917943fa5bc1ef56"
 462 |   integrity sha512-rIZRFxI9N/502auJT1i7coas0HTHUM+HaXMyJiCpnY8Rimbo0495ir24tzzHo3nQqJwcflcPTwEh/DV17sdv9A==
 463 | 
 464 | "@next/swc-linux-x64-gnu@12.2.2":
 465 |   version "12.2.2"
 466 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.2.tgz#e6c72fa20478552e898c434f4d4c0c5e89d2ea78"
 467 |   integrity sha512-ir1vNadlUDj7eQk15AvfhG5BjVizuCHks9uZwBfUgT5jyeDCeRvaDCo1+Q6+0CLOAnYDR/nqSCvBgzG2UdFh9A==
 468 | 
 469 | "@next/swc-linux-x64-musl@12.2.2":
 470 |   version "12.2.2"
 471 |   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.2.tgz#b9ef9efe2c401839cdefa5e70402386aafdce15a"
 472 |   integrity sha512-bte5n2GzLN3O8JdSFYWZzMgEgDHZmRz5wiispiiDssj4ik3l8E7wq/czNi8RmIF+ioj2sYVokUNa/ekLzrESWw==
 473 | 
 474 | "@next/swc-win32-arm64-msvc@12.2.2":
 475 |   version "12.2.2"
 476 |   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.2.tgz#18fa7ec7248da3a7926a0601d9ececc53ac83157"
 477 |   integrity sha512-ZUGCmcDmdPVSAlwJ/aD+1F9lYW8vttseiv4n2+VCDv5JloxiX9aY32kYZaJJO7hmTLNrprvXkb4OvNuHdN22Jg==
 478 | 
 479 | "@next/swc-win32-ia32-msvc@12.2.2":
 480 |   version "12.2.2"
 481 |   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.2.tgz#54936e84f4a219441d051940354da7cd3eafbb4f"
 482 |   integrity sha512-v7ykeEDbr9eXiblGSZiEYYkWoig6sRhAbLKHUHQtk8vEWWVEqeXFcxmw6LRrKu5rCN1DY357UlYWToCGPQPCRA==
 483 | 
 484 | "@next/swc-win32-x64-msvc@12.2.2":
 485 |   version "12.2.2"
 486 |   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.2.tgz#7460be700a60d75816f01109400b51fe929d7e89"
 487 |   integrity sha512-2D2iinWUL6xx8D9LYVZ5qi7FP6uLAoWymt8m8aaG2Ld/Ka8/k723fJfiklfuAcwOxfufPJI+nRbT5VcgHGzHAQ==
 488 | 
 489 | "@nodelib/fs.scandir@2.1.5":
 490 |   version "2.1.5"
 491 |   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
 492 |   integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
 493 |   dependencies:
 494 |     "@nodelib/fs.stat" "2.0.5"
 495 |     run-parallel "^1.1.9"
 496 | 
 497 | "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
 498 |   version "2.0.5"
 499 |   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
 500 |   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 501 | 
 502 | "@nodelib/fs.walk@^1.2.3":
 503 |   version "1.2.8"
 504 |   resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
 505 |   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
 506 |   dependencies:
 507 |     "@nodelib/fs.scandir" "2.1.5"
 508 |     fastq "^1.6.0"
 509 | 
 510 | "@popperjs/core@^2.11.5":
 511 |   version "2.11.5"
 512 |   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
 513 |   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
 514 | 
 515 | "@swc/helpers@0.4.2":
 516 |   version "0.4.2"
 517 |   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz"
 518 |   integrity sha512-556Az0VX7WR6UdoTn4htt/l3zPQ7bsQWK+HqdG4swV7beUCxo/BqmvbOpUkTIm/9ih86LIf1qsUnywNL3obGHw==
 519 |   dependencies:
 520 |     tslib "^2.4.0"
 521 | 
 522 | "@types/node@17.0.35":
 523 |   version "17.0.35"
 524 |   resolved "https://registry.npmjs.org/@types/node/-/node-17.0.35.tgz"
 525 |   integrity sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg==
 526 | 
 527 | "@types/parse-json@^4.0.0":
 528 |   version "4.0.0"
 529 |   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
 530 |   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 531 | 
 532 | "@types/prop-types@*", "@types/prop-types@^15.7.5":
 533 |   version "15.7.5"
 534 |   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
 535 |   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 536 | 
 537 | "@types/react-dom@18.0.5":
 538 |   version "18.0.5"
 539 |   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz"
 540 |   integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
 541 |   dependencies:
 542 |     "@types/react" "*"
 543 | 
 544 | "@types/react-is@^16.7.1 || ^17.0.0":
 545 |   version "17.0.3"
 546 |   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
 547 |   integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
 548 |   dependencies:
 549 |     "@types/react" "*"
 550 | 
 551 | "@types/react-transition-group@^4.4.5":
 552 |   version "4.4.5"
 553 |   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
 554 |   integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
 555 |   dependencies:
 556 |     "@types/react" "*"
 557 | 
 558 | "@types/react@*", "@types/react@18.0.9":
 559 |   version "18.0.9"
 560 |   resolved "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz"
 561 |   integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
 562 |   dependencies:
 563 |     "@types/prop-types" "*"
 564 |     "@types/scheduler" "*"
 565 |     csstype "^3.0.2"
 566 | 
 567 | "@types/scheduler@*":
 568 |   version "0.16.2"
 569 |   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
 570 |   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 571 | 
 572 | acorn-node@^1.8.2:
 573 |   version "1.8.2"
 574 |   resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz"
 575 |   integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
 576 |   dependencies:
 577 |     acorn "^7.0.0"
 578 |     acorn-walk "^7.0.0"
 579 |     xtend "^4.0.2"
 580 | 
 581 | acorn-walk@^7.0.0:
 582 |   version "7.2.0"
 583 |   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
 584 |   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 585 | 
 586 | acorn@^7.0.0:
 587 |   version "7.4.1"
 588 |   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
 589 |   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 590 | 
 591 | ansi-styles@^3.2.1:
 592 |   version "3.2.1"
 593 |   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
 594 |   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
 595 |   dependencies:
 596 |     color-convert "^1.9.0"
 597 | 
 598 | anymatch@~3.1.2:
 599 |   version "3.1.2"
 600 |   resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
 601 |   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
 602 |   dependencies:
 603 |     normalize-path "^3.0.0"
 604 |     picomatch "^2.0.4"
 605 | 
 606 | arg@^5.0.2:
 607 |   version "5.0.2"
 608 |   resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
 609 |   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 610 | 
 611 | autoprefixer@^10.4.7:
 612 |   version "10.4.7"
 613 |   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz"
 614 |   integrity sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==
 615 |   dependencies:
 616 |     browserslist "^4.20.3"
 617 |     caniuse-lite "^1.0.30001335"
 618 |     fraction.js "^4.2.0"
 619 |     normalize-range "^0.1.2"
 620 |     picocolors "^1.0.0"
 621 |     postcss-value-parser "^4.2.0"
 622 | 
 623 | babel-plugin-macros@^2.6.1:
 624 |   version "2.8.0"
 625 |   resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
 626 |   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
 627 |   dependencies:
 628 |     "@babel/runtime" "^7.7.2"
 629 |     cosmiconfig "^6.0.0"
 630 |     resolve "^1.12.0"
 631 | 
 632 | "babel-plugin-styled-components@>= 1.12.0":
 633 |   version "2.0.7"
 634 |   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
 635 |   integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
 636 |   dependencies:
 637 |     "@babel/helper-annotate-as-pure" "^7.16.0"
 638 |     "@babel/helper-module-imports" "^7.16.0"
 639 |     babel-plugin-syntax-jsx "^6.18.0"
 640 |     lodash "^4.17.11"
 641 |     picomatch "^2.3.0"
 642 | 
 643 | babel-plugin-syntax-jsx@^6.18.0:
 644 |   version "6.18.0"
 645 |   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 646 |   integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
 647 | 
 648 | binary-extensions@^2.0.0:
 649 |   version "2.2.0"
 650 |   resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
 651 |   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 652 | 
 653 | braces@^3.0.2, braces@~3.0.2:
 654 |   version "3.0.2"
 655 |   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
 656 |   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
 657 |   dependencies:
 658 |     fill-range "^7.0.1"
 659 | 
 660 | browserslist@^4.20.3:
 661 |   version "4.21.1"
 662 |   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz"
 663 |   integrity sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==
 664 |   dependencies:
 665 |     caniuse-lite "^1.0.30001359"
 666 |     electron-to-chromium "^1.4.172"
 667 |     node-releases "^2.0.5"
 668 |     update-browserslist-db "^1.0.4"
 669 | 
 670 | callsites@^3.0.0:
 671 |   version "3.1.0"
 672 |   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
 673 |   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 674 | 
 675 | camelcase-css@^2.0.1:
 676 |   version "2.0.1"
 677 |   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
 678 |   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 679 | 
 680 | camelize@^1.0.0:
 681 |   version "1.0.0"
 682 |   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
 683 |   integrity sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==
 684 | 
 685 | caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001359:
 686 |   version "1.0.30001364"
 687 |   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001364.tgz"
 688 |   integrity sha512-9O0xzV3wVyX0SlegIQ6knz+okhBB5pE0PC40MNdwcipjwpxoUEHL24uJ+gG42cgklPjfO5ZjZPme9FTSN3QT2Q==
 689 | 
 690 | chalk@^2.0.0:
 691 |   version "2.4.2"
 692 |   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
 693 |   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
 694 |   dependencies:
 695 |     ansi-styles "^3.2.1"
 696 |     escape-string-regexp "^1.0.5"
 697 |     supports-color "^5.3.0"
 698 | 
 699 | chokidar@^3.5.3:
 700 |   version "3.5.3"
 701 |   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
 702 |   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
 703 |   dependencies:
 704 |     anymatch "~3.1.2"
 705 |     braces "~3.0.2"
 706 |     glob-parent "~5.1.2"
 707 |     is-binary-path "~2.1.0"
 708 |     is-glob "~4.0.1"
 709 |     normalize-path "~3.0.0"
 710 |     readdirp "~3.6.0"
 711 |   optionalDependencies:
 712 |     fsevents "~2.3.2"
 713 | 
 714 | clsx@^1.2.1:
 715 |   version "1.2.1"
 716 |   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
 717 |   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 718 | 
 719 | color-convert@^1.9.0:
 720 |   version "1.9.3"
 721 |   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
 722 |   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
 723 |   dependencies:
 724 |     color-name "1.1.3"
 725 | 
 726 | color-name@1.1.3:
 727 |   version "1.1.3"
 728 |   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
 729 |   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 730 | 
 731 | color-name@^1.1.4:
 732 |   version "1.1.4"
 733 |   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
 734 |   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 735 | 
 736 | convert-source-map@^1.5.0:
 737 |   version "1.8.0"
 738 |   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
 739 |   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
 740 |   dependencies:
 741 |     safe-buffer "~5.1.1"
 742 | 
 743 | cosmiconfig@^6.0.0:
 744 |   version "6.0.0"
 745 |   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz"
 746 |   integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
 747 |   dependencies:
 748 |     "@types/parse-json" "^4.0.0"
 749 |     import-fresh "^3.1.0"
 750 |     parse-json "^5.0.0"
 751 |     path-type "^4.0.0"
 752 |     yaml "^1.7.2"
 753 | 
 754 | css-color-keywords@^1.0.0:
 755 |   version "1.0.0"
 756 |   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
 757 |   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 758 | 
 759 | css-to-react-native@^3.0.0:
 760 |   version "3.0.0"
 761 |   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
 762 |   integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
 763 |   dependencies:
 764 |     camelize "^1.0.0"
 765 |     css-color-keywords "^1.0.0"
 766 |     postcss-value-parser "^4.0.2"
 767 | 
 768 | cssesc@^3.0.0:
 769 |   version "3.0.0"
 770 |   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
 771 |   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 772 | 
 773 | csstype@^3.0.2, csstype@^3.1.0:
 774 |   version "3.1.0"
 775 |   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz"
 776 |   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 777 | 
 778 | debug@^2.1.3:
 779 |   version "2.6.9"
 780 |   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
 781 |   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
 782 |   dependencies:
 783 |     ms "2.0.0"
 784 | 
 785 | debug@^4.1.0:
 786 |   version "4.3.4"
 787 |   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
 788 |   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
 789 |   dependencies:
 790 |     ms "2.1.2"
 791 | 
 792 | defined@^1.0.0:
 793 |   version "1.0.0"
 794 |   resolved "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz"
 795 |   integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
 796 | 
 797 | detective@^5.2.1:
 798 |   version "5.2.1"
 799 |   resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz"
 800 |   integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
 801 |   dependencies:
 802 |     acorn-node "^1.8.2"
 803 |     defined "^1.0.0"
 804 |     minimist "^1.2.6"
 805 | 
 806 | didyoumean@^1.2.2:
 807 |   version "1.2.2"
 808 |   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
 809 |   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 810 | 
 811 | dlv@^1.1.3:
 812 |   version "1.1.3"
 813 |   resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
 814 |   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 815 | 
 816 | dom-helpers@^5.0.1:
 817 |   version "5.2.1"
 818 |   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
 819 |   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
 820 |   dependencies:
 821 |     "@babel/runtime" "^7.8.7"
 822 |     csstype "^3.0.2"
 823 | 
 824 | electron-to-chromium@^1.4.172:
 825 |   version "1.4.186"
 826 |   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.186.tgz"
 827 |   integrity sha512-YoVeFrGd/7ROjz4R9uPoND1K/hSRC/xADy9639ZmIZeJSaBnKdYx3I6LMPsY7CXLpK7JFgKQVzeZ/dk2br6Eaw==
 828 | 
 829 | error-ex@^1.3.1:
 830 |   version "1.3.2"
 831 |   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
 832 |   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
 833 |   dependencies:
 834 |     is-arrayish "^0.2.1"
 835 | 
 836 | escalade@^3.1.1:
 837 |   version "3.1.1"
 838 |   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
 839 |   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 840 | 
 841 | escape-string-regexp@^1.0.5:
 842 |   version "1.0.5"
 843 |   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
 844 |   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 845 | 
 846 | escape-string-regexp@^4.0.0:
 847 |   version "4.0.0"
 848 |   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
 849 |   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 850 | 
 851 | fast-glob@^3.2.11:
 852 |   version "3.2.11"
 853 |   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz"
 854 |   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
 855 |   dependencies:
 856 |     "@nodelib/fs.stat" "^2.0.2"
 857 |     "@nodelib/fs.walk" "^1.2.3"
 858 |     glob-parent "^5.1.2"
 859 |     merge2 "^1.3.0"
 860 |     micromatch "^4.0.4"
 861 | 
 862 | fastq@^1.6.0:
 863 |   version "1.13.0"
 864 |   resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
 865 |   integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
 866 |   dependencies:
 867 |     reusify "^1.0.4"
 868 | 
 869 | fill-range@^7.0.1:
 870 |   version "7.0.1"
 871 |   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
 872 |   integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
 873 |   dependencies:
 874 |     to-regex-range "^5.0.1"
 875 | 
 876 | find-root@^1.1.0:
 877 |   version "1.1.0"
 878 |   resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
 879 |   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 880 | 
 881 | fraction.js@^4.2.0:
 882 |   version "4.2.0"
 883 |   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
 884 |   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 885 | 
 886 | framer-motion@^10.12.17:
 887 |   version "10.12.17"
 888 |   resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.17.tgz#0e891aaddbe6049267c413449945af95585cbc87"
 889 |   integrity sha512-IR+aAYntsyu6ofyxqQV4QYotmOqzcuKxhqNpfc3DXJjNWOPpOeSyH0A+In3IEBu49Yx/+PNht+YMeZSdCNaYbw==
 890 |   dependencies:
 891 |     tslib "^2.4.0"
 892 |   optionalDependencies:
 893 |     "@emotion/is-prop-valid" "^0.8.2"
 894 | 
 895 | fsevents@~2.3.2:
 896 |   version "2.3.2"
 897 |   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
 898 |   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 899 | 
 900 | function-bind@^1.1.1:
 901 |   version "1.1.1"
 902 |   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
 903 |   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 904 | 
 905 | glob-parent@^5.1.2, glob-parent@~5.1.2:
 906 |   version "5.1.2"
 907 |   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
 908 |   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
 909 |   dependencies:
 910 |     is-glob "^4.0.1"
 911 | 
 912 | glob-parent@^6.0.2:
 913 |   version "6.0.2"
 914 |   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
 915 |   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
 916 |   dependencies:
 917 |     is-glob "^4.0.3"
 918 | 
 919 | globals@^11.1.0:
 920 |   version "11.12.0"
 921 |   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
 922 |   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 923 | 
 924 | has-flag@^3.0.0:
 925 |   version "3.0.0"
 926 |   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
 927 |   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 928 | 
 929 | has@^1.0.3:
 930 |   version "1.0.3"
 931 |   resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
 932 |   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
 933 |   dependencies:
 934 |     function-bind "^1.1.1"
 935 | 
 936 | hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1:
 937 |   version "3.3.2"
 938 |   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
 939 |   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
 940 |   dependencies:
 941 |     react-is "^16.7.0"
 942 | 
 943 | import-fresh@^3.1.0:
 944 |   version "3.3.0"
 945 |   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
 946 |   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
 947 |   dependencies:
 948 |     parent-module "^1.0.0"
 949 |     resolve-from "^4.0.0"
 950 | 
 951 | is-arrayish@^0.2.1:
 952 |   version "0.2.1"
 953 |   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
 954 |   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 955 | 
 956 | is-binary-path@~2.1.0:
 957 |   version "2.1.0"
 958 |   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
 959 |   integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
 960 |   dependencies:
 961 |     binary-extensions "^2.0.0"
 962 | 
 963 | is-core-module@^2.9.0:
 964 |   version "2.9.0"
 965 |   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz"
 966 |   integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
 967 |   dependencies:
 968 |     has "^1.0.3"
 969 | 
 970 | is-extglob@^2.1.1:
 971 |   version "2.1.1"
 972 |   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
 973 |   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 974 | 
 975 | is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
 976 |   version "4.0.3"
 977 |   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
 978 |   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
 979 |   dependencies:
 980 |     is-extglob "^2.1.1"
 981 | 
 982 | is-number@^7.0.0:
 983 |   version "7.0.0"
 984 |   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
 985 |   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 986 | 
 987 | "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
 988 |   version "4.0.0"
 989 |   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
 990 |   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 991 | 
 992 | jsesc@^2.5.1:
 993 |   version "2.5.2"
 994 |   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
 995 |   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 996 | 
 997 | json-parse-even-better-errors@^2.3.0:
 998 |   version "2.3.1"
 999 |   resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
1000 |   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
1001 | 
1002 | jsonp@^0.2.1:
1003 |   version "0.2.1"
1004 |   resolved "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz"
1005 |   integrity sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==
1006 |   dependencies:
1007 |     debug "^2.1.3"
1008 | 
1009 | lilconfig@^2.0.5:
1010 |   version "2.0.6"
1011 |   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
1012 |   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
1013 | 
1014 | lines-and-columns@^1.1.6:
1015 |   version "1.2.4"
1016 |   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
1017 |   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
1018 | 
1019 | lodash@^4.17.11:
1020 |   version "4.17.21"
1021 |   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
1022 |   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
1023 | 
1024 | loose-envify@^1.1.0, loose-envify@^1.4.0:
1025 |   version "1.4.0"
1026 |   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
1027 |   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
1028 |   dependencies:
1029 |     js-tokens "^3.0.0 || ^4.0.0"
1030 | 
1031 | merge2@^1.3.0:
1032 |   version "1.4.1"
1033 |   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
1034 |   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
1035 | 
1036 | micromatch@^4.0.4:
1037 |   version "4.0.5"
1038 |   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
1039 |   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
1040 |   dependencies:
1041 |     braces "^3.0.2"
1042 |     picomatch "^2.3.1"
1043 | 
1044 | minimist@^1.2.6:
1045 |   version "1.2.6"
1046 |   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
1047 |   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
1048 | 
1049 | ms@2.0.0:
1050 |   version "2.0.0"
1051 |   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
1052 |   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
1053 | 
1054 | ms@2.1.2:
1055 |   version "2.1.2"
1056 |   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
1057 |   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
1058 | 
1059 | nanoid@^3.1.30, nanoid@^3.3.4:
1060 |   version "3.3.4"
1061 |   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
1062 |   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
1063 | 
1064 | next-share@^0.16.0:
1065 |   version "0.16.0"
1066 |   resolved "https://registry.npmjs.org/next-share/-/next-share-0.16.0.tgz"
1067 |   integrity sha512-j/2JaUvqv1raLohwhzQE4QKPK8sZq2O8kQXP+kmZ73cfxPlPzgMd8F/d9ETJ/TymRdvdyPxML03Q9xYQOYBkCQ==
1068 |   dependencies:
1069 |     jsonp "^0.2.1"
1070 | 
1071 | next@latest:
1072 |   version "12.2.2"
1073 |   resolved "https://registry.npmjs.org/next/-/next-12.2.2.tgz"
1074 |   integrity sha512-zAYFY45aBry/PlKONqtlloRFqU/We3zWYdn2NoGvDZkoYUYQSJC8WMcalS5C19MxbCZLUVCX7D7a6gTGgl2yLg==
1075 |   dependencies:
1076 |     "@next/env" "12.2.2"
1077 |     "@swc/helpers" "0.4.2"
1078 |     caniuse-lite "^1.0.30001332"
1079 |     postcss "8.4.5"
1080 |     styled-jsx "5.0.2"
1081 |     use-sync-external-store "1.1.0"
1082 |   optionalDependencies:
1083 |     "@next/swc-android-arm-eabi" "12.2.2"
1084 |     "@next/swc-android-arm64" "12.2.2"
1085 |     "@next/swc-darwin-arm64" "12.2.2"
1086 |     "@next/swc-darwin-x64" "12.2.2"
1087 |     "@next/swc-freebsd-x64" "12.2.2"
1088 |     "@next/swc-linux-arm-gnueabihf" "12.2.2"
1089 |     "@next/swc-linux-arm64-gnu" "12.2.2"
1090 |     "@next/swc-linux-arm64-musl" "12.2.2"
1091 |     "@next/swc-linux-x64-gnu" "12.2.2"
1092 |     "@next/swc-linux-x64-musl" "12.2.2"
1093 |     "@next/swc-win32-arm64-msvc" "12.2.2"
1094 |     "@next/swc-win32-ia32-msvc" "12.2.2"
1095 |     "@next/swc-win32-x64-msvc" "12.2.2"
1096 | 
1097 | node-releases@^2.0.5:
1098 |   version "2.0.6"
1099 |   resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz"
1100 |   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
1101 | 
1102 | normalize-path@^3.0.0, normalize-path@~3.0.0:
1103 |   version "3.0.0"
1104 |   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
1105 |   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
1106 | 
1107 | normalize-range@^0.1.2:
1108 |   version "0.1.2"
1109 |   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
1110 |   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
1111 | 
1112 | object-assign@^4.1.1:
1113 |   version "4.1.1"
1114 |   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
1115 |   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
1116 | 
1117 | object-hash@^3.0.0:
1118 |   version "3.0.0"
1119 |   resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
1120 |   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
1121 | 
1122 | parent-module@^1.0.0:
1123 |   version "1.0.1"
1124 |   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
1125 |   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
1126 |   dependencies:
1127 |     callsites "^3.0.0"
1128 | 
1129 | parse-json@^5.0.0:
1130 |   version "5.2.0"
1131 |   resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
1132 |   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
1133 |   dependencies:
1134 |     "@babel/code-frame" "^7.0.0"
1135 |     error-ex "^1.3.1"
1136 |     json-parse-even-better-errors "^2.3.0"
1137 |     lines-and-columns "^1.1.6"
1138 | 
1139 | path-parse@^1.0.7:
1140 |   version "1.0.7"
1141 |   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
1142 |   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
1143 | 
1144 | path-type@^4.0.0:
1145 |   version "4.0.0"
1146 |   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
1147 |   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
1148 | 
1149 | picocolors@^1.0.0:
1150 |   version "1.0.0"
1151 |   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
1152 |   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
1153 | 
1154 | picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.0, picomatch@^2.3.1:
1155 |   version "2.3.1"
1156 |   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
1157 |   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
1158 | 
1159 | pify@^2.3.0:
1160 |   version "2.3.0"
1161 |   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
1162 |   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
1163 | 
1164 | postcss-import@^14.1.0:
1165 |   version "14.1.0"
1166 |   resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
1167 |   integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
1168 |   dependencies:
1169 |     postcss-value-parser "^4.0.0"
1170 |     read-cache "^1.0.0"
1171 |     resolve "^1.1.7"
1172 | 
1173 | postcss-js@^4.0.0:
1174 |   version "4.0.0"
1175 |   resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz"
1176 |   integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
1177 |   dependencies:
1178 |     camelcase-css "^2.0.1"
1179 | 
1180 | postcss-load-config@^3.1.4:
1181 |   version "3.1.4"
1182 |   resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
1183 |   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
1184 |   dependencies:
1185 |     lilconfig "^2.0.5"
1186 |     yaml "^1.10.2"
1187 | 
1188 | postcss-nested@5.0.6:
1189 |   version "5.0.6"
1190 |   resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz"
1191 |   integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
1192 |   dependencies:
1193 |     postcss-selector-parser "^6.0.6"
1194 | 
1195 | postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
1196 |   version "6.0.10"
1197 |   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
1198 |   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
1199 |   dependencies:
1200 |     cssesc "^3.0.0"
1201 |     util-deprecate "^1.0.2"
1202 | 
1203 | postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0:
1204 |   version "4.2.0"
1205 |   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
1206 |   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
1207 | 
1208 | postcss@8.4.5:
1209 |   version "8.4.5"
1210 |   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz"
1211 |   integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
1212 |   dependencies:
1213 |     nanoid "^3.1.30"
1214 |     picocolors "^1.0.0"
1215 |     source-map-js "^1.0.1"
1216 | 
1217 | postcss@^8.4.14:
1218 |   version "8.4.14"
1219 |   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
1220 |   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
1221 |   dependencies:
1222 |     nanoid "^3.3.4"
1223 |     picocolors "^1.0.0"
1224 |     source-map-js "^1.0.2"
1225 | 
1226 | prop-types@^15.6.2, prop-types@^15.8.1:
1227 |   version "15.8.1"
1228 |   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
1229 |   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
1230 |   dependencies:
1231 |     loose-envify "^1.4.0"
1232 |     object-assign "^4.1.1"
1233 |     react-is "^16.13.1"
1234 | 
1235 | queue-microtask@^1.2.2:
1236 |   version "1.2.3"
1237 |   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
1238 |   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
1239 | 
1240 | quick-lru@^5.1.1:
1241 |   version "5.1.1"
1242 |   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
1243 |   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
1244 | 
1245 | react-dom@18.1.0:
1246 |   version "18.1.0"
1247 |   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz"
1248 |   integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
1249 |   dependencies:
1250 |     loose-envify "^1.1.0"
1251 |     scheduler "^0.22.0"
1252 | 
1253 | react-is@^16.13.1, react-is@^16.7.0:
1254 |   version "16.13.1"
1255 |   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
1256 |   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
1257 | 
1258 | react-is@^18.2.0:
1259 |   version "18.2.0"
1260 |   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
1261 |   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
1262 | 
1263 | react-loader-spinner@^5.1.7-beta.1:
1264 |   version "5.1.7-beta.1"
1265 |   resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-5.1.7-beta.1.tgz#db47a38a02bbc9316583d9a61938e09221e28674"
1266 |   integrity sha512-Lo5qVWUyhAMs92PffsJRwH6iqPTgBmC7pocFA8Z3fkxS8s9OVKTIKRMvgywQ+CAxEXN9H5AqziYS+8zT7yK3CQ==
1267 |   dependencies:
1268 |     styled-components "^5.3.5"
1269 |     styled-tools "^1.7.2"
1270 | 
1271 | react-loading@^2.0.3:
1272 |   version "2.0.3"
1273 |   resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-2.0.3.tgz#e8138fb0c3e4674e481b320802ac7048ae14ffb9"
1274 |   integrity sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A==
1275 | 
1276 | react-transition-group@^4.4.2:
1277 |   version "4.4.2"
1278 |   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
1279 |   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
1280 |   dependencies:
1281 |     "@babel/runtime" "^7.5.5"
1282 |     dom-helpers "^5.0.1"
1283 |     loose-envify "^1.4.0"
1284 |     prop-types "^15.6.2"
1285 | 
1286 | react@18.1.0:
1287 |   version "18.1.0"
1288 |   resolved "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
1289 |   integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
1290 |   dependencies:
1291 |     loose-envify "^1.1.0"
1292 | 
1293 | read-cache@^1.0.0:
1294 |   version "1.0.0"
1295 |   resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
1296 |   integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
1297 |   dependencies:
1298 |     pify "^2.3.0"
1299 | 
1300 | readdirp@~3.6.0:
1301 |   version "3.6.0"
1302 |   resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
1303 |   integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
1304 |   dependencies:
1305 |     picomatch "^2.2.1"
1306 | 
1307 | regenerator-runtime@^0.13.4:
1308 |   version "0.13.9"
1309 |   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
1310 |   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
1311 | 
1312 | resolve-from@^4.0.0:
1313 |   version "4.0.0"
1314 |   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
1315 |   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
1316 | 
1317 | resolve@^1.1.7, resolve@^1.12.0, resolve@^1.22.1:
1318 |   version "1.22.1"
1319 |   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
1320 |   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
1321 |   dependencies:
1322 |     is-core-module "^2.9.0"
1323 |     path-parse "^1.0.7"
1324 |     supports-preserve-symlinks-flag "^1.0.0"
1325 | 
1326 | reusify@^1.0.4:
1327 |   version "1.0.4"
1328 |   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
1329 |   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
1330 | 
1331 | run-parallel@^1.1.9:
1332 |   version "1.2.0"
1333 |   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
1334 |   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
1335 |   dependencies:
1336 |     queue-microtask "^1.2.2"
1337 | 
1338 | safe-buffer@~5.1.1:
1339 |   version "5.1.2"
1340 |   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
1341 |   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
1342 | 
1343 | scheduler@^0.22.0:
1344 |   version "0.22.0"
1345 |   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz"
1346 |   integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
1347 |   dependencies:
1348 |     loose-envify "^1.1.0"
1349 | 
1350 | shallowequal@^1.1.0:
1351 |   version "1.1.0"
1352 |   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
1353 |   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
1354 | 
1355 | source-map-js@^1.0.1, source-map-js@^1.0.2:
1356 |   version "1.0.2"
1357 |   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
1358 |   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
1359 | 
1360 | source-map@^0.5.7:
1361 |   version "0.5.7"
1362 |   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
1363 |   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
1364 | 
1365 | styled-components@^5.3.5:
1366 |   version "5.3.5"
1367 |   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
1368 |   integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
1369 |   dependencies:
1370 |     "@babel/helper-module-imports" "^7.0.0"
1371 |     "@babel/traverse" "^7.4.5"
1372 |     "@emotion/is-prop-valid" "^1.1.0"
1373 |     "@emotion/stylis" "^0.8.4"
1374 |     "@emotion/unitless" "^0.7.4"
1375 |     babel-plugin-styled-components ">= 1.12.0"
1376 |     css-to-react-native "^3.0.0"
1377 |     hoist-non-react-statics "^3.0.0"
1378 |     shallowequal "^1.1.0"
1379 |     supports-color "^5.5.0"
1380 | 
1381 | styled-jsx@5.0.2:
1382 |   version "5.0.2"
1383 |   resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz"
1384 |   integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
1385 | 
1386 | styled-tools@^1.7.2:
1387 |   version "1.7.2"
1388 |   resolved "https://registry.yarnpkg.com/styled-tools/-/styled-tools-1.7.2.tgz#a8f71198535cf785d7db0927cc1c1b88337c4440"
1389 |   integrity sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==
1390 | 
1391 | stylis@4.0.13:
1392 |   version "4.0.13"
1393 |   resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz"
1394 |   integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
1395 | 
1396 | supports-color@^5.3.0, supports-color@^5.5.0:
1397 |   version "5.5.0"
1398 |   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
1399 |   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
1400 |   dependencies:
1401 |     has-flag "^3.0.0"
1402 | 
1403 | supports-preserve-symlinks-flag@^1.0.0:
1404 |   version "1.0.0"
1405 |   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
1406 |   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
1407 | 
1408 | tailwind-scrollbar-hide@^1.1.7:
1409 |   version "1.1.7"
1410 |   resolved "https://registry.yarnpkg.com/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz#90b481fb2e204030e3919427416650c54f56f847"
1411 |   integrity sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==
1412 | 
1413 | tailwindcss@^3.1.2:
1414 |   version "3.1.6"
1415 |   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz"
1416 |   integrity sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==
1417 |   dependencies:
1418 |     arg "^5.0.2"
1419 |     chokidar "^3.5.3"
1420 |     color-name "^1.1.4"
1421 |     detective "^5.2.1"
1422 |     didyoumean "^1.2.2"
1423 |     dlv "^1.1.3"
1424 |     fast-glob "^3.2.11"
1425 |     glob-parent "^6.0.2"
1426 |     is-glob "^4.0.3"
1427 |     lilconfig "^2.0.5"
1428 |     normalize-path "^3.0.0"
1429 |     object-hash "^3.0.0"
1430 |     picocolors "^1.0.0"
1431 |     postcss "^8.4.14"
1432 |     postcss-import "^14.1.0"
1433 |     postcss-js "^4.0.0"
1434 |     postcss-load-config "^3.1.4"
1435 |     postcss-nested "5.0.6"
1436 |     postcss-selector-parser "^6.0.10"
1437 |     postcss-value-parser "^4.2.0"
1438 |     quick-lru "^5.1.1"
1439 |     resolve "^1.22.1"
1440 | 
1441 | to-fast-properties@^2.0.0:
1442 |   version "2.0.0"
1443 |   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
1444 |   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
1445 | 
1446 | to-regex-range@^5.0.1:
1447 |   version "5.0.1"
1448 |   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
1449 |   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
1450 |   dependencies:
1451 |     is-number "^7.0.0"
1452 | 
1453 | tslib@^2.4.0:
1454 |   version "2.4.0"
1455 |   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
1456 |   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
1457 | 
1458 | typescript@4.7.2:
1459 |   version "4.7.2"
1460 |   resolved "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz"
1461 |   integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
1462 | 
1463 | update-browserslist-db@^1.0.4:
1464 |   version "1.0.4"
1465 |   resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz"
1466 |   integrity sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==
1467 |   dependencies:
1468 |     escalade "^3.1.1"
1469 |     picocolors "^1.0.0"
1470 | 
1471 | use-sync-external-store@1.1.0:
1472 |   version "1.1.0"
1473 |   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz"
1474 |   integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
1475 | 
1476 | util-deprecate@^1.0.2:
1477 |   version "1.0.2"
1478 |   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
1479 |   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
1480 | 
1481 | xtend@^4.0.2:
1482 |   version "4.0.2"
1483 |   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
1484 |   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
1485 | 
1486 | yaml@^1.10.2, yaml@^1.7.2:
1487 |   version "1.10.2"
1488 |   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
1489 |   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
1490 | 


--------------------------------------------------------------------------------