feat: add some global components

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn prettier
+git add .

components/Button/CopyButton.tsx

@@ -0,0 +1,15 @@
+interface Props {
+	text: JSX.Element | string
+	onClick: any
+}
+
+const CopyButton = ({ text, onClick }: Props) => {
+	return (
+		<>
+			{text}
+			<a onClick={onClick} className="money money-sm copy-icon sm-margin-left-xs" />
+		</>
+	)
+}
+
+export default CopyButton

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 <div className={styles.backgroundCard}>{children}</div>
+}
+
+export default BackgroundCard

components/Card/Background/index.tsx

@@ -0,0 +1 @@
+export * from './BackgroundCard'

components/Card/Background/style.module.scss

@@ -0,0 +1,22 @@
+.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;
+}

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 (
+		<BackgroundCard>
+			{items.map((item: ItemComponent) => (
+				<Row key={item.label}>
+					<div className={styles.cardLabel}>{item.label}</div>
+					<div className={styles.cardContent}>{item.content}</div>
+				</Row>
+			))}
+		</BackgroundCard>
+	)
+}
+
+export default ItemsCard

components/Card/Layout/StaticsCard.tsx

@@ -0,0 +1,9 @@
+import styles from './style.module.scss'
+
+interface Props {}
+
+const StaticsCard = ({ items }: Props) => {
+	return <div className={styles.staticsCard}></div>
+}
+
+export default StaticsCard

components/Card/Layout/style.module.scss

@@ -0,0 +1,13 @@
+.itemsCard {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+
+	padding: 48px 32px;
+}
+
+.cardLabel {
+}
+
+.cardContent {
+}

components/Navbar/Navigation.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx'
+import cloneDeep from 'lodash/cloneDeep'
 import Link from 'next/link'
 import { useRef, useState } from 'react'
-import cloneDeep from 'lodash/cloneDeep'
 
-import styles from './style.module.scss'
-import useOutsideAlerter from '../../hooks/useOutsideElement'
-import { useRouter } from 'next/router'
 import Image from 'next/image'
+import { useRouter } from 'next/router'
+import useOutsideAlerter from '../../hooks/useOutsideElement'
+import styles from './style.module.scss'
 type MenuType = 'static' | 'locale'
 
 type SubMenuItem = {

components/Row/BackgroundRow.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import clsx from 'clsx'
+import styles from './style.module.scss'
+
+interface Props {
+	children: JSX.Element[]
+}
+
+const BackgroundRow = ({ children }: Props) => {
+	return <div className={clsx(styles.row, styles.blockRow, styles.backgroundRow)}>{children}</div>
+}
+
+export default BackgroundRow

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 (
+		<div className={clsx(styles.row, styles.blockRow, styles.gradientRow)}>
+			<RowType type={type} />
+			{children}
+		</div>
+	)
+}
+
+export default GradientRow

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 <div className={clsx(styles.row, ...className)}>{children}</div>
+}
+
+export default Row

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 <div className={clsx(styles.rowType, style)}></div>
+}
+
+export default RowType

components/Row/index.tsx

@@ -0,0 +1,2 @@
+export * from './GradientRow'
+export * from './BackgroundRow'

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);
+}

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 (
+// 		<table className={styles.table}>
+// 			<tr>
+// 				{headers.map((header: JSX.Element | string) => (
+// 					<th className={styles.tableHeader}>{header}</th>
+// 				))}
+// 			</tr>
+// 			{/* {rows.map(row) => (
+//                 <tr>
+// 				<td>Alfreds Futterkiste</td>
+// 				<td>Maria Anders</td>
+// 				<td>Germany</td>
+// 			</tr>
+//             )} */}
+// 			<tr>
+// 				<td>Centro comercial Moctezuma</td>
+// 				<td>Francisco Chang</td>
+// 				<td>Mexico</td>
+// 			</tr>
+// 		</table>
+// 	)
+// }
+
+// export default Table

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;
+}

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 = () => <div className={styles.borderActive} />
+
+const Tab = ({ active, title, onClick }: Props) => {
+	if (active)
+		return (
+			<a onClick={onClick} className={clsx(styles.tab, styles.tabActive, 'text', 'text-base')}>
+				<span>{title}</span>
+				<BorderActive />
+			</a>
+		)
+	return (
+		<a onClick={onClick} className={clsx(styles.tab, 'text', 'text-base')}>
+			<span>{title}</span>
+		</a>
+	)
+}
+
+export default Tab