mirror of https://github.com/certusone/oyster.git
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>
This commit is contained in:
Jose
GitHub
parent
b45396f3eb
commit
07be6c35ef
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue