From 7de0680b3273342cb92f3219be97d439852ced6e Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Sun, 27 Oct 2024 16:36:21 +0100
Subject: [PATCH] refactor(home): walletCard next-ui (#787)

* refactor(home): walletCard next-ui

* chore: use as const for type-prop
---
 src/components/Headline.tsx   | 18 +++++++---
 src/pages/Home/WalletCard.tsx | 64 ++++++++++++++++++++---------------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/components/Headline.tsx b/src/components/Headline.tsx
index 23a4a107..e61da687 100644
--- a/src/components/Headline.tsx
+++ b/src/components/Headline.tsx
@@ -5,8 +5,17 @@ export interface HeadlineProps {
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   children: ReactNode;
   size?: FontSizes;
+  align?: Alignment;
 }
 
+export const alignment = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+} as const;
+
+export type Alignment = keyof typeof alignment;
+
 export const fontSizes = {
   "5xl": "text-5xl",
   "4xl": "text-4xl",
@@ -15,21 +24,22 @@ export const fontSizes = {
   xl: "text-xl",
   base: "text-base",
   sm: "text-sm",
-};
+} as const;
 
 export type FontSizes = keyof typeof fontSizes;
 
 export const Headline = ({
-  as = "h1",
+  as: Component = "h1",
   size = "3xl",
+  align = "center",
   children,
 }: HeadlineProps) => {
-  const Component = as;
   return (
     <Component
       className={twMerge(
         fontSizes[size],
-        "semibold whitespace-pre-line text-center",
+        alignment[align],
+        "whitespace-pre-line font-semibold",
       )}
     >
       {children}
diff --git a/src/pages/Home/WalletCard.tsx b/src/pages/Home/WalletCard.tsx
index ec11fe5f..efd28ae6 100644
--- a/src/pages/Home/WalletCard.tsx
+++ b/src/pages/Home/WalletCard.tsx
@@ -1,3 +1,5 @@
+import { Button } from "@/components/Button";
+import { Headline } from "@/components/Headline";
 import { AppContext, Unit } from "@/context/app-context";
 import { SSEContext } from "@/context/sse-context";
 import {
@@ -79,18 +81,20 @@ export const WalletCard: FC<Props> = ({
         <section className="flex flex-col flex-wrap p-2 text-black lg:flex-row">
           <div className="relative w-full overflow-hidden rounded-xl bg-yellow-600 bg-gradient-to-b from-yellow-500 p-4 text-white">
             <article className="flex w-full flex-col">
-              <h6 className="text-xl">{t("wallet.balance")}</h6>
+              <Headline as="h6" align="left">
+                {t("wallet.balance")}
+              </Headline>
               <p className="text-2xl font-bold">
                 {convertToString(unit, totalBalance)} {unit}
               </p>
             </article>
             <article className="flex w-full flex-col">
-              <h6>
+              <Headline as="h5" align="left">
                 <LinkIcon className="mr-1 inline h-5 w-5 rotate-45 transform align-bottom" />
                 <span className="inline align-bottom text-sm">
                   {t("wallet.on_chain")}
                 </span>
-              </h6>
+              </Headline>
               <p className="break-before-auto break-words text-lg font-bold">
                 <span>
                   {convertToString(unit, convertedOnchainBalance)} {unit}&nbsp;
@@ -105,12 +109,12 @@ export const WalletCard: FC<Props> = ({
               </p>
             </article>
             <article className="flex w-full flex-col">
-              <h6>
+              <Headline as="h5" align="left">
                 <BoltIcon className="mr-1 inline h-5 w-5 align-bottom" />
                 <span className="inline align-bottom text-sm">
                   {t("home.lightning")}
                 </span>
-              </h6>
+              </Headline>
               <p className="text-lg font-bold">
                 {convertToString(unit, convertedLnBalance)} {unit}
               </p>
@@ -118,37 +122,43 @@ export const WalletCard: FC<Props> = ({
             <BitcoinCircleIcon className="absolute -bottom-9 -right-9 h-32 w-32 opacity-30" />
           </div>
         </section>
-        <section className="flex justify-around gap-2 py-4">
-          <button
+        <section className="grid grid-cols-2 justify-around gap-4 p-2">
+          <Button
             onClick={onReceive}
-            className="flex h-10 w-1/2 items-center justify-center rounded bg-black text-white hover:bg-gray-700 lg:w-5/12"
+            startContent={<ArrowDownTrayIcon className="h-6 w-6" />}
+            className="flex-grow"
+            color="primary"
+            variant="ghost"
           >
-            <ArrowDownTrayIcon className="mr-1 h-6 w-6" />
-            <span>{t("wallet.receive")}</span>
-          </button>
-          <button
+            {t("wallet.receive")}
+          </Button>
+          <Button
             onClick={onSend}
-            className="flex h-10 w-1/2 items-center justify-center rounded bg-black text-white hover:bg-gray-700 lg:w-5/12"
+            startContent={<ShareIcon className="h-6 w-6" />}
+            className="flex-grow"
+            color="primary"
+            variant="ghost"
           >
-            <ShareIcon className="mr-1 h-6 w-6" />
-            <span>{t("wallet.send")}</span>
-          </button>
-        </section>
-        <section className="flex justify-around gap-2 pb-4">
-          <button
+            {t("wallet.send")}
+          </Button>
+          <Button
             onClick={onOpenChannel}
-            className="flex h-10 w-1/2 items-center justify-center rounded bg-black text-white hover:bg-gray-700 lg:w-5/12"
+            startContent={<LightningIcon className="inline h-6 w-6" />}
+            className="flex-grow"
+            color="primary"
+            variant="ghost"
           >
-            <LightningIcon className="mr-1 inline h-6 w-6" />
             {t("home.open_channel")}
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={onCloseChannel}
-            className="flex h-10 w-1/2 items-center justify-center rounded bg-black text-white hover:bg-gray-700 lg:w-5/12"
+            startContent={<ListBulletIcon className="inline h-6 w-6" />}
+            className="flex-grow"
+            color="primary"
+            variant="ghost"
           >
-            <ListBulletIcon className="mr-1 inline h-6 w-6" />
-            <span>{t("home.list_open_channels")}</span>
-          </button>
+            {t("home.list_open_channels")}
+          </Button>
         </section>
       </div>
     </div>