From d401bab2cf9b19f399db01f116758b9bda6f3dcc Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Mon, 22 Aug 2022 14:49:26 +0200 Subject: [PATCH 1/2] feat(input-badge): added component --- components/InputBadge/index.tsx | 38 +++++++++++++++++++++++++++++++++ content/App.tsx | 1 - content/BurnPage.tsx | 15 +++++++++++++ package.json | 1 + pages/burn.tsx | 9 ++++++++ translations/en.json | 3 +++ yarn.lock | 13 +++++++++++ 7 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 components/InputBadge/index.tsx create mode 100644 content/BurnPage.tsx create mode 100644 pages/burn.tsx diff --git a/components/InputBadge/index.tsx b/components/InputBadge/index.tsx new file mode 100644 index 000000000..2058dd3c8 --- /dev/null +++ b/components/InputBadge/index.tsx @@ -0,0 +1,38 @@ +import { InfoIcon } from '@chakra-ui/icons'; +import { Badge, BadgeProps, Flex, Text } from '@chakra-ui/react'; +import { PropsWithChildren } from 'react'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; + +interface InputBadgeProps { + colorScheme?: BadgeProps['colorScheme']; + text: string; + onClickIcon?: () => void; + onClick?: () => void; +} + +export default function InputBadge({ + colorScheme, + text, + onClickIcon, + onClick, +}: PropsWithChildren) { + return ( + + + + + {text} + + {onClickIcon && } + + + + ); +} + +const StyledAnimatedWrapper = styled(motion.div)` + min-width: 170px; + border: 1px solid black; + cursor: pointer; +`; diff --git a/content/App.tsx b/content/App.tsx index 9ecb9d7d4..b50e22bee 100644 --- a/content/App.tsx +++ b/content/App.tsx @@ -77,7 +77,6 @@ const InnerApp: FC = ({ Component, pageProps }) => { const App: FC = (props) => { const { t } = useTranslation(); - return ( <> diff --git a/content/BurnPage.tsx b/content/BurnPage.tsx new file mode 100644 index 000000000..046f86ecb --- /dev/null +++ b/content/BurnPage.tsx @@ -0,0 +1,15 @@ +import InputBadge from 'components/InputBadge'; +import Head from 'next/head'; +import { useTranslation } from 'react-i18next'; + +export default function BurnDebt() { + const { t } = useTranslation(); + return ( + <> + + {t('burn.title')} + + {}} /> + + ); +} diff --git a/package.json b/package.json index cf41ed92d..a427d44fd 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ }, "dependencies": { "@artsy/fresnel": "^1.8.0", + "@chakra-ui/icons": "^2.0.8", "@chakra-ui/react": "^2.2.8", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", diff --git a/pages/burn.tsx b/pages/burn.tsx new file mode 100644 index 000000000..d88c74413 --- /dev/null +++ b/pages/burn.tsx @@ -0,0 +1,9 @@ +import dynamic from 'next/dynamic'; +import GlobalLoader from 'components/GlobalLoader'; + +const BurnPage = dynamic(() => import('content/BurnPage'), { + ssr: false, + loading: GlobalLoader, +}); + +export default BurnPage; diff --git a/translations/en.json b/translations/en.json index 32fe6b500..240f73a04 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1542,5 +1542,8 @@ "pools": "pools", "bridge": "bridge", "migrate-escrow": "migrate escrow" + }, + "burn": { + "title": "Burn Debt" } } diff --git a/yarn.lock b/yarn.lock index 011505b69..6d27bf2cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1701,6 +1701,18 @@ __metadata: languageName: node linkType: hard +"@chakra-ui/icons@npm:^2.0.8": + version: 2.0.8 + resolution: "@chakra-ui/icons@npm:2.0.8" + dependencies: + "@chakra-ui/icon": 3.0.8 + peerDependencies: + "@chakra-ui/system": ">=2.0.0" + react: ">=18" + checksum: b94a9a2db439d35566874d1c14cec79402b88edd83ce05d8bf962d99550315d87766ae8c277f5e1c4f20672c21d511a1b08f168535ced6e272d84823c84d241a + languageName: node + linkType: hard + "@chakra-ui/image@npm:2.0.9": version: 2.0.9 resolution: "@chakra-ui/image@npm:2.0.9" @@ -14678,6 +14690,7 @@ __metadata: resolution: "staking@workspace:." dependencies: "@artsy/fresnel": ^1.8.0 + "@chakra-ui/icons": ^2.0.8 "@chakra-ui/react": ^2.2.8 "@emotion/react": ^11.10.0 "@emotion/styled": ^11.10.0 From 345dc51aa85252070a0a404d532051c312e2f422 Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Tue, 23 Aug 2022 08:35:31 +0200 Subject: [PATCH 2/2] feat(input-badge): removed styled components --- components/InputBadge/index.tsx | 37 ++++++++++++++++++++------------- content/BurnPage.tsx | 10 ++++++++- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/components/InputBadge/index.tsx b/components/InputBadge/index.tsx index 2058dd3c8..3e32daf06 100644 --- a/components/InputBadge/index.tsx +++ b/components/InputBadge/index.tsx @@ -1,14 +1,13 @@ import { InfoIcon } from '@chakra-ui/icons'; -import { Badge, BadgeProps, Flex, Text } from '@chakra-ui/react'; +import { Badge, BadgeProps, Fade, Flex, Text } from '@chakra-ui/react'; import { PropsWithChildren } from 'react'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; interface InputBadgeProps { colorScheme?: BadgeProps['colorScheme']; text: string; onClickIcon?: () => void; onClick?: () => void; + active: boolean; } export default function InputBadge({ @@ -16,23 +15,33 @@ export default function InputBadge({ text, onClickIcon, onClick, + active, }: PropsWithChildren) { return ( - - + + - + {text} - {onClickIcon && } + {onClickIcon && ( + + )} - + ); } - -const StyledAnimatedWrapper = styled(motion.div)` - min-width: 170px; - border: 1px solid black; - cursor: pointer; -`; diff --git a/content/BurnPage.tsx b/content/BurnPage.tsx index 046f86ecb..65342eecb 100644 --- a/content/BurnPage.tsx +++ b/content/BurnPage.tsx @@ -1,15 +1,23 @@ import InputBadge from 'components/InputBadge'; import Head from 'next/head'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; export default function BurnDebt() { const { t } = useTranslation(); + const [active, setActive] = useState(false); return ( <> {t('burn.title')} - {}} /> + setActive(!active)} + onClickIcon={() => {}} + active={active} + /> ); }