From 32caa5bf87feaaf2ff4d9d8c3dfc5beccfa8ec5e Mon Sep 17 00:00:00 2001 From: HeesungB Date: Wed, 7 Dec 2022 18:17:59 +0900 Subject: [PATCH] Add chain list views --- components/logo/index.tsx | 9 +- .../primary-button/{index.tsx => index.ts} | 0 components/skeleton/index.ts | 3 + components/skeleton/skeleton-animation.ts | 29 + components/skeleton/skeleton-circle.ts | 17 + components/skeleton/skeleton-text.ts | 13 + next.config.js | 12 + pages/verification/index.tsx | 517 ++++++++++-------- pages/verification/styled.ts | 219 ++++++++ styles/color.ts | 2 + types/index.ts | 1 + types/width-height-props.ts | 4 + 12 files changed, 598 insertions(+), 228 deletions(-) rename components/primary-button/{index.tsx => index.ts} (100%) create mode 100644 components/skeleton/index.ts create mode 100644 components/skeleton/skeleton-animation.ts create mode 100644 components/skeleton/skeleton-circle.ts create mode 100644 components/skeleton/skeleton-text.ts create mode 100644 pages/verification/styled.ts create mode 100644 types/index.ts create mode 100644 types/width-height-props.ts diff --git a/components/logo/index.tsx b/components/logo/index.tsx index d5aa6b3..eb1f80e 100644 --- a/components/logo/index.tsx +++ b/components/logo/index.tsx @@ -1,5 +1,6 @@ // NextJs import Image from "next/image"; +import Link from "next/link"; // Image Assets import LogoIcon from "../../public/images/svg/logo.svg"; @@ -10,8 +11,10 @@ import { FunctionComponent } from "react"; export const Logo: FunctionComponent = () => { return ( - - Home Logo - + + + Home Logo + + ); }; diff --git a/components/primary-button/index.tsx b/components/primary-button/index.ts similarity index 100% rename from components/primary-button/index.tsx rename to components/primary-button/index.ts diff --git a/components/skeleton/index.ts b/components/skeleton/index.ts new file mode 100644 index 0000000..67d020b --- /dev/null +++ b/components/skeleton/index.ts @@ -0,0 +1,3 @@ +export * from "./skeleton-animation"; +export * from "./skeleton-circle"; +export * from "./skeleton-text"; diff --git a/components/skeleton/skeleton-animation.ts b/components/skeleton/skeleton-animation.ts new file mode 100644 index 0000000..b1f5bb9 --- /dev/null +++ b/components/skeleton/skeleton-animation.ts @@ -0,0 +1,29 @@ +import styled from "styled-components"; +import color from "../../styles/color"; + +export 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; + } + } +`; diff --git a/components/skeleton/skeleton-circle.ts b/components/skeleton/skeleton-circle.ts new file mode 100644 index 0000000..d2fdc4f --- /dev/null +++ b/components/skeleton/skeleton-circle.ts @@ -0,0 +1,17 @@ +// Styles +import color from "../../styles/color"; +import styled from "styled-components"; + +// Components +import { SkeletonAnimation } from "./skeleton-animation"; + +// Types +import { WidthHeightProps } from "../../types"; + +export const SkeletonCircle = styled(SkeletonAnimation)` + width: ${(props) => props.width}; + height: ${(props) => props.height}; + + background-color: ${color.grey["500"]}; + border-radius: 50%; +`; diff --git a/components/skeleton/skeleton-text.ts b/components/skeleton/skeleton-text.ts new file mode 100644 index 0000000..8d18e2f --- /dev/null +++ b/components/skeleton/skeleton-text.ts @@ -0,0 +1,13 @@ +// Styles +import styled from "styled-components"; + +// Components +import { SkeletonAnimation } from "./skeleton-animation"; + +// Types +import { WidthHeightProps } from "../../types"; + +export const SkeletonText = styled(SkeletonAnimation)` + width: ${(props) => props.width}; + height: ${(props) => props.height}; +`; diff --git a/next.config.js b/next.config.js index 6fee067..d3197ea 100644 --- a/next.config.js +++ b/next.config.js @@ -5,6 +5,18 @@ const nextConfig = { compiler: { styledComponents: true, }, + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "pbs.twimg.com", + }, + { + protocol: "https", + hostname: "raw.githubusercontent.com", + }, + ], + }, }; module.exports = nextConfig; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index c506adc..20a97df 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -1,249 +1,316 @@ -// Style -import styled from "styled-components"; -import { Logo } from "../../components/logo"; +// React +import { useEffect, useState } from "react"; + +// NextJs +import Image from "next/image"; + +// Styles import color from "../../styles/color"; +// Components +import { Logo } from "../../components/logo"; +import { SkeletonCircle, SkeletonText } from "../../components/skeleton"; +import { + Container, + MainContainer, + ContentContainer, + ProfileContainer, + ProfileFollowContainer, + ProfileContentContainer, + ProfileImageContainer, + ProfileNameContainer, + ProfileFollowerContainer, + ProfileFollowBold, + ProfileUserNameContainer, + ProfileDescriptionContainer, + ChainListTitle, + SearchContainer, + ChainContainer, + ChainItemContainer, + ChainImageContainer, + ChainInfoContainer, + ChainListTitleContainer, + ChainName, + WalletAddress, + Flex1, + ChainCheckBox, + ButtonContainer, + SkeletonDivider, + SkeletonButton, +} from "./styled"; +import { PrimaryButton } from "../../components/primary-button"; + export default function VerificationPage() { + const [isLoading, setIsLoading] = useState(true); + const dummy = new Array(5); + + useEffect(() => { + setTimeout(() => setIsLoading(false), 1500); + }, []); + return ( - - - - - - - - - + {isLoading ? ( + + + - - - + + + + + + + - + + + + - - - - - - - - - - + + + - + + + - - - - - - - - - + + + + + + + + + + - + - - - - - - - - - + + + + + + + + + - + - - - - - - - - - + + + + + + + + + - + - - - - - - - - - - + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + ) : ( + + + + profile image + + + + BaeHeesung + + @BaeHeesung25 + + + + + 42 Following + + + + 42 Following + + + + + Product UIUX designer @Keplrwallet and I like @regen_network🌿 + + + + + + Chain List + Search + + + + + + chain image + + + .osmo + + cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs + + + + + + + + + + + chain image + + + .osmo + + cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs + + + + + + + + + + + chain image + + + .osmo + + cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs + + + + + + + + + + + chain image + + + .osmo + + cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs + + + + + + + + + + + chain image + + + .osmo + + cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs + + + + + + + + + + + chain image + + + .osmo + + cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs + + + + + + + + + + + Register + + + )} ); } - -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/pages/verification/styled.ts b/pages/verification/styled.ts new file mode 100644 index 0000000..38c2dfd --- /dev/null +++ b/pages/verification/styled.ts @@ -0,0 +1,219 @@ +import styled from "styled-components"; +import color from "../../styles/color"; +import { WidthHeightProps } from "../../types"; +import { SkeletonAnimation } from "../../components/skeleton"; + +export const Container = styled.div` + width: 100vw; + height: 100vh; +`; + +export const MainContainer = styled.div` + display: flex; + justify-content: center; + + color: white; +`; + +export const ContentContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + width: 40rem; + + margin-top: 5rem; +`; + +export const ProfileContainer = styled.div` + display: flex; + flex-direction: row; + + width: 100%; + + padding: 1.5rem 2rem; + + background-color: ${(props) => props.color}; +`; + +export const ProfileContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.85rem; + + margin-left: 1.5rem; +`; + +export const ProfileFollowContainer = styled.div` + display: flex; + flex-direction: row; + + gap: 1.5rem; +`; + +export const ChainContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; + max-height: 33rem; + overflow: scroll; + + background-color: ${(props) => props.color}; +`; + +export const ChainItemContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + + gap: 1rem; + + padding: 1.5rem; + + &:hover { + background: ${color.grey["900"]}; + } +`; + +export const ChainImageContainer = styled.div` + width: ${(props) => props.width}; + height: ${(props) => props.height}; + + position: relative; +`; + +export const ChainInfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +`; + +export const ButtonContainer = styled.div` + width: 10rem; + height: 4rem; + + margin-top: 2rem; +`; + +export const SkeletonButton = styled.div` + width: 12rem; + height: 4rem; + + background-color: ${color.grey["700"]}; +`; + +export const SkeletonDivider = styled(SkeletonAnimation)` + width: 100%; + height: 1px; + background-color: ${color.grey["600"]}; +`; + +export const ProfileImageContainer = styled.div` + width: 5rem; + height: 5rem; + + margin-top: -3rem; + + border-radius: 50%; + + overflow: hidden; + + position: relative; +`; + +export const ProfileNameContainer = styled.div` + font-weight: 600; + font-size: 1.2rem; + line-height: 1.5rem; + + color: ${color.white}; +`; + +export const ProfileUserNameContainer = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["100"]}; +`; + +export const ProfileFollowerContainer = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["400"]}; +`; + +export const ProfileFollowBold = styled.span` + font-weight: 600; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.white}; +`; + +export const ProfileDescriptionContainer = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["300"]}; +`; + +export const ChainListTitleContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + width: 100%; + + margin-top: 2rem; + margin-bottom: 1rem; +`; + +export const ChainListTitle = styled.div` + font-weight: 700; + font-size: 1.5rem; + line-height: 1.9rem; + + color: ${color.white}; +`; + +export const SearchContainer = styled.div` + display: flex; + align-items: center; + + border-radius: 3rem; + + min-width: 10rem; + height: 2rem; + + background-color: ${color.grey["700"]}; +`; + +export const ChainName = styled.div` + font-weight: 600; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["100"]}; +`; + +export const WalletAddress = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["400"]}; +`; + +export const Flex1 = styled.div` + flex: 1; +`; + +export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })` + width: 1.5rem; + height: 1.5rem; +`; diff --git a/styles/color.ts b/styles/color.ts index 22c0d2a..395ae3c 100644 --- a/styles/color.ts +++ b/styles/color.ts @@ -14,11 +14,13 @@ const grey = { 900: "#181818", }; +const white = "#FFFFFF"; const black = "#121212"; const color = { primary, grey, + white, black, orange, }; diff --git a/types/index.ts b/types/index.ts new file mode 100644 index 0000000..02795f0 --- /dev/null +++ b/types/index.ts @@ -0,0 +1 @@ +export * from "./width-height-props"; diff --git a/types/width-height-props.ts b/types/width-height-props.ts new file mode 100644 index 0000000..ee65f11 --- /dev/null +++ b/types/width-height-props.ts @@ -0,0 +1,4 @@ +export interface WidthHeightProps { + width: string | number; + height: string | number; +}