From 07be6c35ef3bc63c5efff3d2ab8076998de50b82 Mon Sep 17 00:00:00 2001
From: Jose <jose.zdy@gmail.com>
Date: Mon, 5 Apr 2021 16:48:52 -0500
Subject: [PATCH] Artwork view (#45)

* MainAuctionCard

* trending auctions

* fix scroll, reduce padding

* fixing errors/warnings and formatting

* formatting & sold auctions

* artists cards

* initial presale banner. move sample data to own file

* new home layout

* presale banner image fix

* countdown implementation

* initial artwork implementation

Co-authored-by: B <264380+bartosz-lipinski@users.noreply.github.com>
---
 packages/metavinci/src/views/art/index.less   | 31 ++++++++
 packages/metavinci/src/views/art/index.tsx    | 70 ++++++++++++-------
 packages/metavinci/src/views/home/index.tsx   |  2 +
 .../metavinci/src/views/home/sampleData.ts    | 24 +++----
 4 files changed, 91 insertions(+), 36 deletions(-)
 create mode 100644 packages/metavinci/src/views/art/index.less

diff --git a/packages/metavinci/src/views/art/index.less b/packages/metavinci/src/views/art/index.less
new file mode 100644
index 0000000..7788bbe
--- /dev/null
+++ b/packages/metavinci/src/views/art/index.less
@@ -0,0 +1,31 @@
+
+.artwork-image {
+  margin: 30px auto;
+  width: 70%;
+  max-width: 500px;
+  border-radius: 10px;
+}
+
+.artist-image {
+  width: 35px;
+  border-radius: 50%;
+}
+
+.info-header {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: normal;
+  margin-bottom: 1vh;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.info-content {
+  width: 90%;
+}
+
+.royalties {
+  font-weight: 700;
+  font-size: 2rem;
+}
diff --git a/packages/metavinci/src/views/art/index.tsx b/packages/metavinci/src/views/art/index.tsx
index 253a979..3589a7c 100644
--- a/packages/metavinci/src/views/art/index.tsx
+++ b/packages/metavinci/src/views/art/index.tsx
@@ -1,38 +1,60 @@
 import React from 'react';
-import { Row, Col, Card } from 'antd';
+import { Row, Col, Divider, Layout } from 'antd';
 import { useParams } from 'react-router-dom';
-import { useArt } from './../../hooks';
+// import { useArt } from './../../hooks';
+
+import "./index.less"
+
+const { Content } = Layout
 
 export const ArtView = () => {
   const { id } = useParams<{ id: string }>();
-  const art = useArt(id);
+  // const art = useArt(id);
 
-  const image = `img/auction2.jpg`
+  const art = {
+    image: 'img/auction3.jpg',
+    link: '/art/1234abcd',
+    title: 'nostalgic vibes',
+    artist: 'nftartist',
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617680325000,
+
+    royalties: 20,
+    about: "Series of three works by Mssingno & Natalia Stuyk 'Mirada' mp4, 30fps, 1080px x 1350px April 2021",
+  }
+
+  const artist = {
+    image: '/img/artist3.jpeg',
+    about: "NFTARTIST is an Artist & Director working in entertainment for the past 15 years. Experience in film, commercial and live events, his work serves as a means to visual and methodological study.",
+  }
 
   return (
-    <Row>
-      <Col span={12} offset={6}>
+    <Content>
+      <Col>
         <Row>
-          <Card className="custom-card" cover={<img src={image} />}>
-
-          </Card>
+          <img src={art.image} className="artwork-image" />
         </Row>
-        <Row>
-          <h2>Title</h2>
-        </Row>
-        <Row>
-          <label>Created By</label>
-          <h2>Title</h2>
-        </Row>
-        <Row>
-          <label>Creator Royalties</label>
-          <h2>Title</h2>
-        </Row>
-        <Row>
-          <label>About the Creation</label>
-          <h2>Title</h2>
+        <Divider />
+        <Row style={{ margin: '0 30px' }}>
+          <Col span={12} style={{ textAlign: 'left', fontSize: '1.4rem' }}>
+            <div style={{ fontWeight: 700 }}>{art.title}</div>
+            <br />
+            <div className="info-header">CREATED BY</div>
+            <div className="info-content"><img src={artist.image} className="artist-image" /> @{art.artist}</div>
+            <br />
+            <div className="info-header">CREATOR ROYALTIES</div>
+            <div className="royalties">{art.royalties}%</div>
+            <br />
+            <div className="info-header">ABOUT THE CREATION</div>
+            <div className="info-content">{art.about}</div>
+            <br />
+            <div className="info-header">ABOUT THE CREATOR</div>
+            <div className="info-content">{artist.about}</div>
+          </Col>
+          <Col span={12}></Col>
         </Row>
       </Col>
-    </Row>
+    </Content>
   );
 };
diff --git a/packages/metavinci/src/views/home/index.tsx b/packages/metavinci/src/views/home/index.tsx
index 0a3f63f..eec0abb 100644
--- a/packages/metavinci/src/views/home/index.tsx
+++ b/packages/metavinci/src/views/home/index.tsx
@@ -6,6 +6,7 @@ import { Art } from '../../types'
 import { PreSaleBanner } from '../../components/PreSaleBanner'
 import { ItemCard } from '../../components/ItemCard'
 import { sampleArts } from './sampleData'
+import { useMeta } from '../../contexts/meta'
 
 import './index.less'
 
@@ -14,6 +15,7 @@ const { Content } = Layout
 
 export const HomeView = () => {
   // TODO: fetch real data
+  const { accounts } = useMeta()
   const arts: Array<Art> = sampleArts
 
   const breakpointColumnsObj = {
diff --git a/packages/metavinci/src/views/home/sampleData.ts b/packages/metavinci/src/views/home/sampleData.ts
index 3bc094f..bbc1aeb 100644
--- a/packages/metavinci/src/views/home/sampleData.ts
+++ b/packages/metavinci/src/views/home/sampleData.ts
@@ -107,7 +107,7 @@ export const sampleArts: Array<Art> = [
     artist: 'cryptokitties',
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction4.jpg",
@@ -116,7 +116,7 @@ export const sampleArts: Array<Art> = [
     artist: "RAC",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction1.jpg",
@@ -125,7 +125,7 @@ export const sampleArts: Array<Art> = [
     artist: "cryptokitties",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction2.jpg",
@@ -134,7 +134,7 @@ export const sampleArts: Array<Art> = [
     artist: "artworkwizard",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction3.jpg",
@@ -143,7 +143,7 @@ export const sampleArts: Array<Art> = [
     artist: "NFTSNEAKERS",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction3.jpg",
@@ -152,7 +152,7 @@ export const sampleArts: Array<Art> = [
     artist: "NFTSNEAKERS",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: 'img/auction2.jpg',
@@ -161,7 +161,7 @@ export const sampleArts: Array<Art> = [
     artist: 'artworkwizard',
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: 'img/auction3.jpg',
@@ -170,7 +170,7 @@ export const sampleArts: Array<Art> = [
     artist: 'NFTSNEAKERS',
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: 'img/auction4.jpg',
@@ -179,7 +179,7 @@ export const sampleArts: Array<Art> = [
     artist: 'RAC',
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction4.jpg",
@@ -188,7 +188,7 @@ export const sampleArts: Array<Art> = [
     artist: "RAC",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction1.jpg",
@@ -197,7 +197,7 @@ export const sampleArts: Array<Art> = [
     artist: "cryptokitties",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
   {
     image: "http://localhost:3000/img/auction2.jpg",
@@ -206,6 +206,6 @@ export const sampleArts: Array<Art> = [
     artist: "artworkwizard",
     priceSOL: 1.1,
     priceUSD: 24,
-    endingTS: 1617843346000,
+    endingTS: 1617680325000,
   },
 ]