@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).
114 lines • 6.12 kB
JSX
"use client";
import { Contents, Controls, Elements, Layouts } from "../../../../components";
import { AnimatePresence } from "motion/react";
import { format } from "../../../../lib/utils";
import { Asset } from "../../../../prefabs";
import { useState } from "react";
export default function Default(props) {
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", true)}
</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>
</Layouts.Row>
<Layouts.Divider />
</Layouts.Col>
<Layouts.Contents.GridContainer fullsize area={`'info' 'history'`} width={"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.Menu hide="mobile" menu={[
[
<>
<Controls.Tab disabled>History</Controls.Tab>
</>,
],
]}/>
<Asset.Containers.History.Default assets={props?.assets} list={history} responsive={props?.responsive} fallback={"There is no assets yet."}/>
</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=Default.jsx.map