diff --git a/package.json b/package.json index ab20b1c..00c931d 100644 --- a/package.json +++ b/package.json @@ -22,15 +22,18 @@ "@mui/material": "^5.6.4", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", + "chart.js": "^3.7.1", "eslint-plugin-react": "^7.29.4", "eslit": "^6.0.0", "next": "12.1.6", "react": "18.1.0", + "react-chartjs-2": "^4.1.0", "react-dom": "18.1.0", "react-icons": "^4.3.1", "styled-components": "^5.3.5" }, "devDependencies": { + "@types/chartjs": "^0.0.31", "@types/node": "^17.0.31", "@types/react": "^18.0.8", "@types/styled-components": "^5.1.25", diff --git a/pages/_app.tsx b/pages/_app.tsx index b81b5d2..edfa29c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,13 +1,18 @@ import React from 'react' -import '../styles/globals.css' +import '../styles/globals.ts' import { AppProps } from 'next/app' +import Sidebar from '../src/components/sidebar/Sidebar' +import { GlobalStyle } from '../styles/globals' +import { AppView } from '../styles/app/AppView' function MyApp({ Component, pageProps }: AppProps) { return ( - <> + + + - + ) } diff --git a/pages/_document.tsx b/pages/_document.tsx index bc5322b..a05c9c1 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -35,8 +35,11 @@ export default class MyDocument extends Document { - + + + +
diff --git a/pages/areaTest.tsx b/pages/areaTest.tsx new file mode 100644 index 0000000..03ffc5b --- /dev/null +++ b/pages/areaTest.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import BasicButton from '../src/components/buttons/basicButton/BasicButton' +import Graph from '../src/components/graph/Graph' + +export default function areaTest() { + return ( + // + + ) +} diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx new file mode 100644 index 0000000..7758e39 --- /dev/null +++ b/pages/dashboard.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import { DashboardView } from '../styles/layouts/Dashboard/DashboardView' +import MapCard from '../src/components/mapCard/MapCard' +import GraphCard from '../src/components/graph/graphCard/GraphCard' + +export default function Dashboard() { + return ( + +

Visão Geral

+ Bem Vindo a Smart Energia +
+ + + + + +
+ +
+ + + +
+ + ) +} diff --git a/pages/index.tsx b/pages/index.tsx index d7f0907..14bfc65 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -46,22 +46,20 @@ export default function Home() { return ( - - - +

Bem-Vindo

-

Estratégias Inteligentes em
Gestão de Energia

- - - Esqueceu a senha ? - +

Estratégias Inteligentes em Gestão de Energia

+ + + Esqueceu a senha ? + -
- Ou -
+
+ Ou +
-

+55(41) 3012-5900 +

+55(41) 3012-5900
www.energiasmart.com.br

diff --git a/public/assets/bannerTemplate.png b/public/assets/bannerTemplate.png new file mode 100644 index 0000000..c9b75c7 Binary files /dev/null and b/public/assets/bannerTemplate.png differ diff --git a/public/assets/hamburgerModal.svg b/public/assets/hamburgerModal.svg new file mode 100644 index 0000000..0027fb2 --- /dev/null +++ b/public/assets/hamburgerModal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/logo.svg b/public/assets/logo.svg new file mode 100644 index 0000000..2309ada --- /dev/null +++ b/public/assets/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/copel.svg b/public/copel.svg new file mode 100644 index 0000000..d95856e --- /dev/null +++ b/public/copel.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/graphLineIcon.svg b/public/graphLineIcon.svg new file mode 100644 index 0000000..25ecb93 --- /dev/null +++ b/public/graphLineIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/mapSample.svg b/public/mapSample.svg new file mode 100644 index 0000000..804924b --- /dev/null +++ b/public/mapSample.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/moneyIcon.svg b/public/moneyIcon.svg new file mode 100644 index 0000000..6ffff61 --- /dev/null +++ b/public/moneyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/txt.txt b/src/assets/txt.txt new file mode 100644 index 0000000..e69de29 diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx new file mode 100644 index 0000000..f97b093 --- /dev/null +++ b/src/components/banner/Banner.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import Image from 'next/image' + +import { BannerView } from './BannerView' + +interface BannerInterface { + title: string, + subtitle: string, + imgSource: string +} + +export default function Banner({ title, subtitle, imgSource }: BannerInterface) { + return ( + + {/* */} + +
+
+

{title}

+

{subtitle}

+
+ + ) +} diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts new file mode 100644 index 0000000..6054c72 --- /dev/null +++ b/src/components/banner/BannerView.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +export const BannerView = styled.div` + position: relative; + width: 100%; + height: 19rem; + + .gradient { + position: absolute; + width: 100%; + height: 19rem; + + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(7, 23, 100, 0.6); + opacity: 0.9; + + z-index: 1; + } + + .text { + position: relative; + margin: 82px 0 0 20px; + + font-family: 'Poppins'; + font-style: normal; + + color: white; + + z-index: 2; + } +` diff --git a/src/components/buttons/basicButton/BasicButton.tsx b/src/components/buttons/basicButton/BasicButton.tsx new file mode 100644 index 0000000..fd5f3b1 --- /dev/null +++ b/src/components/buttons/basicButton/BasicButton.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { BasicButtonView } from './BasicButtonView' + +interface BasicButtonInterface { + title: string +} + +export default function BasicButton({ title }: BasicButtonInterface) { + return ( + {title} + ) +} diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts new file mode 100644 index 0000000..5c66b88 --- /dev/null +++ b/src/components/buttons/basicButton/BasicButtonView.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components' + +export const BasicButtonView = styled.button` + display: flex; + justify-content: center; + align-items: center; + + width: 120px; + height: 45px; + + background: #254F7F; + border-radius: 8px; + border-style: none; + + font-family: 'Poppins'; + font-size: 16px; + /* identical to box height */ + + + color: #FFFFFF; +` diff --git a/src/components/buttons/loginButton/LoginButton.tsx b/src/components/buttons/loginButton/LoginButton.tsx new file mode 100644 index 0000000..37d374a --- /dev/null +++ b/src/components/buttons/loginButton/LoginButton.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { LoginButtonView } from './LoginButtonView' + +interface LoginButtonInterface { + title: string +} + +export default function LoginButton({ title }: LoginButtonInterface) { + return ( + + {title} + + ) +} diff --git a/src/components/buttons/loginButton/LoginButtonView.ts b/src/components/buttons/loginButton/LoginButtonView.ts new file mode 100644 index 0000000..337672b --- /dev/null +++ b/src/components/buttons/loginButton/LoginButtonView.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +export const LoginButtonView = styled.button` + width: 100%; + height: 95px; + + border-radius: 8px; + background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28); + + font-family: 'Nunito Sans'; + font-style: normal; + font-weight: 700; + font-size: 32px; + line-height: 44px; + text-align: center; + letter-spacing: 0.03em; + + color: #FFFFFF; +` diff --git a/src/components/graph/Graph.tsx b/src/components/graph/Graph.tsx new file mode 100644 index 0000000..16e0d45 --- /dev/null +++ b/src/components/graph/Graph.tsx @@ -0,0 +1,63 @@ +import React, { useState, useEffect } from 'react' + +import { Bar, Line } from 'react-chartjs-2'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend +} from 'chart.js' + +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend +) + +export default function Graph() { + + const [ graphData, setGraphData ] = useState({ + labels: [], + datasets: [], + }) + const [ graphOptions, setGraphOptions ] = useState({}) + + useEffect(() => { + setGraphData({ + labels: ['John', 'kevin', 'george', 'michael', 'oreo'], + datasets: [{ + label: "Whom'st let the dogsout", + data: [12, 55, 34, 120, 720], + borderColor: "rgb(53, 162, 235)", + backgroundColor: "rgb(53, 162, 235, 0.4)" + }] + }) + setGraphOptions({ + responsive: true, + plugins: { + legend: { + position: 'top' + }, + title: { + display: true, + text: "Whom'st let the dogsout" + } + } + }) + }, []) + + + return ( + + ) +} diff --git a/src/components/graph/graphCard/GraphCard.tsx b/src/components/graph/graphCard/GraphCard.tsx new file mode 100644 index 0000000..a1c7f4e --- /dev/null +++ b/src/components/graph/graphCard/GraphCard.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import Link from 'next/link'; + +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; + +import { GraphCardView } from './GraphCardView'; + +interface GraphCardInterface { + title: string, + subtitle: string, + consumption?: number, + className?: string +} + +export default function GraphCard({ title, subtitle, consumption, className }: GraphCardInterface) { + const [timeCourse, setTimeCourse] = React.useState('left'); + + const handleAlignment = ( + event: React.MouseEvent, + newAlignment: string | null, + ) => { + setTimeCourse(newAlignment); + }; + + return ( + +
+
+
+

{title}

+ {subtitle} +
+ + + Mensal + + + Semanal + + + Hoje + + +
+ { + consumption? + + : + <> + } +
+
+ + ) +} diff --git a/src/components/graph/graphCard/GraphCardView.ts b/src/components/graph/graphCard/GraphCardView.ts new file mode 100644 index 0000000..f6b5e03 --- /dev/null +++ b/src/components/graph/graphCard/GraphCardView.ts @@ -0,0 +1,108 @@ +import styled from 'styled-components'; + +export const GraphCardView = styled.article` + display: flex; + align-items: center; + justify-content: space-between; + + flex-direction: column; + + width: 100%; + /* max-width: ; */ + height: fit-content; + min-height: 34.5rem; + + background: #F8F8F8; + box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2) ; + border-radius: 20px; + + background-color: #FFFFFF; + + .graph { + width: 90%; + min-height: 300px; + + background-color: black; + + margin-bottom: 20px; + } + + a { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + + color: #2F4CDD; + } + + .statusDot { + max-width: 11px; + max-height: 11px; + min-width: 11px; + min-height: 11px; + + border-radius: 100%; + + background-color: #2BC155; + } + + .content { + width: 90%; + + margin-top: 20px; + } + + .header { + display: flex; + justify-content: space-between; + align-items: center; + + width: 100%; + } + + aside { + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + width: 100%; + height: 4rem; + + margin: 30px 0 30px 0; + + border-radius: 12px; + + padding: 0 12px 0 12px; + + background-color: #E9FFEF; + + div { + display: flex; + align-items: center; + justify-content: space-between; + width: 40%; + min-width: 50px; + } + + .info { + display: flex; + align-items: center; + justify-content: center; + + width: 87px; + height: 44px; + + border-radius: 12px; + + background-color: #2BC155; + color: white; + } + } + +` diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx new file mode 100644 index 0000000..f308a4a --- /dev/null +++ b/src/components/mapCard/MapCard.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Image from 'next/image' +import { MapCardView } from './style' + +interface MapCardInterface { + title: string, + subtitle: string, + statistic: string, + imgSource: string, +} + +export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) { + + return ( + + +
+

{title}

+ {subtitle} +
+ +

{statistic}

+
+
+ + ) +} diff --git a/src/components/mapCard/style.ts b/src/components/mapCard/style.ts new file mode 100644 index 0000000..f33a672 --- /dev/null +++ b/src/components/mapCard/style.ts @@ -0,0 +1,27 @@ +import styled from 'styled-components' + +export const MapCardView = styled.figure` + display: flex; + justify-content: center; + align-items: center; + + flex-direction: row; + + margin-right: 25px; + + span { + margin-bottom: 25px; + } + + div { + display: flex; + justify-content: center; + align-items: center; + + flex-direction: column; + + article { + display: flex; + } + } +` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx new file mode 100644 index 0000000..a632be8 --- /dev/null +++ b/src/components/sidebar/Sidebar.tsx @@ -0,0 +1,42 @@ +import Image from 'next/image' +import React, { useState } from 'react' +import { SidebarView } from './SidebarView' + +export default function Sidebar() { + const [ economiaDrawer, setEconomiaDrawer ] = useState(false) + + const [ viewModal, setViewModal ] = useState(false) + + return ( + +
setViewModal(!viewModal)} > + +
+
+ +
+
    +
  • {'Visão Geral'}
    • +
  • {'Consumo'}
    • +
  • {'Resumo de Op. >'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}
    • +
    +
  • Economia Bruta
    • +
  • Economia Acumulada
    • +
  • Custo Estimado
    • +
  • Custo R/MWh
    • +
    +
  • {'Notícias >'}
    • +
  • {'Info Setorial >'}
    • +
  • {'SAQ >'}
    • +
  • {'Sobre Nós >'}
    • +
  • {'Notificação >'}
    • +
  • {'Telemetria >'}
    • +
+ + + ) +} diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts new file mode 100644 index 0000000..31c5720 --- /dev/null +++ b/src/components/sidebar/SidebarView.ts @@ -0,0 +1,142 @@ +import styled from 'styled-components' + +interface SidebarViewInterface { + economiaDrawer: boolean | null, + modalOpen: boolean | null +} + +export const SidebarView = styled.nav` + position: relative; + + display: flex; + align-items: center; + justify-content: flex-start; + + flex-direction: column; + + width: 20%; + + margin: 0; + padding: 0; + + box-shadow: 18px 4px 35px rgba(0, 0, 0, 0.02); + + background-color: #FFFFFF; + + ul { + display: flex; + justify-content: center; + align-items: center; + + flex-direction: column; + + list-style: none; + + width: 100%; + + li { + display: flex; + align-items: center; + justify-content: flex-start; + + width: 100%; + height: 60px; + + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 27px; + /* identical to box height */ + + color: #969BA0; + + cursor: pointer; + } + + .economiaDrawer { + display: ${props => props.economiaDrawer? 'block' : 'none'}; + } + } + + aside { + display: flex; + justify-content: center; + align-items: center; + + flex-wrap: wrap; + + width: 90%; + height: 190px; + + background: linear-gradient(155.54deg, #254F7F 15.63%, #9C9C9C 136.34%); + border-radius: 26px; + + p { + text-align: center; + width: 80%; + + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 21px; + text-align: center; + + color: #FFFFFF; + } + + div { + display: flex; + justify-content: center; + align-items: center; + + width: 80%; + height: 60px; + + background: #FFFFFF; + border-radius: 8px; + } + } + + .drawer { + margin-left: 20px; + } + + .hamburger { + display: none; + } + + @media (max-width: 1196px) { + align-items: flex-start; + + width: 100%; + /* height: 0%; */ + /* height: ${props => props.modalOpen? '100%' : null}; */ + + padding: 18px; + + border-bottom: solid black 1px; + + z-index: 2; + + .hamburger { + display: flex; + + cursor: pointer; + + z-index: 2; + } + .imageNext { + display: none; + } + ul { + display: ${props => props.modalOpen? 'block' : 'none'}; + min-height: 100vh; + + background-color: #FFF; + } + aside { + display: none; + } + } +` diff --git a/src/components/txt.txt b/src/components/txt.txt new file mode 100644 index 0000000..e69de29 diff --git a/styles/app/AppView.ts b/styles/app/AppView.ts new file mode 100644 index 0000000..f20a055 --- /dev/null +++ b/styles/app/AppView.ts @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const AppView = styled.main` + display: flex; + + @media (max-width: 1196px) { + flex-direction: column; + } +` diff --git a/styles/globals.css b/styles/globals.css deleted file mode 100644 index e5e2dcc..0000000 --- a/styles/globals.css +++ /dev/null @@ -1,16 +0,0 @@ -html, -body { - padding: 0; - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -} - -a { - color: inherit; - text-decoration: none; -} - -* { - box-sizing: border-box; -} diff --git a/styles/globals.ts b/styles/globals.ts new file mode 100644 index 0000000..4b3e974 --- /dev/null +++ b/styles/globals.ts @@ -0,0 +1,28 @@ +import { createGlobalStyle } from 'styled-components' + +export const GlobalStyle = createGlobalStyle` + body { + margin: 0; + padding: 0; + font-family: 'Poppins'; + } + + a { + color: inherit; + text-decoration: none; + } + + * { + box-sizing: border-box; + } +`; + +// html, +// body { +// padding: 0; +// margin: 0; +// font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, +// Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +// } + + diff --git a/styles/layouts/Dashboard/DashboardView.ts b/styles/layouts/Dashboard/DashboardView.ts index e69de29..28837b2 100644 --- a/styles/layouts/Dashboard/DashboardView.ts +++ b/styles/layouts/Dashboard/DashboardView.ts @@ -0,0 +1,114 @@ +import styled from 'styled-components' + +export const DashboardView = styled.main` + * { + margin: 0; + padding: 0; + } + + display: flex; + justify-content: center; + align-items: flex-start; + + flex-wrap: wrap; + + flex-direction: column; + + width: 100%; + + padding: 30px; + + span { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + } + + h4 { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-size: 21px; + line-height: 32px; + } + + h1 { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-size: 28px; + line-height: 42px; + } + + p { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + .cardsSection { + display: flex; + justify-content: space-evenly; + align-items: center; + + flex-wrap: wrap; + + box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1); + border-radius: 10px; + + width: 100%; + height: fit-content; + + margin: 2rem 0 2rem 0; + } + + .dashboard { + display: grid; + + grid-template-columns: 50% 50% 100%; + grid-template-rows: 50% 50%; + + gap: 30px; + + width: 99%; + + padding-right: 20px; + + .footerGraph { + grid-row-start: 2; + + grid-column-start: 1; + grid-column-end: 3; + } + } + + @media (max-width: 1195px) { + /* align-items: center; */ + width: 100%; + padding: 30px; + margin: 0; + + .dashboard { + display: flex; + + padding: 0; + margin: 0; + + justify-content: center; + align-items: center; + + flex-wrap: wrap; + + grid-template-columns: 50% 50%; + + grid-auto-rows: 1; + grid-auto-columns: 1; + + width: 100%; + } + } +` diff --git a/yarn.lock b/yarn.lock index bf36460..6e9008c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -575,6 +575,11 @@ resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0" integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw== +"@types/chartjs@^0.0.31": + version "0.0.31" + resolved "https://registry.yarnpkg.com/@types/chartjs/-/chartjs-0.0.31.tgz#b16a687eaad3ea3e5cd3e961aee5a28e47b57949" + integrity sha512-eF1AgrIO0qP9KJYwM2dTKL2pczTjiLa0hfmZdQfKiqFq5WIvFTKPn1gkgADitF5sT4byEyq4EFdMVvuPIk6zeQ== + "@types/hoist-non-react-statics@*": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" @@ -954,6 +959,11 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chart.js@^3.7.1: + version "3.7.1" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada" + integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA== + clean-stack@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" @@ -2352,6 +2362,11 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== +react-chartjs-2@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d" + integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g== + react-dom@18.1.0: version "18.1.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"