NFT市场

src/views/Bazaar/components/Content.tsx

@@ -5,11 +5,9 @@ import { Heading, Flex, Button, Text, Input, Image, useModal, Dropdown } from '@
 import { useAccount } from 'state/userInfo/hooks'
 import useRefresh from 'hooks/useRefresh'
 
+import HeaderOperation from './HeaderOperation'
+import ContentShop from './ContentShop'
 import Transaction from './Transaction'
-import ShopList from './ShopList'
-import TransactionRecord from './TransactionRecord'
-import AuctionRecord from './AuctionRecord'
-import SellModal from './SellModal'
 import ShopDetail from './ShopDetail'
 
 const HeaderFlex = styled(Flex)`
@@ -40,52 +38,6 @@ const TypeItem = styled(Flex)`
   cursor: pointer;
   border-radius: 30px;
 `
-const HeaderButton = styled(Button)`
-  width: 110px;
-  height: 40px;
-  border: 1px solid #1fc7d4;
-  border-radius: 30px;
-  font-size: 14px;
-  color: #1fc7d4;
-  background-color: #fff;
-
-  ${({ theme }) => theme.mediaQueries.xs} {
-    margin-top: 10px;
-    margin-right: 20px;
-    margin-left: 0px;
-  }
-  ${({ theme }) => theme.mediaQueries.lg} {
-    margin-top: 0px;
-    margin-left: 20px;
-    margin-right: 0px;
-  }
-`
-const TransactionFlex = styled(Flex)`
-  margin-top: 30px;
-  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
-  border-radius: 13px;
-  padding: 30px 0px 40px 0px;
-  justify-content: space-between;
-  align-items: center;
-`
-const TransactionItem = styled(Flex)`
-  width: 25%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`
-const TransactionItemNum = styled(Text)`
-  font-size: 38px;
-  color: #ffffff;
-`
-const TransactionItemLabel = styled(Text)`
-  font-size: 16px;
-  color: #e4f8f7;
-`
-const Separate = styled.div`
-  height: 44px;
-  border-right: 1px solid #e4f8f7;
-`
 const StatusFlex = styled(Flex)`
   justify-content: space-between;
   align-items: center;
@@ -149,53 +101,6 @@ const SearchBtn = styled.div`
   justify-content: center;
 `
 
