From 1f77aaab156146a5ca258e5b371f01264514cc7d Mon Sep 17 00:00:00 2001 From: Tien Nam Dao Date: Thu, 22 Sep 2022 16:49:18 +0700 Subject: [PATCH 1/2] feat: add some global components --- .eslintrc.json | 2 +- .prettierrc | 20 ++-- .vscode/settings.json | 14 +-- commitlint.config.js | 75 ++++++------ components/BackgroundCard.tsx | 47 -------- components/Button/CopyButton.tsx | 15 +++ components/Card/Background/BackgroundCard.tsx | 12 ++ components/Card/Background/index.tsx | 1 + components/Card/Background/style.module.scss | 23 ++++ components/Card/Layout/ItemsCard.tsx | 25 ++++ components/Card/Layout/StaticsCard.tsx | 9 ++ components/Card/Layout/style.module.scss | 15 +++ components/Container/index.tsx | 6 +- components/Footer.tsx | 107 +++++++++--------- components/Header.tsx | 107 +++++++++--------- components/Layout.tsx | 95 +++++++++++++--- components/Logo/index.tsx | 4 +- components/Navbar/Navigation.tsx | 12 +- components/Navbar/useOutsideAlerter.ts | 2 +- components/PageTitle.tsx | 0 components/Row/BackgroundRow.tsx | 13 +++ components/Row/GradientRow.tsx | 20 ++++ components/Row/Row.tsx | 13 +++ components/Row/RowType.tsx | 14 +++ components/Row/index.tsx | 2 + components/Row/style.module.scss | 53 +++++++++ components/Table/Table.tsx | 37 ++++++ components/Table/styles.module.scss | 9 ++ components/Tabs/Tab.tsx | 27 +++++ components/Tabs/Tabs.tsx | 39 +++++++ components/Tabs/style.module.scss | 29 +++++ components/Typography/CardLabel.tsx | 10 ++ components/Typography/ErrorText.tsx | 20 ++++ components/Typography/LinkText.tsx | 15 +++ components/Typography/PageTitle.tsx | 19 ++++ components/Typography/PrimaryText.tsx | 10 ++ components/Typography/SecondaryText.tsx | 10 ++ components/Typography/SuccessText.tsx | 20 ++++ components/Typography/index.tsx | 19 ++++ docker-compose.yml | 26 ++--- messages/index/en.json | 6 +- messages/index/vi.json | 6 +- messages/share/en.json | 14 +-- messages/share/vi.json | 14 +-- pages/_app.tsx | 2 +- pages/address/[address].tsx | 16 +-- pages/block/[block[.tsx | 16 +-- pages/tx/[tx].tsx | 16 +-- tsconfig.json | 46 +++----- 49 files changed, 809 insertions(+), 323 deletions(-) delete mode 100644 components/BackgroundCard.tsx create mode 100644 components/Button/CopyButton.tsx create mode 100644 components/Card/Background/BackgroundCard.tsx create mode 100644 components/Card/Background/index.tsx create mode 100644 components/Card/Background/style.module.scss create mode 100644 components/Card/Layout/ItemsCard.tsx create mode 100644 components/Card/Layout/StaticsCard.tsx create mode 100644 components/Card/Layout/style.module.scss delete mode 100644 components/PageTitle.tsx create mode 100644 components/Row/BackgroundRow.tsx create mode 100644 components/Row/GradientRow.tsx create mode 100644 components/Row/Row.tsx create mode 100644 components/Row/RowType.tsx create mode 100644 components/Row/index.tsx create mode 100644 components/Row/style.module.scss create mode 100644 components/Table/Table.tsx create mode 100644 components/Table/styles.module.scss create mode 100644 components/Tabs/Tab.tsx create mode 100644 components/Tabs/Tabs.tsx create mode 100644 components/Tabs/style.module.scss create mode 100644 components/Typography/CardLabel.tsx create mode 100644 components/Typography/ErrorText.tsx create mode 100644 components/Typography/LinkText.tsx create mode 100644 components/Typography/PageTitle.tsx create mode 100644 components/Typography/PrimaryText.tsx create mode 100644 components/Typography/SecondaryText.tsx create mode 100644 components/Typography/SuccessText.tsx create mode 100644 components/Typography/index.tsx diff --git a/.eslintrc.json b/.eslintrc.json index bffb357a..72cc705c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "next/core-web-vitals" + "extends": "next/core-web-vitals" } diff --git a/.prettierrc b/.prettierrc index 541fb18b..c3e0a4a3 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,12 +1,12 @@ { - "arrowParens": "avoid", - "bracketSpacing": true, - "printWidth": 120, - "singleQuote": true, - "jsxBracketSameLine": false, - "semi": false, - "quoteProps": "consistent", - "useTabs": true, - "tabWidth": 4, - "trailingComma": "none" + "arrowParens": "avoid", + "bracketSpacing": true, + "printWidth": 120, + "singleQuote": true, + "jsxBracketSameLine": false, + "semi": false, + "quoteProps": "consistent", + "useTabs": true, + "tabWidth": 4, + "trailingComma": "none" } diff --git a/.vscode/settings.json b/.vscode/settings.json index 76f57c3f..602ba186 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,8 @@ { - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, - "editor.codeActionsOnSave": { - "source.fixAll": true, - "source.organizeImports": true - } - } \ No newline at end of file + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll": true, + "source.organizeImports": true + } +} diff --git a/commitlint.config.js b/commitlint.config.js index 43150c65..50e66be4 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -9,43 +9,38 @@ // test: Adding missing tests or correcting existing tests module.exports = { - extends: ['@commitlint/config-conventional'], - rules: { - 'body-leading-blank': [1, 'always'], - 'body-max-line-length': [2, 'always', 100], - 'footer-leading-blank': [1, 'always'], - 'footer-max-line-length': [2, 'always', 100], - 'header-max-length': [2, 'always', 100], - 'scope-case': [2, 'always', 'lower-case'], - 'subject-case': [ - 2, - 'never', - ['sentence-case', 'start-case', 'pascal-case', 'upper-case'], - ], - 'subject-empty': [2, 'never'], - 'subject-full-stop': [2, 'never', '.'], - 'type-case': [2, 'always', 'lower-case'], - 'type-empty': [2, 'never'], - 'type-enum': [ - 2, - 'always', - [ - 'build', - 'chore', - 'ci', - 'docs', - 'feat', - 'fix', - 'perf', - 'refactor', - 'revert', - 'style', - 'test', - 'translation', - 'security', - 'changeset', - ], - ], - }, - }; - \ No newline at end of file + extends: ['@commitlint/config-conventional'], + rules: { + 'body-leading-blank': [1, 'always'], + 'body-max-line-length': [2, 'always', 100], + 'footer-leading-blank': [1, 'always'], + 'footer-max-line-length': [2, 'always', 100], + 'header-max-length': [2, 'always', 100], + 'scope-case': [2, 'always', 'lower-case'], + 'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']], + 'subject-empty': [2, 'never'], + 'subject-full-stop': [2, 'never', '.'], + 'type-case': [2, 'always', 'lower-case'], + 'type-empty': [2, 'never'], + 'type-enum': [ + 2, + 'always', + [ + 'build', + 'chore', + 'ci', + 'docs', + 'feat', + 'fix', + 'perf', + 'refactor', + 'revert', + 'style', + 'test', + 'translation', + 'security', + 'changeset' + ] + ] + } +} diff --git a/components/BackgroundCard.tsx b/components/BackgroundCard.tsx deleted file mode 100644 index beb7cd93..00000000 --- a/components/BackgroundCard.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react' - -interface Props { - children: React.ReactElement -} - -const BackgroundCard = ({ children }: Props) => { - return ( -
- {children} - -
- ) -} - -export default BackgroundCard diff --git a/components/Button/CopyButton.tsx b/components/Button/CopyButton.tsx new file mode 100644 index 00000000..17575001 --- /dev/null +++ b/components/Button/CopyButton.tsx @@ -0,0 +1,15 @@ +interface Props { + text: JSX.Element | string + onClick: any +} + +const CopyButton = ({ text, onClick }: Props) => { + return ( + <> + {text} + + + ) +} + +export default CopyButton diff --git a/components/Card/Background/BackgroundCard.tsx b/components/Card/Background/BackgroundCard.tsx new file mode 100644 index 00000000..d3059494 --- /dev/null +++ b/components/Card/Background/BackgroundCard.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import styles from './style.module.scss' + +interface Props { + children: React.ReactElement +} + +const BackgroundCard = ({ children }: Props) => { + return
{children}
+} + +export default BackgroundCard diff --git a/components/Card/Background/index.tsx b/components/Card/Background/index.tsx new file mode 100644 index 00000000..2b8d463c --- /dev/null +++ b/components/Card/Background/index.tsx @@ -0,0 +1 @@ +export * from './BackgroundCard' diff --git a/components/Card/Background/style.module.scss b/components/Card/Background/style.module.scss new file mode 100644 index 00000000..f841d83e --- /dev/null +++ b/components/Card/Background/style.module.scss @@ -0,0 +1,23 @@ +.backgroundCard { + box-sizing: border-box; + + /* Auto layout */ + + + /* White Color/50 */ + + background: var(--border-color); + /* White Color/50 */ + + border: 1px solid var(--border-color); + backdrop-filter: blur(42px); + /* Note: backdrop-filter has minimal browser support */ + + border-radius: 16px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; +} diff --git a/components/Card/Layout/ItemsCard.tsx b/components/Card/Layout/ItemsCard.tsx new file mode 100644 index 00000000..83f06fd6 --- /dev/null +++ b/components/Card/Layout/ItemsCard.tsx @@ -0,0 +1,25 @@ +import BackgroundCard from '../Background/BackgroundCard' + +interface ItemComponent { + label: string + content: JSX.Element | string +} + +interface Props { + items: ItemComponent[] +} + +const ItemsCard = ({ items }: Props) => { + return ( + + {items.map((item: ItemComponent) => ( + +
{item.label}
+
{item.content}
+ + ))} + + ) +} + +export default ItemsCard diff --git a/components/Card/Layout/StaticsCard.tsx b/components/Card/Layout/StaticsCard.tsx new file mode 100644 index 00000000..af44e23d --- /dev/null +++ b/components/Card/Layout/StaticsCard.tsx @@ -0,0 +1,9 @@ +import styles from './style.module.scss' + +interface Props {} + +const StaticsCard = ({ items }: Props) => { + return
+} + +export default StaticsCard diff --git a/components/Card/Layout/style.module.scss b/components/Card/Layout/style.module.scss new file mode 100644 index 00000000..031d8c08 --- /dev/null +++ b/components/Card/Layout/style.module.scss @@ -0,0 +1,15 @@ +.itemsCard { + display: flex; + flex-direction: column; + align-items: flex-start; + + padding: 48px 32px; +} + +.cardLabel { + +} + +.cardContent { + +} \ No newline at end of file diff --git a/components/Container/index.tsx b/components/Container/index.tsx index 58f87705..f2078565 100644 --- a/components/Container/index.tsx +++ b/components/Container/index.tsx @@ -1,6 +1,6 @@ type ContainerProps = { - children: React.ReactNode; -}; + children: React.ReactNode +} export default function Container({ children }: ContainerProps) { - return
{children}
; + return
{children}
} diff --git a/components/Footer.tsx b/components/Footer.tsx index 85baec03..e0b3ac34 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,56 +1,55 @@ -import React from "react"; -import Link from "next/link"; -import { useRouter } from "next/router"; +import React from 'react' +import Link from 'next/link' +import { useRouter } from 'next/router' const Header: React.FC = () => { - const router = useRouter(); - const isActive: (pathname: string) => boolean = (pathname) => - router.pathname === pathname; - - let left = ( -
- - - Feed - - - -
- ); - - let right = null; - - return ( - - ); -}; - -export default Header; + const router = useRouter() + const isActive: (pathname: string) => boolean = pathname => router.pathname === pathname + + let left = ( +
+ + + Feed + + + +
+ ) + + let right = null + + return ( + + ) +} + +export default Header diff --git a/components/Header.tsx b/components/Header.tsx index 85baec03..e0b3ac34 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,56 +1,55 @@ -import React from "react"; -import Link from "next/link"; -import { useRouter } from "next/router"; +import React from 'react' +import Link from 'next/link' +import { useRouter } from 'next/router' const Header: React.FC = () => { - const router = useRouter(); - const isActive: (pathname: string) => boolean = (pathname) => - router.pathname === pathname; - - let left = ( -
- - - Feed - - - -
- ); - - let right = null; - - return ( - - ); -}; - -export default Header; + const router = useRouter() + const isActive: (pathname: string) => boolean = pathname => router.pathname === pathname + + let left = ( +
+ + + Feed + + + +
+ ) + + let right = null + + return ( + + ) +} + +export default Header diff --git a/components/Layout.tsx b/components/Layout.tsx index 2e4687d1..1fa25b1d 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,19 +1,88 @@ -import React, { ReactNode } from "react"; -import BackgroundCard from "./BackgroundCard"; -import Navbar from "./Navbar"; +import clsx from 'clsx' +import React, { ReactNode } from 'react' +import CopyButton from './Button/CopyButton' +import BackgroundCard from './Card/Background/BackgroundCard' +import Navbar from './Navbar' +import BackgroundRow from './Row/BackgroundRow' +import GradientRow from './Row/GradientRow' +import Tabs from './Tabs/Tabs' +import Typography from './Typography' type Props = { children: ReactNode } -const Layout: React.FC = (props) => ( -
- -
{props.children}
- -

afsdfasdf

- -
-); +const Layout: React.FC = props => ( +
+ + + Hello World
+ }} + > + + {}} /> +
+ hihihi} + onClick={() => {}} + /> +
+ Test +
+ Sucess +
+ Test +
+ Transaction Hash: +
+ 0x141CC5ce4A7267861fC1c50C416C31617fcaCEC0 +
+ Transaction +
+ Type +
+ Success +
+ Error +
+ +

