@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
28 lines • 1.37 kB
JSX
"use client";
import { motion } from "motion/react";
import { format } from "../../../../lib/utils";
import { Tick as Style } from "./Orderbook.styled";
export function Tick({ price, balance, max, onClick, onMouseEnter }) {
return (<Style key={price} onClick={(e) => onClick?.(e)} onMouseEnter={(e) => onMouseEnter?.(e)} as={motion.div} initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.9, opacity: 0 }} transition={{ duration: 0.3 }} layout>
<div>
<div>
<div>
<span>{format(balance, "currency", { unit: 9, limit: 12, fix: 3 })}</span>
</div>
<div style={{
backgroundSize: `${(parseFloat(balance.toString()) / max) * 100 > 100
? "100"
: (parseFloat(balance.toString()) / max) * 100 < 0
? "0"
: (parseFloat(balance.toString()) / max) * 100}% 100%`,
}}>
<span>{format(price, "currency", { unit: 9, limit: 12, fix: 3 })}</span>
</div>
</div>
</div>
{/* <div>
<Controls.Button>Order</Controls.Button>
</div> */}
</Style>);
}
//# sourceMappingURL=Tick.jsx.map