116 lines
3.2 KiB
TypeScript
116 lines
3.2 KiB
TypeScript
import { marketPrices } from '@/data/market'
|
|
|
|
const prices = marketPrices.slice(0, 4)
|
|
|
|
export default function SnapshotBar() {
|
|
return (
|
|
<div
|
|
style={{
|
|
borderBottom: '2px solid var(--ink)',
|
|
backgroundColor: 'var(--paper-2)',
|
|
direction: 'rtl',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(4, 1fr)',
|
|
}}
|
|
className="mq-stack-2 max-w-7xl mx-auto w-full px-12 max-md:px-6 max-md:grid-cols-2"
|
|
>
|
|
{prices.map((price, idx) => {
|
|
const isLast = idx === prices.length - 1
|
|
const isUp = price.trend === 'up'
|
|
const isDown = price.trend === 'down'
|
|
const arrow = isUp ? '↑' : isDown ? '↓' : '—'
|
|
const changeColor = isUp
|
|
? 'var(--green-ink)'
|
|
: isDown
|
|
? 'var(--red)'
|
|
: 'var(--ink-4)'
|
|
|
|
return (
|
|
<div
|
|
key={price.id}
|
|
style={{
|
|
padding: '24px 0',
|
|
borderRight: isLast ? 'none' : '1px solid var(--rule-thin)',
|
|
paddingLeft: idx === 0 ? '0' : '28px',
|
|
paddingRight: idx === prices.length - 1 ? '0' : '28px',
|
|
}}
|
|
className={`max-md:${
|
|
idx % 2 === 1
|
|
? 'border-r-0'
|
|
: idx < 2
|
|
? 'border-b border-[var(--rule-thin)]'
|
|
: ''
|
|
}`}
|
|
>
|
|
{/* Label */}
|
|
<div
|
|
style={{
|
|
fontSize: 11,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '2px',
|
|
color: 'var(--ink-5)',
|
|
marginBottom: 8,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{price.name}
|
|
</div>
|
|
|
|
{/* Value */}
|
|
<div
|
|
style={{
|
|
fontSize: '22px',
|
|
fontWeight: 900,
|
|
letterSpacing: '-0.5px',
|
|
color: 'var(--ink)',
|
|
lineHeight: 1.1,
|
|
marginBottom: '4px',
|
|
}}
|
|
>
|
|
{price.value.toLocaleString('fa-IR')}
|
|
</div>
|
|
|
|
{/* Change row */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: '11px',
|
|
fontWeight: 700,
|
|
color: changeColor,
|
|
}}
|
|
>
|
|
{arrow}{' '}
|
|
{Math.abs(price.changePercent).toLocaleString('fa-IR', {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
})}
|
|
٪
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontSize: '10px',
|
|
color: 'var(--ink-4)',
|
|
fontWeight: 400,
|
|
}}
|
|
>
|
|
{price.unit}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|