feat: add tabs

packages/metavinci/src/App.less

@@ -52,3 +52,26 @@ code {
     margin: 0px;
   }
 }
+
+.ant-tabs-tab-active {
+
+}
+
+.tab-title {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 26px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.02em;
+
+  color: @text-color-secondary;
+}
+
+.ant-tabs-tab-active {
+  .tab-title {
+    color: @text-color;
+  }
+}

packages/metavinci/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useArt';
+export * from './useAuctions';

packages/metavinci/src/hooks/useAuctions.tsx

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { useMeta } from './../contexts';
+
+export enum AuctionState {
+  Live = '0',
+  Upcoming = '1',
+  Ended = '2',
+  BuyNow = '3',
+}
+
+export const useAuctions = (state: AuctionState) => {
+  const { metadata } = useMeta();
+
+  return metadata;
+}

packages/metavinci/src/views/home/index.tsx

@@ -1,17 +1,20 @@
-import React from 'react'
-import { Layout, Row, Col } from 'antd'
+import React, { useState } from 'react'
+import { Layout, Row, Col, Tabs } from 'antd'
 import Masonry from 'react-masonry-css'
 
 import { PreSaleBanner } from '../../components/PreSaleBanner'
-import { useMeta } from '../../contexts/meta'
+import { AuctionState, useAuctions } from '../../hooks'
 
 import './index.less'
 import { ArtCard } from '../../components/ArtCard'
 import { Link } from 'react-router-dom'
 
+const { TabPane } = Tabs;
+
 const { Content } = Layout
 export const HomeView = () => {
-  const { metadata } = useMeta()
+  const [activeKey, setActiveKey] = useState(AuctionState.Live);
+  const auctions = useAuctions(AuctionState.Live)
 
   const breakpointColumnsObj = {
     default: 4,
@@ -20,6 +23,25 @@ export const HomeView = () => {
     500: 1
   }
 
+  const auctionGrid = <Masonry
+      breakpointCols={breakpointColumnsObj}
+      className="my-masonry-grid"
+      columnClassName="my-masonry-grid_column"
+    >
+    {auctions.map(m => {
+      const id = m.pubkey.toBase58();
+      return <Link to={`/art/${id}`}>
+        <ArtCard key={id}
+          image={m.info.extended?.image}
+          category={m.info.extended?.category}
+          name={m.info?.name}
+          symbol={m.info.symbol}
+          description={m.info.extended?.description}
+          preview={false} />
+        </Link>
+    })}
+    </Masonry>;
+
   return (
     <Layout style={{ margin: 0, marginTop: 30 }}>
       <PreSaleBanner
@@ -30,27 +52,34 @@ export const HomeView = () => {
       />
       <Layout>
         <Content style={{ display: 'flex', flexWrap: 'wrap' }}>
-          <Col style={{ width: '100%' }}>
-            <Row style={{ marginTop: 20, fontSize: 20, fontWeight: 600 }}>Featured</Row>
+          <Col style={{ width: '100%', marginTop: 10 }}>
             <Row>
-              <Masonry
-                breakpointCols={breakpointColumnsObj}
-                className="my-masonry-grid"
-                columnClassName="my-masonry-grid_column"
-              >
-              {metadata.map(m => {
-                const id = m.pubkey.toBase58();
-                return <Link to={`/art/${id}`}>
-                  <ArtCard key={id}
-                    image={m.info.extended?.image}
-                    category={m.info.extended?.category}
-                    name={m.info?.name}
-                    symbol={m.info.symbol}
-                    description={m.info.extended?.description}
-                    preview={false} />
-                  </Link>
-              })}
-              </Masonry>
+              <Tabs activeKey={activeKey} onTabClick={(key) => setActiveKey(key as AuctionState)}>
+                <TabPane
+                  tab={<span className="tab-title">Live</span>}
+                  key={AuctionState.Live}
+                >
+                  {auctionGrid}
+                </TabPane>
+                <TabPane
+                  tab={<span className="tab-title">Upcoming</span>}
+                  key={AuctionState.Upcoming}
+                >
+                  {auctionGrid}
+                </TabPane>
+                <TabPane
+                  tab={<span className="tab-title">Ended</span>}
+                  key={AuctionState.Ended}
+                >
+                  {auctionGrid}
+                </TabPane>
+                <TabPane
+                  tab={<span className="tab-title">Buy Now</span>}
+                  key={AuctionState.BuyNow}
+                >
+                  {auctionGrid}
+                </TabPane>
+              </Tabs>
             </Row>
           </Col>
         </Content>