diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/admin/AdminHome.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/admin/AdminHome.tsx | 44 |
1 files changed, 15 insertions, 29 deletions
diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx index d1b48fb6d..22090f83a 100644 --- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx +++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx @@ -136,32 +136,8 @@ function Metrics(): VNode { <h1 class="text-base font-semibold leading-7 text-gray-900 mt-5"> <i18n.Translate>Trading volume on {getDateForTimeframe(params.current, metricType)} compared to {getDateForTimeframe(params.previous, metricType)}</i18n.Translate> </h1> - <div class="flex items-center justify-between"> - {/* <span class="flex flex-grow flex-col"> - <span class="text-sm text-black font-medium leading-6 " id="availability-label"> - ASD - </span> - </span> */} - <button type="button" class="bg-gray-200 relative inline-flex h-6 w-48 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false"> - <span class="sr-only">Use setting</span> - {/* <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> */} - <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-32 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"> - {/* <!-- Enabled: "opacity-0 duration-100 ease-out", Not Enabled: "opacity-100 duration-200 ease-in" --> */} - <span class="opacity-100 duration-200 ease-in absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true"> - Transaction - </span> - {/* <!-- Enabled: "opacity-100 duration-200 ease-in", Not Enabled: "opacity-0 duration-100 ease-out" --> */} - <span class="opacity-0 duration-100 ease-out absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true"> - <svg class="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12"> - <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" /> - </svg> - </span> - </span> - </button> - </div> - </div> - <dl class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:grid-cols-4 md:divide-x md:divide-y-0"> + <dl class="mt-5 grid grid-cols-1 md:grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:divide-x md:divide-y-0"> {resp.current.body.type !== "with-conversions" || resp.previous.body.type !== "with-conversions" ? undefined : <Fragment> @@ -222,12 +198,22 @@ function MetricValue({ current, previous }: { current: AmountString | undefined, const negative = cmp === 0 ? undefined : cmp === -1 const rateStr = `${(Math.abs(rate) * 100).toFixed(2)}%` + const pepe = "QWEQWEQWEWw:111111174523848.85229681" + function size(s: string = ""): "lg" | "md" | "sm" { + return s.length < 10 ? "sm" : s.length > 20 ? "lg" : "md"; + } return <Fragment> - - <dd class="mt-1 flex justify-between md:block lg:flex"> - <div class="flex justify-start items-baseline text-2xl font-semibold text-indigo-600"> - {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(current)} spec={config.currency_specification} />} + <dd class="mt-1 block "> + <div data-size={size(pepe)} class="flex justify-start + data-[size=sm]:text-2xl + data-[size=md]:text-lg + data-[size=lg]:text-sm + items-baseline + font-semibold text-indigo-600"> + {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(pepe)} spec={config.currency_specification} />} </div> + {pepe.length} + <div style={{ width: 16, height: 16, border: "1px solid red" }} /> <div class="flex flex-col"> <div class="flex justify-end items-baseline text-2xl font-semibold text-indigo-600"> |