afsdfasdf

+ + + f + g + + + f + g + + + f + g + +
+ {props.children} +
+ +
+) -export default Layout; +export default Layout diff --git a/components/Logo/index.tsx b/components/Logo/index.tsx index d63385e3..cec4ece8 100644 --- a/components/Logo/index.tsx +++ b/components/Logo/index.tsx @@ -6,9 +6,9 @@ type LogoProps = { export default function Logo({ type = 'white' }: LogoProps) { return ( -
+
- Astra Protocol + Astra Blockchain
) } diff --git a/components/Navbar/Navigation.tsx b/components/Navbar/Navigation.tsx index 668187c1..eab5ce89 100644 --- a/components/Navbar/Navigation.tsx +++ b/components/Navbar/Navigation.tsx @@ -78,9 +78,15 @@ export default function Navigation({ items }: NavigationProps) { {_renderLink(link, label)} {sub1?.length > 0 && (
    {sub1.map(menu => (
  • { + return
    {children}
    +} + +export default BackgroundRow diff --git a/components/Row/GradientRow.tsx b/components/Row/GradientRow.tsx new file mode 100644 index 00000000..f730cd9d --- /dev/null +++ b/components/Row/GradientRow.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import clsx from 'clsx' +import styles from './style.module.scss' +import RowType from './RowType' + +interface Props { + children: JSX.Element[] + type: 'success' | 'error' +} + +const GradientRow = ({ children, type }: Props) => { + return ( +
    + + {children} +
    + ) +} + +export default GradientRow diff --git a/components/Row/Row.tsx b/components/Row/Row.tsx new file mode 100644 index 00000000..5c94e5b6 --- /dev/null +++ b/components/Row/Row.tsx @@ -0,0 +1,13 @@ +import clsx from 'clsx' +import styles from './style.module.scss' + +interface Props { + className?: string[] + children: JSX.Element[] +} + +const Row = ({ children, className = [] }: Props) => { + return
    {children}
    +} + +export default Row diff --git a/components/Row/RowType.tsx b/components/Row/RowType.tsx new file mode 100644 index 00000000..96353dc4 --- /dev/null +++ b/components/Row/RowType.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import clsx from 'clsx' +import styles from './style.module.scss' + +interface Props { + type: 'success' | 'error' +} + +const RowType = ({ type }: Props) => { + const style = type === 'success' ? styles.success : styles.error + return
    +} + +export default RowType diff --git a/components/Row/index.tsx b/components/Row/index.tsx new file mode 100644 index 00000000..af5cab48 --- /dev/null +++ b/components/Row/index.tsx @@ -0,0 +1,2 @@ +export * from './GradientRow' +export * from './BackgroundRow' diff --git a/components/Row/style.module.scss b/components/Row/style.module.scss new file mode 100644 index 00000000..999d2857 --- /dev/null +++ b/components/Row/style.module.scss @@ -0,0 +1,53 @@ +.row { + display: flex; + flex-direction: row; + flex: 1; +} + +.blockRow { + box-sizing: border-box; + height: 72px; + + /* White Color/50 */ + + /* Note: backdrop-filter has minimal browser support */ + border-radius: 16px; + + /* Inside auto layout */ + + padding: 12px 28px; + flex: none; + order: 0; + flex-grow: 0; +} + +.backgroundRow { + background: var(--border-color); + /* White Color/50 */ + border: 1px solid var(--border-color); + backdrop-filter: blur(42px); +} + +.gradientRow { + background: linear-gradient(90deg, rgba(139, 255, 98, 0.08) 0%, rgba(97, 181, 67, 0) 10.65%), + rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + backdrop-filter: blur(42px); +} + +.rowType { + position: absolute; + width: 4px; + height: 32px; + left: 0px; + top: 20px; + border-radius: 0px 4px 4px 0px; +} + +.success { + background: var(--alert-color-success); +} + +.error { + background: var(--alert-color-error); +} diff --git a/components/Table/Table.tsx b/components/Table/Table.tsx new file mode 100644 index 00000000..d2abdf1e --- /dev/null +++ b/components/Table/Table.tsx @@ -0,0 +1,37 @@ +// import styles from './style.module.scss' + +// interface ColumeType { +// dataIndex: string +// key: string +// } + +// interface Props { +// dataSource: object[], +// columns: ColumeType[] +// } + +// const Table = ({ headers, rows }: Props) => { +// return ( +// +// +// {headers.map((header: JSX.Element | string) => ( +// +// ))} +// +// {/* {rows.map(row) => ( +// +// +// +// +// +// )} */} +// +// +// +// +// +//
    {header}
    Alfreds FutterkisteMaria AndersGermany
    Centro comercial MoctezumaFrancisco ChangMexico
    +// ) +// } + +// export default Table diff --git a/components/Table/styles.module.scss b/components/Table/styles.module.scss new file mode 100644 index 00000000..cd31f297 --- /dev/null +++ b/components/Table/styles.module.scss @@ -0,0 +1,9 @@ +.table { + box-sizing: border-box; + + // background: var(--border-color); + /* White Color/100 */ + + border: 1px solid var(--same-color-theme-10); + border-radius: 8px; +} \ No newline at end of file diff --git a/components/Tabs/Tab.tsx b/components/Tabs/Tab.tsx new file mode 100644 index 00000000..ca5c3318 --- /dev/null +++ b/components/Tabs/Tab.tsx @@ -0,0 +1,27 @@ +import clsx from 'clsx' +import styles from './style.module.scss' + +interface Props { + active: boolean + title: string + onClick?: any +} + +const BorderActive = () =>
    + +const Tab = ({ active, title, onClick }: Props) => { + if (active) + return ( + + {title} + + + ) + return ( + + {title} + + ) +} + +export default Tab diff --git a/components/Tabs/Tabs.tsx b/components/Tabs/Tabs.tsx new file mode 100644 index 00000000..9da076ca --- /dev/null +++ b/components/Tabs/Tabs.tsx @@ -0,0 +1,39 @@ +import { useState } from 'react' +import Row from '../Row/Row' +import styles from './style.module.scss' +import Tab from './Tab' + +interface Tab { + value: string + title: string +} + +interface Content { + [key: string]: JSX.Element +} + +interface Props { + tabs?: Tab[] + contents?: Content +} + +const Tabs = ({ tabs, contents }: Props) => { + const [currentActiveValue, setActiveValue] = useState(tabs[0].value) + return ( + <> + + {tabs.map((tab: Tab) => ( + setActiveValue(tab.value)} + active={currentActiveValue == tab.value} + title={tab.title} + key={tab.value} + > + ))} + + {contents[currentActiveValue]} + + ) +} + +export default Tabs diff --git a/components/Tabs/style.module.scss b/components/Tabs/style.module.scss new file mode 100644 index 00000000..30652d8a --- /dev/null +++ b/components/Tabs/style.module.scss @@ -0,0 +1,29 @@ +.tabs { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + padding-left: var(--offset-xl); + padding-right: var(--offset-xl); +} + +.tab { + position: relative; + text-align: center; + padding: 10px; + cursor: pointer; +} + +.tabActive { + color: var(--primary-color-normal); +} + +.borderActive { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + z-index: 1; + background-color: var(--primary-color-normal); + + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} \ No newline at end of file diff --git a/components/Typography/CardLabel.tsx b/components/Typography/CardLabel.tsx new file mode 100644 index 00000000..0d3eef17 --- /dev/null +++ b/components/Typography/CardLabel.tsx @@ -0,0 +1,10 @@ +import clsx from 'clsx' + +interface Props { + children: string + className?: string[] +} + +export const CardLabel = ({ children, className = [] }: Props) => { + return {children} +} diff --git a/components/Typography/ErrorText.tsx b/components/Typography/ErrorText.tsx new file mode 100644 index 00000000..a159dc8b --- /dev/null +++ b/components/Typography/ErrorText.tsx @@ -0,0 +1,20 @@ +import clsx from 'clsx' + +interface Props { + children: string + icon?: string + className?: string[] +} + +export const ErrorText = ({ children, icon, className = [] }: Props) => { + if (icon) + return ( + <> + + + {children} + + + ) + return {children} +} diff --git a/components/Typography/LinkText.tsx b/components/Typography/LinkText.tsx new file mode 100644 index 00000000..ff68e116 --- /dev/null +++ b/components/Typography/LinkText.tsx @@ -0,0 +1,15 @@ +import clsx from 'clsx' + +interface Props { + children: string + className?: string[] + href: string +} + +export const LinkText = ({ children, className = [], href }: Props) => { + return ( + + {children} + + ) +} diff --git a/components/Typography/PageTitle.tsx b/components/Typography/PageTitle.tsx new file mode 100644 index 00000000..3f27d3cf --- /dev/null +++ b/components/Typography/PageTitle.tsx @@ -0,0 +1,19 @@ +import clsx from 'clsx' +interface Props { + children: string + className?: string[] + icon?: string +} + +export const PageTitle = ({ children, icon, className = [] }: Props) => { + if (icon) + return ( + <> + + + {children} + + + ) + return {children} +} diff --git a/components/Typography/PrimaryText.tsx b/components/Typography/PrimaryText.tsx new file mode 100644 index 00000000..13b3cb63 --- /dev/null +++ b/components/Typography/PrimaryText.tsx @@ -0,0 +1,10 @@ +import clsx from 'clsx' + +interface Props { + children: string + className?: string[] +} + +export const PrimaryText = ({ children, className = [] }: Props) => { + return {children} +} diff --git a/components/Typography/SecondaryText.tsx b/components/Typography/SecondaryText.tsx new file mode 100644 index 00000000..486e2b85 --- /dev/null +++ b/components/Typography/SecondaryText.tsx @@ -0,0 +1,10 @@ +import clsx from 'clsx' + +interface Props { + children: string + className?: string[] +} + +export const SecondaryText = ({ children, className = [] }: Props) => { + return {children} +} diff --git a/components/Typography/SuccessText.tsx b/components/Typography/SuccessText.tsx new file mode 100644 index 00000000..8be23f37 --- /dev/null +++ b/components/Typography/SuccessText.tsx @@ -0,0 +1,20 @@ +import clsx from 'clsx' + +interface Props { + children: string + icon?: string + className?: string[] +} + +export const SuccessText = ({ children, icon, className = [] }: Props) => { + if (icon) + return ( + <> + + + {children} + + + ) + return {children} +} diff --git a/components/Typography/index.tsx b/components/Typography/index.tsx new file mode 100644 index 00000000..24222e13 --- /dev/null +++ b/components/Typography/index.tsx @@ -0,0 +1,19 @@ +import { CardLabel } from './CardLabel' +import { ErrorText } from './ErrorText' +import { LinkText } from './LinkText' +import { PageTitle } from './PageTitle' +import { PrimaryText } from './PrimaryText' +import { SecondaryText } from './SecondaryText' +import { SuccessText } from './SuccessText' + +const Typography = { + PageTitle, + CardLabel, + LinkText, + PrimaryText, + SecondaryText, + SuccessText, + ErrorText +} + +export default Typography diff --git a/docker-compose.yml b/docker-compose.yml index a6a296df..441835e2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,16 +1,16 @@ version: '3.9' services: - vesting: - image: explorer-fe - ports: - - '80:3000' - environment: - - NEXT_PUBLIC_ENDPOINT='http://159.223.36.174:1317' - - NEXT_PUBLIC_RPC='http://167.71.207.84:8545' - - NEXT_PUBLIC_CHAINID=11115 - - NEXT_PUBLIC_COSMOS_CHAINID='astra_11115-1' - restart: unless-stopped - logging: - options: - max-size: 10m + vesting: + image: explorer-fe + ports: + - '80:3000' + environment: + - NEXT_PUBLIC_ENDPOINT='http://159.223.36.174:1317' + - NEXT_PUBLIC_RPC='http://167.71.207.84:8545' + - NEXT_PUBLIC_CHAINID=11115 + - NEXT_PUBLIC_COSMOS_CHAINID='astra_11115-1' + restart: unless-stopped + logging: + options: + max-size: 10m diff --git a/messages/index/en.json b/messages/index/en.json index 63e980b8..3c264df1 100644 --- a/messages/index/en.json +++ b/messages/index/en.json @@ -1,5 +1,5 @@ { - "Index": { - "title": "Explorer" - } + "Index": { + "title": "Explorer" + } } diff --git a/messages/index/vi.json b/messages/index/vi.json index 2256d33d..4289f981 100644 --- a/messages/index/vi.json +++ b/messages/index/vi.json @@ -1,5 +1,5 @@ { - "Index": { - "title": "Ít pờ lo rơ" - } + "Index": { + "title": "Ít pờ lo rơ" + } } diff --git a/messages/share/en.json b/messages/share/en.json index 89895c9b..3fac9a55 100644 --- a/messages/share/en.json +++ b/messages/share/en.json @@ -1,9 +1,7 @@ { - "Navbar": { - "en": "English", - "vi": "Tiếng việt" - }, - "Footer": { - - } -} \ No newline at end of file + "Navbar": { + "en": "English", + "vi": "Tiếng việt" + }, + "Footer": {} +} diff --git a/messages/share/vi.json b/messages/share/vi.json index 8dfaeebc..32b2d5b8 100644 --- a/messages/share/vi.json +++ b/messages/share/vi.json @@ -1,9 +1,7 @@ { - "Navbar": { - "en": "Tiếng anh", - "vi": "Tiếng việt" - }, - "Footer": { - - } -} \ No newline at end of file + "Navbar": { + "en": "Tiếng anh", + "vi": "Tiếng việt" + }, + "Footer": {} +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 26195dc1..8967993c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import { NextIntlProvider } from 'next-intl' import { AppProps } from 'next/app' -import "astra-ui/lib/shared/style.css"; +import '@astraprotocol/astra-ui/lib/shared/style.css' const App = ({ Component, pageProps }: AppProps) => { return ( diff --git a/pages/address/[address].tsx b/pages/address/[address].tsx index 34a55a0f..d57780da 100644 --- a/pages/address/[address].tsx +++ b/pages/address/[address].tsx @@ -1,11 +1,11 @@ -import React from "react"; -import { GetStaticProps } from "next"; -import Layout from "../../components/Layout"; +import React from 'react' +import { GetStaticProps } from 'next' +import Layout from '../../components/Layout' -type Props = {}; +type Props = {} -const AddressDetailPage: React.FC = (props) => { - return Implement Here; -}; +const AddressDetailPage: React.FC = props => { + return Implement Here +} -export default AddressDetailPage; +export default AddressDetailPage diff --git a/pages/block/[block[.tsx b/pages/block/[block[.tsx index ee72e65e..3fb40e38 100644 --- a/pages/block/[block[.tsx +++ b/pages/block/[block[.tsx @@ -1,11 +1,11 @@ -import React from "react"; -import { GetStaticProps } from "next"; -import Layout from "../../components/Layout"; +import React from 'react' +import { GetStaticProps } from 'next' +import Layout from '../../components/Layout' -type Props = {}; +type Props = {} -const BlockDetailPage: React.FC = (props) => { - return Implement Here; -}; +const BlockDetailPage: React.FC = props => { + return Implement Here +} -export default BlockDetailPage; +export default BlockDetailPage diff --git a/pages/tx/[tx].tsx b/pages/tx/[tx].tsx index ab0b0a42..5ee679b9 100644 --- a/pages/tx/[tx].tsx +++ b/pages/tx/[tx].tsx @@ -1,11 +1,11 @@ -import React from "react"; -import { GetStaticProps } from "next"; -import Layout from "../../components/Layout"; +import React from 'react' +import { GetStaticProps } from 'next' +import Layout from '../../components/Layout' -type Props = {}; +type Props = {} -const TransactionDetailPage: React.FC = (props) => { - return Implement Here; -}; +const TransactionDetailPage: React.FC = props => { + return Implement Here +} -export default TransactionDetailPage; +export default TransactionDetailPage diff --git a/tsconfig.json b/tsconfig.json index 568e45d1..68f531fb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,30 +1,20 @@ { - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "strict": false, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true - }, - "exclude": [ - "node_modules" - ], - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ] + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "exclude": ["node_modules"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] } From 9f68fc0f2382435258730c36f2bff2def508e9da Mon Sep 17 00:00:00 2001 From: Tien Nam Dao Date: Thu, 22 Sep 2022 16:54:38 +0700 Subject: [PATCH 2/2] chore: update --- .husky/pre-commit | 1 + components/Card/Background/style.module.scss | 1 - components/Card/Layout/style.module.scss | 4 +-- components/Table/styles.module.scss | 12 +++---- components/Tabs/style.module.scss | 36 ++++++++++---------- 5 files changed, 26 insertions(+), 28 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 11daf302..979819bd 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -2,3 +2,4 @@ . "$(dirname -- "$0")/_/husky.sh" yarn prettier +git add . \ No newline at end of file diff --git a/components/Card/Background/style.module.scss b/components/Card/Background/style.module.scss index f841d83e..4b053a37 100644 --- a/components/Card/Background/style.module.scss +++ b/components/Card/Background/style.module.scss @@ -3,7 +3,6 @@ /* Auto layout */ - /* White Color/50 */ background: var(--border-color); diff --git a/components/Card/Layout/style.module.scss b/components/Card/Layout/style.module.scss index 031d8c08..d2a389a1 100644 --- a/components/Card/Layout/style.module.scss +++ b/components/Card/Layout/style.module.scss @@ -7,9 +7,7 @@ } .cardLabel { - } .cardContent { - -} \ No newline at end of file +} diff --git a/components/Table/styles.module.scss b/components/Table/styles.module.scss index cd31f297..f9962de3 100644 --- a/components/Table/styles.module.scss +++ b/components/Table/styles.module.scss @@ -1,9 +1,9 @@ .table { - box-sizing: border-box; + box-sizing: border-box; - // background: var(--border-color); - /* White Color/100 */ + // background: var(--border-color); + /* White Color/100 */ - border: 1px solid var(--same-color-theme-10); - border-radius: 8px; -} \ No newline at end of file + border: 1px solid var(--same-color-theme-10); + border-radius: 8px; +} diff --git a/components/Tabs/style.module.scss b/components/Tabs/style.module.scss index 30652d8a..a711b3e2 100644 --- a/components/Tabs/style.module.scss +++ b/components/Tabs/style.module.scss @@ -1,29 +1,29 @@ .tabs { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); - padding-left: var(--offset-xl); - padding-right: var(--offset-xl); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + padding-left: var(--offset-xl); + padding-right: var(--offset-xl); } .tab { - position: relative; - text-align: center; - padding: 10px; - cursor: pointer; + position: relative; + text-align: center; + padding: 10px; + cursor: pointer; } .tabActive { - color: var(--primary-color-normal); + color: var(--primary-color-normal); } .borderActive { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - z-index: 1; - background-color: var(--primary-color-normal); + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + z-index: 1; + background-color: var(--primary-color-normal); - border-top-left-radius: 16px; - border-top-right-radius: 16px; -} \ No newline at end of file + border-top-left-radius: 16px; + border-top-right-radius: 16px; +}