From 6ba74e0925050f6c41a0ac433451c5cee533e7ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E8=8A=AF=E9=88=B4?= <116002213+Hsin1025@users.noreply.github.com> Date: Fri, 14 Jul 2023 12:37:39 +0800 Subject: [PATCH] refractor: split code to community.tsx --- src/components/Community.tsx | 97 ++++++ src/components/Profile.tsx | 618 ++++++++++++++++++++++------------- 2 files changed, 488 insertions(+), 227 deletions(-) create mode 100644 src/components/Community.tsx diff --git a/src/components/Community.tsx b/src/components/Community.tsx new file mode 100644 index 0000000..f2ed4fd --- /dev/null +++ b/src/components/Community.tsx @@ -0,0 +1,97 @@ +import { + Center, + Text, + Button, + useColorModeValue, + Wrap, +} from '@chakra-ui/react'; +import { + FaDiscord, + FaLinkedin, + FaMediumM, + FaReddit, + FaTwitter, +} from 'react-icons/fa'; +import { BsInstagram, BsTelegram } from 'react-icons/bs'; +import { useTranslation } from 'react-i18next'; + +const communityList = [ + { + href: 'https://discord.gg/DfVSwYprvK', + icon: , + text: 'Discord', + }, + { + href: 'links.twitter', + icon: , + text: 'Twitter', + }, + { + href: 'https://t.me/TG_Crypto_Arsenal', + icon: , + text: 'Telegram', + }, + { + href: 'links.instagram', + icon: , + text: 'Instagram', + }, + { + href: 'links.medium', + icon: , + text: 'Medium', + }, + { + href: 'https://www.linkedin.com/company/crypto-arsenal', + icon: , + text: 'LinkedIn', + }, + { + href: 'https://www.reddit.com/r/CryptoArsenal', + icon: , + text: 'Reddit', + }, + { + href: 'https://www.tradingview.com/u/Crypto-Arsenal/', + icon: ( + <> + + + + + + ), + text: 'TradingView', + }, +]; + +export default function Community() { + const { t } = useTranslation(); + return ( + + {communityList.map((community) => ( + + ))} + + ); +} diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 0f6225a..fb3525d 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -29,19 +29,53 @@ import { ListIcon, ListItem, useClipboard, - HStack + HStack, } from '@chakra-ui/react'; -import { TbMathFunction, TbNumber1, TbNumber2 } from 'react-icons/tb' +import { TbMathFunction, TbNumber1, TbNumber2 } from 'react-icons/tb'; import { FcGlobe, FcGoogle } from 'react-icons/fc'; -import { FaCaretDown, FaCaretUp, FaCode, FaDiscord, FaExpand, FaFacebook, FaInfo, FaInfoCircle, FaInstagram, FaLinkedin, FaMediumM, FaReddit, FaRobot, FaTelegram, FaTv, FaTwitter } from 'react-icons/fa'; -import { SiJirasoftware, SiLinkedin, SiMessenger, SiTelegram } from 'react-icons/si'; +import { + FaCaretDown, + FaCaretUp, + FaCode, + FaDiscord, + FaExpand, + FaFacebook, + FaInfo, + FaInfoCircle, + FaInstagram, + FaLinkedin, + FaMediumM, + FaReddit, + FaRobot, + FaTelegram, + FaTv, + FaTwitter, +} from 'react-icons/fa'; +import { + SiJirasoftware, + SiLinkedin, + SiMessenger, + SiTelegram, +} from 'react-icons/si'; import Verified from 'public/assets/images/verified.svg'; -import { BsCaretDown, BsFileWordFill, BsGiftFill, BsGlobe, BsGlobe2, BsInstagram, BsJournalBookmark, BsLink, BsPeople, BsPeopleFill, BsTelegram } from 'react-icons/bs'; +import { + BsCaretDown, + BsFileWordFill, + BsGiftFill, + BsGlobe, + BsGlobe2, + BsInstagram, + BsJournalBookmark, + BsLink, + BsPeople, + BsPeopleFill, + BsTelegram, +} from 'react-icons/bs'; import { ImInstagram } from 'react-icons/im'; import { CheckIcon, ExternalLinkIcon } from '@chakra-ui/icons'; import { useTranslation } from 'react-i18next'; - +import Community from '../components/Community'; const size = '96px'; const color = 'teal'; @@ -60,11 +94,12 @@ const pulseRing = keyframes` `; const ExpandableMeetTaipieButton = () => { - const { isOpen, onToggle } = useDisclosure() - const [isClicked, { on }] = useBoolean() + const { isOpen, onToggle } = useDisclosure(); + const [isClicked, { on }] = useBoolean(); - const { t } = useTranslation() - const { onCopy, value, setValue, hasCopied } = useClipboard("meettaipei2022"); + const { t } = useTranslation(); + const { onCopy, value, setValue, hasCopied } = + useClipboard('meettaipei2022'); return ( { p={'10px'} rounded={'lg'} // align={{ base: null, md: 'center' }} - border="1px solid #e3007f" + border='1px solid #e3007f' >
- + + {' '} + {' '} +
- - - {t("meetTaipei.title")} + + + + {' '} + {t('meetTaipei.title')} + - - {isOpen ? : } - - + {isOpen ? : } - + - Step 1️⃣: {t("meetTaipei.Join Discord and Receive Gift Code")} + + {' '} + Step 1️⃣:{' '} + {t( + 'meetTaipei.Join Discord and Receive Gift Code' + )} + {/* {t("meetTaipei.to receive steps & gift code")} */} @@ -144,12 +212,14 @@ const ExpandableMeetTaipieButton = () => { mr={1} rounded={'md'} onClick={on} - as="a" + as='a' href={t('links.twitter')} - target="_blank" + target='_blank' colorScheme={'twitter'} // variant={'outline'} - leftIcon={} size={'sm'}> + leftIcon={} + size={'sm'} + >
Twitter
@@ -158,14 +228,15 @@ const ExpandableMeetTaipieButton = () => { mr={1} rounded={'md'} onClick={on} - as="a" - href="https://t.me/TG_Crypto_Arsenal" - target="_blank" + as='a' + href='https://t.me/TG_Crypto_Arsenal' + target='_blank' colorScheme={'telegram'} // variant={'outline'} leftIcon={} // bg={useColorModeValue('gray.50', 'gray.800')} - size={'sm'}> + size={'sm'} + >
Telegram
@@ -174,74 +245,144 @@ const ExpandableMeetTaipieButton = () => { mr={1} rounded={'md'} onClick={on} - as="a" + as='a' href={t('links.instagram')} - target="_blank" + target='_blank' colorScheme={'red'} // variant={'outline'} leftIcon={} // bg={useColorModeValue('gray.50', 'gray.800')} - size={'sm'}> + size={'sm'} + >
Instagram
- {isClicked ? "🎁" : "🔐"} {isClicked ? 'meettaipei2022' : '********'} - + {isClicked ? '🎁' : '🔐'}{' '} + + {isClicked + ? 'meettaipei2022' + : '********'}{' '} + + - {t("meetTaipei.to receive steps & gift code")} - + + {' '} + {t( + 'meetTaipei.to receive steps & gift code' + )}{' '} + - Step 2️⃣: {t("meetTaipei.Sign Up and Unlock Starter Plan")} + + {' '} + Step 2️⃣:{' '} + {t( + 'meetTaipei.Sign Up and Unlock Starter Plan' + )}{' '} + {/* */} - {t("meetTaipei.Register and redeem the Gift Code")} ({t("meetTaipei.see tutorial")}) - + + {' '} + {t( + 'meetTaipei.Register and redeem the Gift Code' + )}{' '} + ( + + {t('meetTaipei.see tutorial')} + + ){' '} + - Step 3️⃣: {t("meetTaipei.Trade with the Pros")} + + {' '} + Step 3️⃣:{' '} + {t( + 'meetTaipei.Trade with the Pros' + )}{' '} + {/* */} - {t("meetTaipei.Trade with the best strategies from Alex's Trading League")} ({t("meetTaipei.see tutorial")}) - + + {' '} + {t( + "meetTaipei.Trade with the best strategies from Alex's Trading League" + )}{' '} + ( + + {t('meetTaipei.see tutorial')} + + ){' '} + - {/* @@ -306,14 +447,14 @@ const ExpandableMeetTaipieButton = () => { - - - ) -} + + + ); +}; const ExpandableButton = () => { - const { isOpen, onToggle } = useDisclosure() - const { t } = useTranslation() + const { isOpen, onToggle } = useDisclosure(); + const { t } = useTranslation(); return ( { p={'10px'} rounded={'lg'} // align={{ base: null, md: 'center' }} - border="1px solid #3F73FF" + border='1px solid #3F73FF' >
- + + {' '} + {' '} +
- - - {t("job.Join our Wordclass Team")} + + + + {t('job.Join our Wordclass Team')}{' '} + - - {isOpen ? : } - - + {isOpen ? : } - + - - {t("job.Quant Intership")} + + {t('job.Quant Intership')} - - {t("job.Backend Internship")} + + {t('job.Backend Internship')} - - {t("job.Frontend Internship")} + + {t('job.Frontend Internship')} - - {t("job.Marketing Internship")} + + {t('job.Marketing Internship')} - ) -} - + ); +}; export default function SocialProfileSimple() { - const { t } = useTranslation() - const banner = '/assets/images/banner.png' + const { t } = useTranslation(); + const banner = '/assets/images/banner.png'; return (
+ textAlign={'center'} + > - + Crypto Arsenal - - - - + + + + - + @CryptoAsrsena1 @@ -493,28 +698,39 @@ export default function SocialProfileSimple() { textAlign={'center'} letterSpacing={'wide'} color={useColorModeValue('gray.700', 'gray.400')} - px={3}> - Web2 & Web3 Crypto Bot Marketplace that Bridges the Gap Between Strategy Creators and Traders + px={3} + > + Web2 & Web3 Crypto Bot Marketplace that Bridges the Gap + Between Strategy Creators and Traders
- + 2k - {t("stats.Trading Bots")} + {t('stats.Trading Bots')} 6k - {t("stats.Users")} + {t('stats.Users')} 120M - - {t("stats.Trading Volume")} + + {t('stats.Trading Volume')} @@ -522,114 +738,46 @@ export default function SocialProfileSimple() { - - - - - - - - - - - - - + {/*
+ +
); }