blockworks-foundation
/
mango-web
mirror of https://github.com/blockworks-foundation/mango-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

flex that market card

This commit is contained in:
Maximilian Schneider 2021-07-18 21:43:13 +02:00
parent 0d8e3d604e
commit c986eeb7aa
2 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
components/MarketCard.tsx
View File

@ -1,6 +1,13 @@
import moment from 'moment'
import { useEffect, useState } from 'react'
import { AreaChart, Area, ReferenceLine, XAxis, YAxis, ResponsiveContainer} from 'recharts'
import {
AreaChart,
Area,
ReferenceLine,
XAxis,
YAxis,
ResponsiveContainer,
} from 'recharts'
import tailwindConfig from '../tailwind.config.js'
import PercentPill from './PercentPill'
@ -62,50 +69,44 @@ const MarketCard = (props: MarketCardProps) => {
const colors = tailwindConfig.theme.extend.colors
return (
<div className="flex-1 m-4">
<div className="flex lg:flex-row md:flex-row sm:flex-row xs:flex-col-reverse bg-th-fgd-4 rounded-lg py-4 px-4 h-auto w-full shadow-md lg:divide-x-2 md:divide-x-2 sm:divide-x-2 divide-white divide-opacity-10">
<div className="">
<div className="">
<img
className="inline-block h-5 w-5 mr-1"
src={props.icon}
alt={props.name}
/>
<p className="inline-block align-middle">{props.name}</p>
<div className="m-4 w-full md:w-60">
<div className="flex flex-col bg-th-fgd-4 rounded-lg py-4 px-4 h-auto shadow-md">
<div className="flex flex-row gap-x-2 align-bottom">
<div className="flex flex-col flex-auto">
<p className="text-sm">{props.name}</p>
<p className="text-2xl">${format(price, props.decimals)}</p>
</div>
<div className="flex flex-row flex-wrap gap-x-2">
<p className="text-xl">${format(price, props.decimals)}</p>
<PercentPill value={change} />
</div>
<div className="mt-2 text-md">
<p className="text-white text-opacity-40">Volume:</p> {format(volume)} {props.name.split('/')[0]}
<div className="flex w-full">
{graph.length > 0 && (
<ResponsiveContainer>
<AreaChart data={graph}>
<ReferenceLine
y={0}
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
strokeDasharray="3 3"
strokeOpacity={0.6}
/>
<Area
isAnimationActive={false}
type="monotone"
dataKey="p"
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
fill={colors[`secondary-${change > 0 ? 1 : 2}`].dark}
fillOpacity={0.1}
/>
<XAxis dataKey="t" hide />
<YAxis dataKey="p" hide />
</AreaChart>
</ResponsiveContainer>
)}
</div>
</div>
<div className="flex align-middle">
{graph.length > 0 && (
<ResponsiveContainer width={80} height={80}>
<AreaChart data={graph}>
<ReferenceLine
y={0}
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
strokeDasharray="3 3"
strokeOpacity={0.6}
/>
<Area
isAnimationActive={false}
type="monotone"
dataKey="p"
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
fill={colors[`secondary-${change > 0 ? 1 : 2}`].dark}
fillOpacity={0.1}
/>
<XAxis dataKey="t" hide />
<YAxis dataKey="p" hide />
</AreaChart>
</ResponsiveContainer>
)}
<div className="flex flex-row gap-x-2 mt-1 items-center">
<PercentPill value={change} />
<p className="text-sm text-white text-opacity-70">
Vol: {format(volume)} {props.name.split('/')[0]}
</p>
</div>
</div>
</div>

8
components/TradeSection.tsx
View File

@ -10,16 +10,16 @@ const TradeSection = () => {
<div className="max-w-7xl mx-auto px-4 transform skew-y-3">
<section className="py-12 px-3 lg:mt-0 md:mt-0 sm:mt-28 ">
<div className="max-w-7xl mx-auto">
<div className="flex flex-wrap">
<div className="flex flex-row flex-wrap">
<MarketCard
name="BTC/USDC"
icon="../token/icon-btc.svg"
decimals={2}
decimals={0}
/>
<MarketCard
name="ETH/USDC"
icon="../token/icon-eth.svg"
decimals={2}
decimals={0}
/>
<MarketCard
name="SOL/USDC"
@ -29,7 +29,7 @@ const TradeSection = () => {
<MarketCard
name="SRM/USDC"
icon="../token/icon-srm.svg"
decimals={2}
decimals={4}
/>
</div>
</div>