diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..854cb73a --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": [["styled-components", { "ssr": true }]] +} diff --git a/components/Card/index.js b/components/Card/index.js new file mode 100644 index 00000000..7ae03c65 --- /dev/null +++ b/components/Card/index.js @@ -0,0 +1,55 @@ +import { useState } from 'react'; +import useDownloader from 'react-use-downloader'; +import Link from 'next/link'; +import { DownloadIcon } from '../Icons'; + +import { + Container, + CardBox, + Img, + CardOverlay, + DownloadBtn, + DownloadBtnMobile, +} from './styles'; + +export function Card(props) { + const [isHovering, setIsHovering] = useState(false); + const { download } = useDownloader(); + + const fileUrl = props.fileUrl; + const fileName = props.fileName; + + const handleMouseOver = () => { + setIsHovering(true); + }; + + const handleMouseOut = () => { + setIsHovering(false); + }; + + const handleDownload = () => { + download(fileUrl, fileName); + }; + + return ( + + + + {props.alt} + + {isHovering && ( + +

{props.author}

+ + + + + )} + + + + + + + ); +} diff --git a/components/Card/styles.js b/components/Card/styles.js new file mode 100644 index 00000000..147dc0ee --- /dev/null +++ b/components/Card/styles.js @@ -0,0 +1,88 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + margin-top: 0.5rem; + position: relative; +`; + +export const Img = styled.img` + width: 100%; + height: 100%; + object-fit: cover; +`; + +export const CardBox = styled.div` + height: 100%; + background-color: ${(props) => props.theme.colors.background}; + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + cursor: pointer; +`; + +export const CardOverlay = styled.div` + display: flex; + justify-content: space-between; + align-content: center; + align-items: flex-end; + padding: 0 0.5rem 0.5rem; + + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.25), + transparent 35%, + transparent 65%, + rgba(0, 0, 0, 0.25) + ); + + height: 100%; + width: 100%; + + position: absolute; + bottom: 0; + + color: ${(props) => props.theme.colors.text_overlay}; + + h1 { + font-size: ${(props) => props.theme.font_size.sm}; + } + svg { + height: 1.3rem; + } +`; + +export const DownloadBtn = styled.button` + display: flex; + justify-content: end; + + border: none; + background: transparent; + color: ${(props) => props.theme.colors.text_overlay}; + text-decoration: none; + cursor: pointer; +`; + +export const DownloadBtnMobile = styled.button` + display: flex; + padding: 0 0.5rem 0.5rem; + + position: absolute; + bottom: 0; + right: 0; + + border: none; + background: transparent; + color: ${(props) => props.theme.colors.text_overlay}; + text-decoration: none; + cursor: pointer; + + svg { + height: 1.3rem; + opacity: 95%; + } + + @media (min-width: 1100px) { + svg { + display: none; + } + } +`; diff --git a/components/Dropdown/index.js b/components/Dropdown/index.js new file mode 100644 index 00000000..29ed1b58 --- /dev/null +++ b/components/Dropdown/index.js @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; + +import { ChevronDown } from '../Icons'; + +import { + Main, + DropDownContainer, + DropDownHeader, + Title, + DropDownListContainer, + DropDownList, + Button, + ListItem, +} from './styles'; + +export default function Dropdown(props) { + return ( +
+ + + Filter + + + {props.isOpen && ( + + + + + + + + + + + + + + + + + )} + +
+ ); +} diff --git a/components/Dropdown/styles.js b/components/Dropdown/styles.js new file mode 100644 index 00000000..e6528471 --- /dev/null +++ b/components/Dropdown/styles.js @@ -0,0 +1,98 @@ +import styled from 'styled-components'; + +export const Main = styled.div` + font-family: sans-serif; + background: ${(props) => props.theme.colors.background}; + color: ${(props) => props.theme.colors.text}; + + margin-top: 1rem; + + display: flex; + justify-content: flex-end; + align-items: center; + cursor: pointer; + + position: relative; +`; + +export const DropDownContainer = styled.div` + width: 7rem; + margin: 0 auto; +`; + +export const DropDownHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; + padding: 0.5rem; + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + font-weight: ${(props) => props.theme.font_weight.bold}; + font-size: ${(props) => props.theme.font_size.sm}; + + border-radius: 5px; + + @media (min-width: 1100px) { + margin: 0.5rem 1rem 0 0; + } +`; + +export const Title = styled.span``; + +export const DropDownListContainer = styled.div` + width: 30%; +`; + +export const DropDownList = styled.ul` + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + + border-radius: 5px; + position: absolute; + z-index: 1; + + right: 0; + width: 13rem; + + background: #ffffff; + border: 2px solid #e5e5e5; + box-sizing: border-box; + font-size: 1.3rem; + font-weight: 500; + + @media (min-width: 1100px) { + margin: 0.5rem 1rem 0; + } +`; + +export const ListItem = styled.li` + list-style: none; + border-bottom: 1px solid ${(props) => props.theme.colors.caption_400}; + &:last-child { + border: none; + } +`; + +export const Button = styled.button` + display: flex; + + font-size: ${(props) => props.theme.font_size.xsm}; + font-weight: ${(props) => props.theme.font_weight.black}; + background-color: ${(props) => props.theme.colors.background}; + color: ${(props) => props.theme.colors.text}; + border: none; + outline: none; + + width: 100%; + + padding: 1rem 0.5rem; + + cursor: pointer; + + &:focus, + &:active, + &:hover { + background-color: ${(props) => props.theme.colors.background_700}; + } +`; diff --git a/components/Form/index.js b/components/Form/index.js new file mode 100644 index 00000000..af3e16db --- /dev/null +++ b/components/Form/index.js @@ -0,0 +1,48 @@ +import { Card } from '../Card/index'; +import { SearchIcon } from '../Icons'; + +import { + Container, + FormContainer, + Form, + Input, + Button, + ContainerResults, + Section, + T, +} from './styles'; + +export default function SearchBar(props) { + return ( + + +
+ + +
+ + +
+ {props.photoData.map((photo) => ( + + ))} +
+ + + ); +} diff --git a/components/Form/styles.js b/components/Form/styles.js new file mode 100644 index 00000000..fa21935d --- /dev/null +++ b/components/Form/styles.js @@ -0,0 +1,70 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 0.6rem 3rem; +`; + +export const FormContainer = styled.div` + width: 95%; +`; +export const Form = styled.form` + display: flex; + justify-content: center; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.3); + width: 100%; + box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.11); +`; + +export const Input = styled.input` + background-color: ${(props) => props.theme.colors.background}; + color: ${(props) => props.theme.colors.text}; + border: none; + padding: 0.6rem; + width: 100%; + outline: none; + + &:focus, + &:active { + box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.15); + outline: none; + } +`; + +export const Button = styled.button` + border: none; + outline: none; + background-color: transparent; + color: ${(props) => props.theme.colors.caption_400}; + + svg { + margin-right: 0.5rem; + } +`; + +export const ContainerResults = styled.div` + width: 100%; + padding: 0.6rem; + justify-content: center; + + img { + height: 100%; + width: 100%; + object-fit: cover; + } +`; + +export const Section = styled.section` + display: grid; + justify-content: center; + + gap: 0.6rem; + + @media (min-width: 1100px) { + grid-template-columns: 23% 23% 23% 23%; + } +`; diff --git a/components/Header/index.js b/components/Header/index.js new file mode 100644 index 00000000..b1164b24 --- /dev/null +++ b/components/Header/index.js @@ -0,0 +1,18 @@ +import Link from 'next/link'; +import { Container, DesktopNavBar, MobileNavBar } from './styles'; +import Navbar from '../Navbar'; + +export function Header(props) { + return ( + + + Home + Photos + Search + + + + + + ); +} diff --git a/components/Header/styles.js b/components/Header/styles.js new file mode 100644 index 00000000..26429466 --- /dev/null +++ b/components/Header/styles.js @@ -0,0 +1,42 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + background-color: ${(props) => props.theme.colors.background_800}; + color: ${(props) => props.theme.colors.text}; + height: 5rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 1rem; +`; + +export const DesktopNavBar = styled.div` + a { + text-decoration: none; + color: ${(props) => props.theme.colors.text}; + font-size: ${(props) => props.theme.font_size.md}; + font-weight: ${(props) => props.theme.font_weight.bold}; + border-bottom: 1px transparent; + gap: 1rem; + padding: 0.3rem 1rem; + + transition: 0.3s; + + &:hover, + &:active, + &:focus { + color: ${(props) => props.theme.colors.caption_600}; + border-bottom: 1px solid ${(props) => props.theme.colors.caption_600}; + } + } + + @media (max-width: 1100px) { + display: none; + } +`; + +export const MobileNavBar = styled.div` + @media (min-width: 1100px) { + display: none; + } +`; diff --git a/components/Icons/index.js b/components/Icons/index.js new file mode 100644 index 00000000..b30b83ea --- /dev/null +++ b/components/Icons/index.js @@ -0,0 +1,36 @@ +import { + faBars, + faChevronDown, + faDownload, + faMagnifyingGlass, + faMoon, + faSun, + faXmark, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +export function DownloadIcon() { + return ; +} + +export function MenuIcon() { + return ; +} + +export function CloseIcon() { + return ; +} +export function MoonIcon() { + return ; +} + +export function SunIcon() { + return ; +} +export function SearchIcon() { + return ; +} + +export function ChevronDown() { + return ; +} diff --git a/components/MainContainer/index.js b/components/MainContainer/index.js new file mode 100644 index 00000000..3eb8a0f2 --- /dev/null +++ b/components/MainContainer/index.js @@ -0,0 +1,12 @@ +import { Header } from '../Header'; + +import { Container } from './styles'; + +export function MainContainer(props) { + return ( + +
+
{props.children}
+ + ); +} diff --git a/components/MainContainer/styles.js b/components/MainContainer/styles.js new file mode 100644 index 00000000..7ffdaa66 --- /dev/null +++ b/components/MainContainer/styles.js @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + color: ${(props) => props.theme.colors.text}; +`; diff --git a/components/Navbar/index.js b/components/Navbar/index.js new file mode 100644 index 00000000..f810e409 --- /dev/null +++ b/components/Navbar/index.js @@ -0,0 +1,82 @@ +import { useState, useRef, useContext } from 'react'; +import { ThemeContext } from 'styled-components'; + +import Link from 'next/link'; +import Switch from 'react-switch'; + +import { + Button, + Nav, + Container, + StyledNavLink, + NavHeader, + NavContent, + NavFooter, + ThemeSwitcherContainer, +} from './styles'; + +import { MenuIcon, CloseIcon, MoonIcon, SunIcon } from '../Icons/index'; + +export default function Navbar(props) { + const [isActive, setIsActive] = useState(false); + + const { colors, title } = useContext(ThemeContext); + + const dropDownRef = useRef(null); + + const onClick = () => setIsActive(!isActive); + + return ( + + + + {isActive && } + + + ); +} diff --git a/components/Navbar/styles.js b/components/Navbar/styles.js new file mode 100644 index 00000000..ed6b8e9b --- /dev/null +++ b/components/Navbar/styles.js @@ -0,0 +1,114 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + @media (min-width: 1100px) { + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + gap: 1rem; + + a { + transition: 0.2s; + cursor: pointer; + border-bottom: 2px solid transparent; + + &:hover { + color: ${(props) => props.theme.colors.caption_400}; + } + } + } +`; + +export const Button = styled.button` + background-color: transparent; + /* font-family: ${(props) => props.theme.font_family.inter}; */ + color: ${(props) => props.theme.colors.text}; + border: none; + + cursor: pointer; + width: 4rem; +`; + +export const StyledNavLink = styled.div` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: ${(props) => props.theme.colors.overlay}; + z-index: 1; +`; + +export const Nav = styled.nav` + background-color: ${(props) => props.theme.colors.background_800}; + color: ${(props) => props.theme.colors.text}; + position: fixed; + top: 0; + height: 100%; + width: 70%; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; + z-index: 1; + + button, + a { + color: ${(props) => props.theme.colors.text}; + font-size: ${(props) => props.theme.font_size.sm}; + font-weight: ${(props) => props.theme.font_weight.black}; + text-decoration: none; + border-bottom: 2px solid ${(props) => props.theme.colors.caption_400}; + width: 100%; + padding: 0.5rem; + } + + @media (min-width: 1100px) { + width: 25%; + } +`; + +export const NavHeader = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + border-bottom: 2px solid ${(props) => props.theme.colors.caption_400}; + + button { + width: fit-content; + border: none; + } +`; + +export const NavContent = styled.div` + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; + width: 100%; + border-bottom: 2px solid transparent; + + &:hover { + color: ${(props) => props.theme.colors.caption_400}; + } +`; + +export const NavFooter = styled.div` + display: flex; + justify-content: space-between; + align-items: flex-end; + width: 100%; + height: 100vh; + padding: 0 0.3rem 1.3rem; +`; + +export const ThemeSwitcherContainer = styled.div` + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 1rem; + padding: 0.5rem; +`; diff --git a/next.config.js b/next.config.js index ae887958..59bd0ae1 100644 --- a/next.config.js +++ b/next.config.js @@ -2,6 +2,7 @@ const nextConfig = { reactStrictMode: true, swcMinify: true, -} + styledComponents: true, +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package.json b/package.json index d6d970b0..40de2697 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,21 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/react-fontawesome": "^0.2.0", + "babel-plugin-styled-components": "^2.0.7", "next": "13.0.6", + "pexels": "^1.4.0", + "polished": "^4.2.2", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-switch": "^7.0.0", + "react-use-downloader": "^1.2.1", + "styled-components": "^5.3.6" }, "devDependencies": { + "babel-plugin-styled-components": "^2.0.7", "eslint": "8.29.0", "eslint-config-next": "13.0.6" } diff --git a/pages/_app.js b/pages/_app.js index 23d1ca6c..9d546c36 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,6 +1,27 @@ +import { ThemeProvider } from 'styled-components'; +import { MainContainer } from '../components/MainContainer'; +import GlobalStyle from '../styles/global'; + +import dark from '../styles/themes/dark'; +import light from '../styles/themes/light'; + +import usePersistedState from '../utils/usePersistedState'; function MyApp({ Component, pageProps }) { - return + const [theme, setTheme] = usePersistedState('theme', light); + + const toggleTheme = () => { + setTheme(theme.title === 'light' ? dark : light); + }; + + return ( + + + + + + + ); } -export default MyApp +export default MyApp; diff --git a/pages/index.js b/pages/index.js index f80b4ce2..f42927cf 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,31 @@ +import Head from 'next/head'; +import Link from 'next/link'; + +import { + Container, + TitleContainer, + Title, + Description, + ButtonContainer, + Button, +} from '../styles/home'; export default function Home() { return ( -
-

Hello, World!

-
- ) + + + Home + + + + The best stock photos for yout to download. + Royalty free images shared by creators. + + + + + + + + ); } diff --git a/pages/photos/index.js b/pages/photos/index.js new file mode 100644 index 00000000..e1f7cf64 --- /dev/null +++ b/pages/photos/index.js @@ -0,0 +1,126 @@ +import Head from 'next/head'; + +import { useState } from 'react'; + +import { Card } from '../../components/Card'; + +import { API_KEY } from '../../services/api'; + +import { + PhotoContainer, + DropdownContainer, + MainContent, + PageSelector, + PageCounter, + SelectPage, +} from '../../styles/photos'; + +import Dropdown from '../../components/Dropdown'; + +export async function getStaticProps() { + const response = await fetch( + 'https://api.pexels.com/v1/curated?page=1&per_page=15', + { + headers: { + Authorization: API_KEY, + }, + } + ); + + const data = await response.json(); + + return { + props: { data }, + }; +} + +export default function Photos({ data }) { + const [photoData, setPhotoData] = useState(data); + const [isOpen, setIsOpen] = useState(false); + + const toggling = () => setIsOpen(!isOpen); + + const onClick = async (e) => { + const searchKey = e.target.value; + console.log(e.target.value); + + const response = await fetch( + `https://api.pexels.com/v1/search?query=${searchKey}?page=${photoData.page}per_page=15`, + { + headers: { + Authorization: API_KEY, + }, + } + ); + const data = await response.json(); + setPhotoData(data); + console.log(data); + + toggling(); + }; + + const handleNextPage = async () => { + const response = await fetch(`${photoData.next_page}`, { + headers: { + Authorization: API_KEY, + }, + }); + const data = await response.json(); + setPhotoData(data); + window.scrollTo(0, 0); + }; + + const handlePrevPage = async () => { + const response = await fetch(`${photoData.prev_page}`, { + headers: { + Authorization: API_KEY, + }, + }); + const data = await response.json(); + setPhotoData(data); + window.scrollTo(0, 0); + }; + + return ( + <> + + Photos + + + + + + + {photoData.photos.map((photo) => ( + + ))} + + + + {photoData.page === 1 ? ( + + {'<'} + + ) : ( + + {'<'} + + )} + + {`You are on the page: ${photoData.page}`} + + + {'>'} + + + + ); +} diff --git a/pages/photos/photo/[photoId].js b/pages/photos/photo/[photoId].js new file mode 100644 index 00000000..fc51e21a --- /dev/null +++ b/pages/photos/photo/[photoId].js @@ -0,0 +1,145 @@ +import Head from 'next/head'; +import Link from 'next/link'; +import { useState } from 'react'; +import useDownloader from 'react-use-downloader'; +import { ChevronDown } from '../../../components/Icons'; +import { API_KEY } from '../../../services/api'; +import { capitalizeFirstLowercaseRest } from '../../../utils/capitalizeFirstLowercaseRest'; +import { + Container, + Header, + ArtistInfo, + InfoPhoto, + Download, + ButtonDownload, + DropDownListContainer, + DropDownList, + Button, + ListItem, + Content, + ImgContainer, + Img, + Details, + InfoTitle, + Info, + AvgColor, +} from '../../../styles/photoId'; + +export async function getServerSideProps(context) { + const { photoId } = context.query; + + const data = await fetch(`https://api.pexels.com/v1/photos/${photoId}`, { + headers: { + Authorization: API_KEY, + }, + }); + + const photo = await data.json(); + + return { + props: { photo: photo.status !== 404 ? photo : null }, + }; +} + +export default function Photo(context) { + const [isOpen, setIsOpen] = useState(false); + const { download } = useDownloader(); + + const { photo } = context; + + const toggling = () => setIsOpen(!isOpen); + + const fileName = `${photo.id}.jpg`; + + return ( + + + Photo - {photo.id} + + +
+ + {photo.photographer} + {capitalizeFirstLowercaseRest(photo.alt)} + + + + + Download image + + + {isOpen && ( + + + + + + + + + + + + + + + + + )} + +
+ + {photo.alt} + + +

Photo details

+
+
+ Dimensions + + {photo.width} x {photo.height} + +
+
+ Average color + + + {photo.avg_color}{' '} +
+ + +
+
+ + + + ); +} diff --git a/pages/search/index.js b/pages/search/index.js new file mode 100644 index 00000000..c2fa6243 --- /dev/null +++ b/pages/search/index.js @@ -0,0 +1,47 @@ +import Head from 'next/head'; +import { useState } from 'react'; +import { API_KEY } from '../../services/api'; +import SearchBar from '../../components/Form'; + +export default function Search() { + const [photoData, setPhotoData] = useState([]); + const [photoID, setPhotoId] = useState(); + const [searchKey, setSearchKey] = useState(''); + + const onChange = (event) => { + setSearchKey(event.target.value); + }; + + const search = async (event) => { + event.preventDefault(); + + const response = await fetch( + `https://api.pexels.com/v1/search?query=${searchKey}`, + { + headers: { + Authorization: API_KEY, + }, + } + ); + const data = await response.json(); + const searchResult = data.photos; + setPhotoData(searchResult); + photoData.map((response) => { + return setPhotoId(response.id); + }); + }; + + return ( +
+ + Search + + +
+ ); +} diff --git a/services/api.js b/services/api.js new file mode 100644 index 00000000..990c7489 --- /dev/null +++ b/services/api.js @@ -0,0 +1,2 @@ +export const API_KEY = + '563492ad6f91700001000001e4dde2d285cb44359b6bf26fb170fe52'; diff --git a/styles/global.js b/styles/global.js new file mode 100644 index 00000000..7ca68e2c --- /dev/null +++ b/styles/global.js @@ -0,0 +1,16 @@ +import { createGlobalStyle } from 'styled-components'; + +export default createGlobalStyle` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + background: ${(props) => props.theme.colors.background}; + font-size: 14px; + color: #333; + font-family: sans-serif; + } +`; diff --git a/styles/home.js b/styles/home.js new file mode 100644 index 00000000..baab2b77 --- /dev/null +++ b/styles/home.js @@ -0,0 +1,77 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + align-content: center; + + flex-direction: column; + + height: 95vh; + padding: 0 1rem; + gap: 0.5rem; + + position: relative; +`; + +export const TitleContainer = styled.div` + display: flex; + justify-content: flex-start; + + flex-direction: column; +`; + +export const Title = styled.h1` + font-size: ${(props) => props.theme.font_size.lg}; + font-weight: ${(props) => props.theme.font_weight.black}; + + @media (min-width: 1100px) { + font-size: ${(props) => props.theme.font_size.xlg}; + } +`; +export const Description = styled.span` + font-size: ${(props) => props.theme.font_size.sm}; + color: ${(props) => props.theme.colors.caption_400}; + margin-top: 1rem; + font-weight: ${(props) => props.theme.font_weight.bold}; + + @media (min-width: 1100px) { + font-size: ${(props) => props.theme.font_size.md}; + } +`; + +export const ButtonContainer = styled.div` + margin-top: 1rem; +`; + +export const Button = styled.button` + padding: 0.8rem 2.5rem; + + text-decoration: none; + background-color: ${(props) => props.theme.colors.text}; + border: 1px solid ${(props) => props.theme.colors.text}; + + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + + border-radius: 10px; + outline: none; + + color: ${(props) => props.theme.colors.background}; + font-size: ${(props) => props.theme.font_size.md}; + cursor: pointer; + + transition: 0.3s; + + &:hover, + &:active, + &:focus { + background-color: ${(props) => props.theme.colors.background}; + color: ${(props) => props.theme.colors.text}; + } + + @media (min-width: 1100px) { + padding: 1rem 3rem; + } +`; diff --git a/styles/photoId.js b/styles/photoId.js new file mode 100644 index 00000000..6a27b566 --- /dev/null +++ b/styles/photoId.js @@ -0,0 +1,206 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + padding: 0 0 3rem; +`; + +export const Content = styled.div` + width: 90%; + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + margin: 1rem 0 0; + padding: 1rem; +`; + +export const Header = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + + flex-direction: row; +`; + +export const ArtistInfo = styled.div` + display: flex; + align-items: flex-start; + flex-direction: column; + width: 15%; + + a { + text-decoration: none; + color: ${(props) => props.theme.colors.text}; + border-bottom: 1px solid ${(props) => props.theme.colors.caption_400}; + font-size: ${(props) => props.theme.font_size.md}; + font-weight: ${(props) => props.theme.font_weight.black}; + padding: 0 0 0.3rem; + width: 100%; + } + + span { + margin: 0.3rem 0 0 0; + } +`; + +export const Download = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + span { + margin: 0; + } +`; + +export const ButtonDownload = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; + padding: 0.5rem; + + box-shadow: 0px 2px 2px 0px hsl(0deg 0% 0% / 14%), + 0px 1px 1px -2px hsl(0deg 0% 0% / 12%), 0px 1px 5px 0px hsl(0deg 0% 0% / 5%); + font-weight: ${(props) => props.theme.font_weight.bold}; + font-size: ${(props) => props.theme.font_size.sm}; + + border-radius: 5px; + cursor: pointer; +`; + +export const DropDownListContainer = styled.div` + width: 30%; +`; + +export const DropDownList = styled.div` + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + + border-radius: 5px; + position: absolute; + z-index: 1; + margin-right: 2.5rem; + + right: 0; + width: 13rem; + box-sizing: border-box; + font-size: 1.3rem; + font-weight: 500; +`; + +export const Button = styled.div` + display: flex; + + font-size: ${(props) => props.theme.font_size.xsm}; + font-weight: ${(props) => props.theme.font_weight.black}; + background-color: ${(props) => props.theme.colors.background}; + color: ${(props) => props.theme.colors.text}; + border: none; + outline: none; + + width: 100%; + + padding: 1rem 0.5rem; + + cursor: pointer; + + &:focus, + &:active, + &:hover { + background-color: ${(props) => props.theme.colors.background_700}; + } +`; + +export const ListItem = styled.div` + list-style: none; + border-bottom: 1px solid ${(props) => props.theme.colors.caption_400}; + &:last-child { + border: none; + } +`; + +export const ImgContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + + border-bottom: 1px solid ${(props) => props.theme.colors.caption_400}; + width: 100%; +`; + +export const Img = styled.img` + width: 100%; + margin: 1rem 0; + padding: 0 0 1rem; + + @media (min-width: 1100px) { + width: 45%; + } +`; + +export const InfoPhoto = styled.div` + margin: 1rem 0; + h1 { + font-size: ${(props) => props.theme.font_size.md}; + font-weight: ${(props) => props.theme.font_weight.black}; + margin: 0 0 1rem; + + @media (min-width: 1100px) { + font-size: ${(props) => props.theme.font_size.lg}; + font-weight: ${(props) => props.theme.font_weight.bold}; + } + } +`; + +export const Details = styled.div` + display: grid; + grid-template-columns: 50% 50%; + + div { + @media (min-width: 1100px) { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + } +`; + +export const InfoTitle = styled.div` + font-size: ${(props) => props.theme.font_size.sm}; + font-weight: ${(props) => props.theme.font_weight.regular}; + margin-bottom: 0.2rem; + + @media (min-width: 1100px) { + font-size: ${(props) => props.theme.font_size.md}; + } +`; + +export const Info = styled.span` + font-size: ${(props) => props.theme.font_size.sm}; + font-weight: ${(props) => props.theme.font_weight.semi_bold}; + margin-bottom: 1rem; + + @media (min-width: 1100px) { + font-size: ${(props) => props.theme.font_size.md}; + } +`; + +export const AvgColor = styled.div` + display: flex; + align-items: center; + + div { + margin-left: 0.5rem; + height: 0.8rem; + width: 0.8rem; + border: 1px solid ${(props) => props.theme.colors.text}; + } + @media (min-width: 1100px) { + flex-direction: row !important; + } +`; diff --git a/styles/photos.js b/styles/photos.js new file mode 100644 index 00000000..c8083030 --- /dev/null +++ b/styles/photos.js @@ -0,0 +1,72 @@ +import styled from 'styled-components'; + +export const PhotoContainer = styled.div` + color: ${(props) => props.theme.colors.text}; +`; + +export const DropdownContainer = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + padding: 0 1rem; + + @media (min-width: 1100px) { + padding: 0 1.4rem; + } + + @media (min-width: 1800px) { + padding: 0 2.9rem; + } +`; + +export const MainContent = styled.div` + display: grid; + grid-template-columns: 45% 45%; + justify-content: center; + + gap: 0.6rem; + + @media (min-width: 1100px) { + grid-template-columns: 23% 23% 23% 23%; + } +`; + +export const PageSelector = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + + padding: 1rem 2rem 2rem; + + @media (min-width: 1100px) { + padding: 1rem 15rem 2rem; + } +`; + +export const PageCounter = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + font-size: ${(props) => props.theme.font_size.sm}; + font-weight: ${(props) => props.theme.font_weight.regular}; +`; + +export const SelectPage = styled.button` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; + padding: 0.5rem 1rem; + box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), + 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2); + font-weight: ${(props) => props.theme.font_weight.bold}; + font-size: ${(props) => props.theme.font_size.sm}; + + border: none; + outline: none; + border-radius: 5px; + cursor: pointer; +`; diff --git a/styles/themes/dark.js b/styles/themes/dark.js new file mode 100644 index 00000000..03da1408 --- /dev/null +++ b/styles/themes/dark.js @@ -0,0 +1,35 @@ +export default { + title: 'dark', + + colors: { + background: '#333', + background_700: '#404040', + background_800: '#252525', + + text: '#F5F5F5', + text_overlay: '#F5F5F5', + overlay: 'rgba(0,0,0,0.9)', + + caption_400: '#a1a1aa', + caption_600: '#a1a1aa', + }, + + font_family: { + inter: 'inter, sans-serif', + }, + + font_weight: { + regular: 400, + semi_bold: 600, + bold: 700, + black: 900, + }, + + font_size: { + xsm: '.8rem', + sm: '1rem', + md: '1.3rem', + lg: '1.9rem', + xlg: '3rem', + }, +}; diff --git a/styles/themes/light.js b/styles/themes/light.js new file mode 100644 index 00000000..c5fb81a1 --- /dev/null +++ b/styles/themes/light.js @@ -0,0 +1,35 @@ +export default { + title: 'light', + + colors: { + background: '#F5F5F5', + background_700: '#E1E1E1', + background_800: '#d4d4d8', + + text: '#333', + text_overlay: '#F5F5F5', + overlay: 'rgba(0,0,0,0.9)', + + caption_400: '#a1a1aa', + caption_600: '#6c6c70', + }, + + font_family: { + inter: 'inter, sans-serif', + }, + + font_weight: { + regular: 400, + semi_bold: 600, + bold: 700, + black: 900, + }, + + font_size: { + xsm: '0.8rem', + sm: '1rem', + md: '1.3rem', + lg: '1.9rem', + xlg: '3rem', + }, +}; diff --git a/utils/capitalizeFirstLowercaseRest.js b/utils/capitalizeFirstLowercaseRest.js new file mode 100644 index 00000000..be86ac3b --- /dev/null +++ b/utils/capitalizeFirstLowercaseRest.js @@ -0,0 +1,3 @@ +export const capitalizeFirstLowercaseRest = (str) => { + return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); +}; diff --git a/utils/usePersistedState.js b/utils/usePersistedState.js new file mode 100644 index 00000000..89aecb5f --- /dev/null +++ b/utils/usePersistedState.js @@ -0,0 +1,25 @@ +import { useState, useEffect } from 'react'; + +function usePersistedState(key, initialState) { + const [storageValue, setStorageValue] = useState(); + + const [state, setState] = useState(() => { + if (typeof window !== 'undefined') { + setStorageValue(window.localStorage.getItem(key)); + } + + if (storageValue) { + return JSON.parse(storageValue); + } else { + return initialState; + } + }); + + useEffect(() => { + window.localStorage.setItem(key, JSON.stringify(state)); + }, [key, state]); + + return [state, setState]; +} + +export default usePersistedState; diff --git a/yarn.lock b/yarn.lock index 904d3d1c..9a2a70e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,87 @@ # yarn lockfile v1 +"@babel/code-frame@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" + integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== + dependencies: + "@babel/highlight" "^7.18.6" + +"@babel/generator@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.7.tgz#f8ef57c8242665c5929fe2e8d82ba75460187b4a" + integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw== + dependencies: + "@babel/types" "^7.20.7" + "@jridgewell/gen-mapping" "^0.3.2" + jsesc "^2.5.1" + +"@babel/helper-annotate-as-pure@^7.16.0": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb" + integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-environment-visitor@^7.18.9": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be" + integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg== + +"@babel/helper-function-name@^7.19.0": + version "7.19.0" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c" + integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w== + dependencies: + "@babel/template" "^7.18.10" + "@babel/types" "^7.19.0" + +"@babel/helper-hoist-variables@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678" + integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-split-export-declaration@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075" + integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-string-parser@^7.19.4": + version "7.19.4" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63" + integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw== + +"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1": + version "7.19.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" + integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== + +"@babel/highlight@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf" + integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g== + dependencies: + "@babel/helper-validator-identifier" "^7.18.6" + chalk "^2.0.0" + js-tokens "^4.0.0" + +"@babel/parser@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b" + integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg== + "@babel/runtime-corejs3@^7.10.2": version "7.20.6" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.20.6.tgz#63dae945963539ab0ad578efbf3eff271e7067ae" @@ -17,6 +98,69 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.17.8": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" + integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ== + dependencies: + regenerator-runtime "^0.13.11" + +"@babel/template@^7.18.10": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" + integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/parser" "^7.20.7" + "@babel/types" "^7.20.7" + +"@babel/traverse@^7.4.5": + version "7.20.12" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.12.tgz#7f0f787b3a67ca4475adef1f56cb94f6abd4a4b5" + integrity sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/generator" "^7.20.7" + "@babel/helper-environment-visitor" "^7.18.9" + "@babel/helper-function-name" "^7.19.0" + "@babel/helper-hoist-variables" "^7.18.6" + "@babel/helper-split-export-declaration" "^7.18.6" + "@babel/parser" "^7.20.7" + "@babel/types" "^7.20.7" + debug "^4.1.0" + globals "^11.1.0" + +"@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f" + integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg== + dependencies: + "@babel/helper-string-parser" "^7.19.4" + "@babel/helper-validator-identifier" "^7.19.1" + to-fast-properties "^2.0.0" + +"@emotion/is-prop-valid@^1.1.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + "@eslint/eslintrc@^1.3.3": version "1.3.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95" @@ -32,6 +176,32 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073" + integrity sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ== + +"@fortawesome/fontawesome-svg-core@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz#e87e905e444b5e7b715af09b64d27b53d4c8f9d9" + integrity sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.1" + +"@fortawesome/free-solid-svg-icons@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz#2290ea5adcf1537cbd0c43de6feb38af02141d27" + integrity sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.1" + +"@fortawesome/react-fontawesome@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4" + integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw== + dependencies: + prop-types "^15.8.1" + "@humanwhocodes/config-array@^0.11.6": version "0.11.7" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f" @@ -51,6 +221,38 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@jridgewell/gen-mapping@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9" + integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + +"@jridgewell/resolve-uri@3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78" + integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== + +"@jridgewell/set-array@^1.0.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" + integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== + +"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10": + version "1.4.14" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24" + integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== + +"@jridgewell/trace-mapping@^0.3.9": + version "0.3.17" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985" + integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g== + dependencies: + "@jridgewell/resolve-uri" "3.1.0" + "@jridgewell/sourcemap-codec" "1.4.14" + "@next/env@13.0.6": version "13.0.6" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.6.tgz#3fcab11ffbe95bff127827d9f7f3139bc5e6adff" @@ -247,6 +449,13 @@ ansi-regex@^5.0.1: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== +ansi-styles@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" + integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== + dependencies: + color-convert "^1.9.0" + ansi-styles@^4.1.0: version "4.3.0" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" @@ -329,6 +538,22 @@ axobject-query@^2.2.0: resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA== +"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.7: + version "2.0.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" + integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -362,11 +587,25 @@ callsites@^3.0.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001406: version "1.0.30001439" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb" integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A== +chalk@^2.0.0: + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + chalk@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -380,6 +619,13 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== +color-convert@^1.9.0: + version "1.9.3" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" + integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== + dependencies: + color-name "1.1.3" + color-convert@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" @@ -387,6 +633,11 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" +color-name@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" + integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== + color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" @@ -411,6 +662,20 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + +css-to-react-native@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.1.0.tgz#e783474149997608986afcff614405714a8fe1ac" + integrity sha512-AryfkFA29b4I3vG7N4kxFboq15DxwSXzhXM37XNEjwJMgjYIc8BcqfiprpAqX0zadI5PMByEIwAMzXxk5Vcc4g== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" @@ -430,7 +695,7 @@ debug@^3.2.7: dependencies: ms "^2.1.1" -debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: +debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -536,6 +801,11 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" +escape-string-regexp@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" + integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== + escape-string-regexp@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" @@ -904,6 +1174,11 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" +globals@^11.1.0: + version "11.12.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" + integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== + globals@^13.15.0: version "13.19.0" resolved "https://registry.yarnpkg.com/globals/-/globals-13.19.0.tgz#7a42de8e6ad4f7242fbcca27ea5b23aca367b5c8" @@ -966,6 +1241,11 @@ has-bigints@^1.0.1, has-bigints@^1.0.2: resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa" integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ== +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== + has-flag@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" @@ -997,6 +1277,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.0.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + ignore@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c" @@ -1158,12 +1445,20 @@ isexe@^2.0.0: resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== +isomorphic-fetch@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4" + integrity sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA== + dependencies: + node-fetch "^2.6.1" + whatwg-fetch "^3.4.1" + js-sdsl@^4.1.4: version "4.2.0" resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0" integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ== -"js-tokens@^3.0.0 || ^4.0.0": +"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -1175,6 +1470,11 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" +jsesc@^2.5.1: + version "2.5.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" + integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== + json-schema-traverse@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" @@ -1232,6 +1532,11 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash@^4.17.11: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -1321,6 +1626,13 @@ next@13.0.6: "@next/swc-win32-ia32-msvc" "13.0.6" "@next/swc-win32-x64-msvc" "13.0.6" +node-fetch@^2.6.1: + version "2.6.8" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.8.tgz#a68d30b162bc1d8fd71a367e81b997e1f4d4937e" + integrity sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg== + dependencies: + whatwg-url "^5.0.0" + object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -1455,16 +1767,35 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +pexels@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/pexels/-/pexels-1.4.0.tgz#8dd9f67c94b7c1abefa07360cbcd0954d93fb5f7" + integrity sha512-akpLySokCtw9JHGx7yMavOIAHGVP5721rLUONR/cFKjWkLjUXsHrJ5jndMKss9mx7AEMZRXs7loxEb+vLJf6kA== + dependencies: + isomorphic-fetch "^3.0.0" + picocolors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.3.1: +picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== +polished@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.2.tgz#2529bb7c3198945373c52e34618c8fe7b1aa84d1" + integrity sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ== + dependencies: + "@babel/runtime" "^7.17.8" + +postcss-value-parser@^4.0.2: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + postcss@8.4.14: version "8.4.14" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" @@ -1479,7 +1810,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.8.1: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -1506,11 +1837,23 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-switch@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-7.0.0.tgz#400990bb9822864938e343ed24f13276a617bdc0" + integrity sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA== + dependencies: + prop-types "^15.7.2" + +react-use-downloader@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/react-use-downloader/-/react-use-downloader-1.2.1.tgz#58ddfe6607f0fec70882cca9871ec6bf068200ba" + integrity sha512-GX1nCbQGPBN3SjBHnefdADgjXjSkTuRK2iBgaREGK3WdR6QRgdHZN8UJm/ckt80DX1tfBNE6wIZcOc/GoRIFlQ== + react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -1607,6 +1950,11 @@ semver@^7.3.7: dependencies: lru-cache "^6.0.0" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -1692,6 +2040,22 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +styled-components@^5.3.6: + version "5.3.6" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1" + integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + styled-jsx@5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.0.tgz#4a5622ab9714bd3fcfaeec292aa555871f057563" @@ -1699,6 +2063,13 @@ styled-jsx@5.1.0: dependencies: client-only "0.0.1" +supports-color@^5.3.0, supports-color@^5.5.0: + version "5.5.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" + integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== + dependencies: + has-flag "^3.0.0" + supports-color@^7.1.0: version "7.2.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da" @@ -1737,6 +2108,11 @@ tiny-glob@^0.2.9: globalyzer "0.1.0" globrex "^0.1.2" +to-fast-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" + integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== + to-regex-range@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" @@ -1744,6 +2120,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +tr46@~0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" + integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== + tsconfig-paths@^3.14.1: version "3.14.1" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a" @@ -1800,6 +2181,24 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +webidl-conversions@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" + integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== + +whatwg-fetch@^3.4.1: + version "3.6.2" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c" + integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA== + +whatwg-url@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" + integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== + dependencies: + tr46 "~0.0.3" + webidl-conversions "^3.0.0" + which-boxed-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"