@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).
177 lines • 10.8 kB
JSX
"use client";
import { Contents, Controls, Elements, Layouts } from "../../../../components";
import { AnimatePresence } from "motion/react";
import { useWindowSize } from "../../../../hooks";
import { Root } from "../../../../lib/style";
import { format } from "../../../../lib/utils";
import Image from "next/image";
import { Asset } from "../../../../prefabs";
import { useState } from "react";
export default function Position(props) {
const { windowSize } = useWindowSize();
const [mobile, setMobile] = useState("history");
const [history, setHistory] = useState(props?.history || []);
const handleBack = () => {
if (typeof props?.onBack === "function")
props?.onBack(undefined);
};
return (<AnimatePresence>
{props?.asset ? (<>
<Layouts.Contents.InnerContent>
<Layouts.Row fix style={{ alignItems: "center" }}>
<Layouts.Row fix style={{ alignItems: "center" }} gap={2} fit>
<Controls.Button scale={0.875} icon={"chevron-left"} style={{ padding: "1em" }} onClick={handleBack}/>
<Elements.Avatar size={4} img={require(`../../../../assets/coins/${props?.asset?.symbol?.toLocaleLowerCase() || "btc"}.png`)} style={{ marginLeft: "-1em" }}/>
<Layouts.Row responsive={"mobile"} gap={1} fit>
<Elements.Text size={2.5} height={1} case={"upper"} style={{ marginRight: "1em" }} responsive={{
device: "mobile",
size: 1.5,
}}>
{props?.asset?.symbol}
</Elements.Text>
<Elements.Text size={2.5} height={1} case={"capital"} responsive={{
device: "mobile",
size: 1.5,
}}>
{props?.asset?.name}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
<Layouts.Row fix align="right">
<Layouts.Row fix fit gap={1} style={{ alignItems: "center" }}>
<Elements.Text size={2.5} height={1} responsive={{
device: "mobile",
size: 2,
}} change>
$ {format("1,567,851,378.516", "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
</Layouts.Row>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider style={{ marginTop: "1em" }}/>
<Layouts.Col show={"mobile"} gap={0}>
<Layouts.Row gap={1} fix>
<Controls.Tab active={mobile === "info"} onClick={() => setMobile("info")}>
Info
</Controls.Tab>
<Controls.Tab active={mobile === "history"} onClick={() => setMobile("history")}>
History
</Controls.Tab>
<Controls.Tab active={mobile === "position"} onClick={() => setMobile("position")}>
Positions
</Controls.Tab>
</Layouts.Row>
<Layouts.Divider />
</Layouts.Col>
<Layouts.Contents.GridContainer fullsize area={`'info info' 'history position' 'history position'`} width={`${windowSize.width < Root.Device.Tablet ? "0.75fr" : "40em"} 1fr`} height={"max-content 1fr"} gap={3} responsive={[
{
device: "mobile",
area: `'area'`,
width: "1fr",
height: "1fr max-content",
gap: { col: 0, row: 2 },
},
]} contents={[
{
area: "info",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "info" : true}>
<Asset.Containers.Info info={props?.info} responsive={props?.responsive}/>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "mobile",
area: "area",
},
],
},
{
area: "history",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "history" : true}>
<Layouts.Contents.InnerContent>
<Layouts.Menu hide="mobile" menu={[
[
<>
<Controls.Tab disabled>History</Controls.Tab>
</>,
],
]}/>
<Asset.Containers.History.Short assets={props?.assets} list={history} responsive={true} fallback={"There is no assets yet."}/>
</Layouts.Contents.InnerContent>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "mobile",
area: "area",
},
],
},
{
area: "position",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "position" : true}>
<Layouts.Contents.InnerContent>
<Layouts.Menu hide="mobile" menu={[
[
<>
<Controls.Tab disabled>Position</Controls.Tab>
</>,
],
]}/>
<Layouts.Contents.GridContainer direction={props?.responsive ? "col" : "row"} width={{ min: 24 }} fullsize>
{props?.positions?.map((position, i) => (<Controls.Card key={i} onClick={() => {
console.log(i);
}}>
<div>
<Image width={0} height={0} src={position?.imageUrl} alt={position?.name} style={{
width: "100%",
height: "100%",
maxHeight: "50vh",
}}/>
</div>
<Layouts.Contents.InnerContent>
<Layouts.Row gap={1} fix>
<Elements.Text opacity={0.3} fit>
Market
</Elements.Text>
<Elements.Text align={"right"} fix>
{position?.name?.split(" ")[1]}
</Elements.Text>
</Layouts.Row>
<Layouts.Row gap={1} fix>
<Elements.Text opacity={0.3} fit>
Price
</Elements.Text>
<Elements.Text align={"right"} fix>
{position?.name?.split(" ")[2]}
</Elements.Text>
<Elements.Text align={"right"} opacity={0.3} fit>
{position?.name?.split(" ")[1]?.split("/")[1]}
</Elements.Text>
</Layouts.Row>
</Layouts.Contents.InnerContent>
</Controls.Card>))}
</Layouts.Contents.GridContainer>
</Layouts.Contents.InnerContent>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "mobile",
area: "area",
},
],
},
]}/>
<Layouts.Row gap={2}>
<Controls.Button type={"solid"} color={"orange"}>
Deposit & Widthdraw
</Controls.Button>
<Controls.Button type={"solid"} color={"green"}>
Trades
</Controls.Button>
</Layouts.Row>
</Layouts.Contents.InnerContent>
</>) : (<Contents.States.Failure message={"Oops, something wrong"}>
<Controls.Button onClick={handleBack}>Go Back</Controls.Button>
</Contents.States.Failure>)}
</AnimatePresence>);
}
//# sourceMappingURL=Position.jsx.map