@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).
235 lines • 12.7 kB
JSX
"use client";
import { Controls, Elements, Layouts } from "../../../components";
import { useSort } from "../../../hooks";
import { filter, format } from "../../../lib/utils";
import { Asset } from "../../../prefabs";
import { useState } from "react";
export default function View(props) {
const [mobile, setMobile] = useState("asset");
const { sorting, setSort, sortArrow } = useSort();
const info = props?.info;
const sorts = {
symbol: { key: "symbol", type: "string" },
name: { key: "name", type: "string" },
balance: { key: "balance", type: "number" },
using: { key: "using", type: "number" },
balanceUSD: { key: "balance", type: "number" },
usingUSD: { key: "using", type: "number" },
};
const handleSelectedAsset = (data) => {
if (typeof props?.onSelect === "function")
props?.onSelect(data);
};
const assetListFormatter = (data) => {
return (typeof data !== "string" &&
data?.length > 0 &&
data?.map((data) => ({
onClick: () => handleSelectedAsset(data),
style: { padding: "2em" },
children: [
{
style: { flex: 1 },
children: [
[
{
style: { maxWidth: "max-content" },
children: (<>
<Elements.Avatar size={props?.responsive ? 4 : 3.5} img={require(`../../../assets/coins/${data?.symbol?.toLowerCase()}.png`)}/>
</>),
},
{
gap: 0,
children: [
<>
<Elements.Text height={1.25}>{data?.symbol}</Elements.Text>
</>,
<>
<Elements.Text height={1.25} opacity={0.3}>
{data?.name}
</Elements.Text>
</>,
],
},
],
],
},
{
style: { flex: 2 },
children: [
[
{
gap: 0,
align: "right",
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>{data?.balance}</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }}>
{data?.symbol}
</Elements.Text>
</>),
},
{
align: "right",
style: { opacity: 0.3 },
children: (<>
<Elements.Text align={"right"}>{data?.using}</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }}>
{data?.symbol}
</Elements.Text>
</>),
},
],
},
{
gap: 0,
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>$ {data?.using}</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }}>
USD
</Elements.Text>
</>),
},
{
align: "right",
style: { opacity: 0.3 },
children: (<>
<Elements.Text align={"right"}>$ {data?.using}</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }}>
USD
</Elements.Text>
</>),
},
],
},
],
],
},
],
})));
};
const [keyword, setKeyword] = useState("");
return (<Layouts.Contents.InnerContent>
<Layouts.Row fix style={{ minHeight: "4em", alignItems: "center" }}>
<Layouts.Row fix style={{ alignItems: "center" }} gap={2} fit>
<Layouts.Row responsive={"tablet"} gap={1} fit>
<Elements.Text size={2.5} height={1} style={{ marginRight: "1em" }} responsive={{ device: "tablet", size: 2 }}>
All Assets
</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: "tablet", 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={"tablet"} gap={0}>
<Layouts.Row gap={1} fix>
<Controls.Tab active={mobile === "info"} onClick={() => setMobile("info")}>
Info
</Controls.Tab>
<Controls.Tab active={mobile === "asset"} onClick={() => setMobile("asset")}>
Assets
</Controls.Tab>
</Layouts.Row>
<Layouts.Divider />
</Layouts.Col>
<Layouts.Contents.GridContainer fullsize area={`'info' 'asset'`} width={"1fr"} height={"max-content 1fr"} gap={3} responsive={[
{
device: "tablet",
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: "tablet",
area: "area",
},
],
},
{
area: "asset",
children: (<Layouts.Contents.SlideContent active={props?.responsive ? mobile === "asset" : true}>
<Layouts.Contents.InnerContent>
<Layouts.Menu
// hide="tablet"
menu={[
{
style: { padding: "1em 0" },
children: [
{
hide: "tablet",
children: [
<>
<Controls.Tab disabled>Assets</Controls.Tab>
</>,
],
},
{
style: { maxWidth: "initial" },
children: [
<>
<Controls.Input style={{ width: "100%" }} left={{ children: <Elements.Icon icon={"search"}/> }} placeholder={"Search asset"} value={keyword} onChange={(e, v) => setKeyword(v)}/>
</>,
],
},
],
},
]}/>
<Layouts.Row fix style={{ overflow: "auto hidden" }}>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.symbol)} onClick={() => setSort(sorts.symbol)}>
Symbol
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.name)} onClick={() => setSort(sorts.name)}>
Name
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.balance)} onClick={() => setSort(sorts.balance)}>
Balance
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.using)} onClick={() => setSort(sorts.using)}>
Using
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.balanceUSD)} onClick={() => setSort(sorts.balanceUSD)}>
Balance (USD)
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.usingUSD)} onClick={() => setSort(sorts.usingUSD)}>
Using (USD)
</Controls.Tab>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider />
<Layouts.List list={filter(sorting(props?.assets), keyword)} formatter={assetListFormatter} fallback={"There is no assets yet."}/>
</Layouts.Contents.InnerContent>
</Layouts.Contents.SlideContent>),
responsive: [
{
device: "tablet",
area: "area",
},
],
},
]}/>
</Layouts.Contents.InnerContent>);
}
//# sourceMappingURL=View.jsx.map