-const ShopMain = styled.div`
-  width: 100%;
-  display: grid;
-  gap: 18px;
-  grid-template-rows: 1fr;
-  margin: 0px auto;
-  grid-template-columns: repeat(4, 1fr);
-  box-sizing: border-box;
-  cursor: pointer;
-  ${({ theme }) => theme.mediaQueries.xs} {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  ${({ theme }) => theme.mediaQueries.md} {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  ${({ theme }) => theme.mediaQueries.lg} {
-    grid-template-columns: repeat(4, 1fr);
-  }
-`
-const ShopFlex = styled(Flex)`
-  flex-direction: column;
-  background: rgba(255, 255, 255, 0.39);
-  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
-  opacity: 1;
-  border-radius: 20px;
-  position: relative;
-`
-
-const ShopName = styled(Text)`
-  padding: 10px 0 14px 0;
-  text-align: center;
-  font-size: 18px;
-  color: #666666;
-  border-bottom: 1px solid #e3e3e3;
-`
-const ShopFooter = styled(Flex)`
-  padding: 15px;
-  justify-content: space-between;
-`
-const FooterLabel = styled(Text)`
-  font-size: 14px;
-  color: #999999;
-`
-const FooterValue = styled(Text)`
-  font-size: 16px;
-  color: #1fc7d4;
-`
 const SelectFlex = styled(Flex)`
   align-items: center;
   cursor: pointer;
@@ -263,9 +168,6 @@ const Content: React.FC = () => {
     setStatusIndex(index)
   }
 
-  const [onTransactionRecord] = useModal(<TransactionRecord />)
-  const [onAuctionRecord] = useModal(<AuctionRecord />)
-  const [onSellModal] = useModal(<SellModal />)
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { value: inputValue } = evt.target
     setSearchTitle(inputValue)
@@ -297,15 +199,8 @@ const Content: React.FC = () => {
                 )
               })}
             </TypeFlex>
-            <Flex alignContent="center">
+
-              <HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
+            <HeaderOperation activeIndex={typeIndex} />
-              {/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
-              {typeIndex === 2 ? (
-                <HeaderButton onClick={onAuctionRecord}>{t('Auctions a record')}</HeaderButton>
-              ) : (
-                <HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
-              )}
-            </Flex>
           </HeaderFlex>
           <Transaction />
           <StatusFlex>
@@ -371,20 +266,7 @@ const Content: React.FC = () => {
               </SearchBtn>
             </InputMain>
           </SearchDiv>
-          <ShopMain>
+          <ContentShop list={list} getDetail={showDetail} />
-            {list.map((item) => {
-              return (
-                <ShopFlex key={item.id} onClick={showDetail}>
-                  <ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
-                  <ShopName>{item.label}</ShopName>
-                  <ShopFooter>
-                    <FooterLabel>{t('trading value')}</FooterLabel>
-                    <FooterValue>1000HCC</FooterValue>
-                  </ShopFooter>
-                </ShopFlex>
-              )
-            })}
-          </ShopMain>
         </>
       )}
     </>

src/views/Bazaar/components/ContentShop.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react'
+import styled, { keyframes } from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Text } from '@pancakeswap/uikit'
+import { useAccount } from 'state/userInfo/hooks'
+import useRefresh from 'hooks/useRefresh'
+
+import ShopList from './ShopList'
+
+interface ContentShop {
+  list?: any
+  getDetail?: () => void
+}
+
+const ShopMain = styled.div`
+  width: 100%;
+  display: grid;
+  gap: 18px;
+  grid-template-rows: 1fr;
+  margin: 0px auto;
+  grid-template-columns: repeat(4, 1fr);
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`
+const ShopFlex = styled(Flex)`
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
+  opacity: 1;
+  border-radius: 20px;
+  position: relative;
+`
+
+const ShopName = styled(Text)`
+  padding: 10px 0 14px 0;
+  text-align: center;
+  font-size: 18px;
+  color: #666666;
+  border-bottom: 1px solid #e3e3e3;
+`
+const ShopFooter = styled(Flex)`
+  padding: 15px;
+  justify-content: space-between;
+`
+const FooterLabel = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+`
+const FooterValue = styled(Text)`
+  font-size: 16px;
+  color: #1fc7d4;
+`
+
+const ContentShop: React.FC<ContentShop> = ({ list, getDetail }) => {
+  const { t } = useTranslation()
+  const showDetail = () => {
+    getDetail()
+  }
+
+  return (
+    <ShopMain>
+      {list.map((item) => {
+        return (
+          <ShopFlex key={item.id} onClick={showDetail}>
+            <ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
+            <ShopName>{item.label}</ShopName>
+            <ShopFooter>
+              <FooterLabel>{t('trading value')}</FooterLabel>
+              <FooterValue>1000HCC</FooterValue>
+            </ShopFooter>
+          </ShopFlex>
+        )
+      })}
+    </ShopMain>
+  )
+}
+export default ContentShop

src/views/Bazaar/components/HeaderOperation.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+import styled, { keyframes } from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Button, Text, Input, Image, useModal, Dropdown } from '@pancakeswap/uikit'
+import { useAccount } from 'state/userInfo/hooks'
+import useRefresh from 'hooks/useRefresh'
+
+import TransactionRecord from './TransactionRecord'
+import AuctionRecord from './AuctionRecord'
+import SellModal from './SellModal'
+
+interface HeaderOperationProps {
+  activeIndex?: number
+}
+
+const HeaderButton = styled(Button)`
+  width: 110px;
+  height: 40px;
+  border: 1px solid #1fc7d4;
+  border-radius: 30px;
+  font-size: 14px;
+  color: #1fc7d4;
+  background-color: #fff;
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 10px;
+    margin-right: 20px;
+    margin-left: 0px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 0px;
+    margin-left: 20px;
+    margin-right: 0px;
+  }
+`
+
+const HeaderOperation: React.FC<HeaderOperationProps> = ({ activeIndex }) => {
+  const { t } = useTranslation()
+
+  const [onTransactionRecord] = useModal(<TransactionRecord />)
+  const [onAuctionRecord] = useModal(<AuctionRecord />)
+  const [onSellModal] = useModal(<SellModal />)
+
+  return (
+    <Flex alignContent="center">
+      <HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
+      {/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
+      {activeIndex === 2 ? (
+        <HeaderButton onClick={onAuctionRecord}>{t('Auctions a record')}</HeaderButton>
+      ) : (
+        <HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
+      )}
+    </Flex>
+  )
+}
+export default HeaderOperation