@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).
188 lines • 11.5 kB
JSX
"use client";
import { Controls, Elements, Layouts } from "../../../../components";
import { useSort } from "../../../../hooks";
import { filter, format, sign } from "../../../../lib/utils";
export default function List(props) {
const { sorting, setSort, sortArrow } = useSort();
const formatter = (data) => {
return (data &&
typeof data !== "string" &&
data?.length > 0 &&
data?.map((data) => ({
onClick: () => {
if (typeof props?.onSelect === "function")
props?.onSelect(data);
},
style: { padding: "2em" },
children: [
[
[
{
style: { flex: 1, maxWidth: "20%" },
children: [
[
{
style: { maxWidth: "max-content" },
children: (<Elements.Avatar size={props?.responsive ? 3.5 : 4} style={{ maxWidth: "max-content" }} img={require(`../../../../assets/coins/${data?.symbol?.toLowerCase()}.png`)}/>),
},
<>
<Layouts.Col gap={0}>
<Elements.Text height={1.25}>{data?.symbol}</Elements.Text>
<Elements.Text height={1.25} opacity={0.3} fix>
{data?.name}
</Elements.Text>
</Layouts.Col>
</>,
],
],
},
{
style: { flex: 3 },
children: [
[
{
gap: 0,
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.rateChangeRate, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }}>
MECA
</Elements.Text>
</>),
},
{
align: "right",
change: sign(data?.rateChangeRate) === "+" ? "green" : sign(data?.rateChangeRate) === "-" && "red",
children: (<>
<Elements.Text align={"right"} change>
{format(data?.rateChange, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }} change>
%
</Elements.Text>
</>),
},
],
},
{
style: {
gap: 0,
...(props?.responsive && {
display: "none",
}),
},
children: [
{
align: "right",
children: (<>
<Elements.Text align={"right"}>
{format(data?.locked, "currency", { unit: 9, limit: 12, fix: 3 })}
</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"}>
{sign(data?.lockedChange)}{" "}
{format(data?.lockedChange, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
<Elements.Text align={"left"} opacity={0.6} style={{ minWidth: "6em" }}>
{data?.symbol}
</Elements.Text>
</>),
},
],
},
{
style: {
gap: 0,
...(props?.responsive && {
display: "none",
}),
},
children: [
{
align: "right",
children: (<Elements.Text align={"right"}>
$ {format(data?.valueLocked, "currency", { unit: 9, limit: 12, fix: 3 })}
</Elements.Text>),
},
{
align: "right",
style: { opacity: 0.3 },
children: (<>
<Elements.Text align={"right"} fix>
{sign(data?.valueLockedChange)}${" "}
{format(data?.valueLockedChange, "currency", { unit: 9, limit: 12, fix: 3, sign: false })}
</Elements.Text>
</>),
},
],
},
],
],
},
],
],
],
})));
};
const sorts = {
symbol: { key: "symbol", type: "string" },
name: { key: "name", type: "string" },
rateChangeRate: { key: "rateChangeRate", type: "number" },
rateChange: { key: "rateChange", type: "number" },
locked: { key: "locked", type: "number" },
lockedChange: { key: "lockedChange", type: "number" },
valueLocked: { key: "valueLocked", type: "number" },
valueLockedChange: { key: "valueLockedChange", type: "number" },
};
return (<Layouts.Contents.InnerContent>
<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.rateChangeRate)} onClick={() => setSort(sorts.rateChangeRate)}>
Exchange Rate
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.rateChange)} onClick={() => setSort(sorts.rateChange)}>
Change
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.locked)} onClick={() => setSort(sorts.locked)}>
Total
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.lockedChange)} onClick={() => setSort(sorts.lockedChange)}>
Total Change
</Controls.Tab>
</Layouts.Row>
<Layouts.Row gap={0} fix>
<Controls.Tab iconLeft={sortArrow(sorts.valueLocked)} onClick={() => setSort(sorts.valueLocked)}>
valueLocked
</Controls.Tab>
<Controls.Tab iconLeft={sortArrow(sorts.valueLockedChange)} onClick={() => setSort(sorts.valueLockedChange)}>
valueLocked Change
</Controls.Tab>
</Layouts.Row>
</Layouts.Row>
<Layouts.Divider />
<Layouts.List list={filter(sorting(props?.list), props?.filter)} formatter={formatter}/>
</Layouts.Contents.InnerContent>);
}
//# sourceMappingURL=List.jsx.map