From 4ba6812c9a971e763ba6f67a42d06bda80cc2d08 Mon Sep 17 00:00:00 2001 From: HeesungB Date: Tue, 6 Dec 2022 23:53:31 +0900 Subject: [PATCH] Add Skeleton views --- components/logo/index.tsx | 17 +++ components/logo/styled.ts | 16 +++ pages/index.tsx | 30 ++-- pages/verification/index.tsx | 271 +++++++++++++++++++++++++++++++---- styles/global.ts | 4 +- 5 files changed, 287 insertions(+), 51 deletions(-) create mode 100644 components/logo/index.tsx create mode 100644 components/logo/styled.ts diff --git a/components/logo/index.tsx b/components/logo/index.tsx new file mode 100644 index 0000000..d5aa6b3 --- /dev/null +++ b/components/logo/index.tsx @@ -0,0 +1,17 @@ +// NextJs +import Image from "next/image"; + +// Image Assets +import LogoIcon from "../../public/images/svg/logo.svg"; + +// Styles +import { LogoContainer } from "./styled"; +import { FunctionComponent } from "react"; + +export const Logo: FunctionComponent = () => { + return ( + + Home Logo + + ); +}; diff --git a/components/logo/styled.ts b/components/logo/styled.ts new file mode 100644 index 0000000..d51df61 --- /dev/null +++ b/components/logo/styled.ts @@ -0,0 +1,16 @@ +// Styles +import styled from "styled-components"; + +export const LogoContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + + position: absolute; + + width: 160px; + height: 80px; + + margin-top: 80px; + margin-left: 80px; +`; diff --git a/pages/index.tsx b/pages/index.tsx index 444f5e5..2bd1189 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,24 +1,24 @@ +// NextJs import Image from "next/image"; +import Link from "next/link"; // Styles -import styled from "styled-components"; +import styled, { useTheme } from "styled-components"; import color from "../styles/color"; // Components import { PrimaryButton } from "../components/primary-button"; // Image Assets -import Logo from "../public/images/svg/logo.svg"; import MainTitle from "../public/images/svg/main-title.svg"; import MainLogo from "../public/images/svg/main-logo.svg"; import CheckIcon from "../public/images/svg/check-icon.svg"; +import { Logo } from "../components/logo"; export default function Home() { return ( - - Home Logo - + @@ -29,7 +29,9 @@ export default function Home() { - Connect Wallet + + Connect Wallet + @@ -65,20 +67,6 @@ const Container = styled.div` height: 100vh; `; -const LogoContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - - position: absolute; - - width: 10rem; - height: 5rem; - - margin-top: 5rem; - margin-left: 5rem; -`; - const MainContainer = styled.div` display: flex; flex-direction: row; @@ -113,7 +101,7 @@ const MainTitleImageContainer = styled.div` position: relative; - width: 55rem; + width: 60rem; height: 19.9rem; `; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index 1cd0b88..c506adc 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -1,32 +1,249 @@ -import { useEffect, useState } from "react"; - -interface AccessTokenResponse { - access_token: string; -} +// Style +import styled from "styled-components"; +import { Logo } from "../../components/logo"; +import color from "../../styles/color"; export default function VerificationPage() { - const [accessToken, setAccessToken] = useState(); - - const fetchAccessToken = async (state: string, code: string) => { - const response: AccessTokenResponse = await ( - await fetch(`/api/auth/access-token?state=${state}&code=${code}`) - ).json(); - - setAccessToken(response.access_token); - }; - - useEffect(() => { - const [, state, code] = - window.location.search.match( - /^(?=.*state=([^&]+)|)(?=.*code=([^&]+)|).+$/, - ) || []; - - fetchAccessToken(state, code); - }, []); - return ( -
-
{accessToken}
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } + +const Container = styled.div` + width: 100vw; + height: 100vh; +`; + +const MainContainer = styled.div` + display: flex; + justify-content: center; + + color: white; +`; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; + + width: 40rem; + + margin-top: 5rem; +`; + +const ProfileContainer = styled.div` + display: flex; + flex-direction: row; + + width: 100%; + + padding: 2rem 2rem; + + background-color: ${(props) => props.color}; +`; + +const ProfileContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + + margin-left: 1.5rem; +`; + +const ProfileFollowContainer = styled.div` + display: flex; + flex-direction: row; + + gap: 2rem; +`; + +const ChainContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + + width: 100%; + + padding: 2rem 2rem 1rem 2rem; + + background-color: ${(props) => props.color}; +`; + +const ChainItemContainer = styled.div` + display: flex; + flex-direction: row; + + gap: 1rem; +`; + +const ChainImageContainer = styled.div` + width: ${(props) => props.width}; + height: ${(props) => props.height}; + + position: relative; +`; + +const ChainInfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +`; + +const ButtonContainer = styled.div` + display: flex; + justify-content: center; + + margin-top: 2rem; +`; + +interface WidthHeightProps { + width: string | number; + height: string | number; +} + +const SkeletonAnimation = styled.div` + opacity: 0.35 !important; + background-image: linear-gradient( + 0.25turn, + transparent, + ${color.grey["400"]}, + transparent + ), + linear-gradient(${color.grey["500"]}, ${color.grey["500"]}), + radial-gradient( + 38px circle at 19px 19px, + ${color.grey["500"]} 50%, + transparent 51% + ), + linear-gradient(${color.grey["500"]}, ${color.grey["500"]}); + background-repeat: no-repeat; + background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; + background-position: -315px 0, 0 0, 0px 190px, 50px 195px; + animation: loading 2s infinite; + + @keyframes loading { + to { + background-position: 315px 0, 0 0, 0 190px, 50px 195px; + } + } +`; + +const SkeletonCircle = styled(SkeletonAnimation)` + width: ${(props) => props.width}; + height: ${(props) => props.height}; + + background-color: ${color.grey["500"]}; + border-radius: 50%; +`; + +const SkeletonText = styled(SkeletonAnimation)` + width: ${(props) => props.width}; + height: ${(props) => props.height}; +`; + +const SkeletonTitle = styled.div` + width: 8rem; + height: 1.5rem; + + margin-top: 3rem; + margin-bottom: 1rem; + + background-color: ${color.grey["700"]}; +`; + +const SkeletonButton = styled.div` + width: 12rem; + height: 4rem; + + background-color: ${color.grey["700"]}; +`; + +const SkeletonDivider = styled(SkeletonAnimation)` + width: 100%; + height: 1px; + background-color: ${color.grey["600"]}; +`; diff --git a/styles/global.ts b/styles/global.ts index ab30f4b..fd93fc3 100644 --- a/styles/global.ts +++ b/styles/global.ts @@ -7,12 +7,10 @@ export const GlobalStyle = createGlobalStyle` margin: 0; font-family: 'Inter', sans-serif; + font-size: 16px; background-color: ${color.black}; - font-size: 0.85vw; - //font-size: 22px; - background-size: 5rem 5rem; background-position: top left; background-repeat: repeat;