Add backup table, fix layout issues

frontend/app/backups/data.ts

@@ -0,0 +1,47 @@
+const columns = [
+  { name: 'name', uid: 'name' },
+  { name: 'receiver', uid: 'receiver' },
+  { name: 'value', uid: 'value' },
+  { name: 'initiation Date', uid: 'date' },
+  { name: 'actions', uid: 'actions' },
+];
+
+const users = [
+  {
+    id: 1,
+    name: 'Preventing risks on trip to EthCC',
+    receiver: '00xa9....ab4bd',
+    value: '75%',
+    date: '13 Jul 2024',
+  },
+  {
+    id: 2,
+    name: 'If lost while climbing on Everest',
+    receiver: '00xa9....ab432',
+    value: '50%',
+    date: '27 Oct 2024',
+  },
+  {
+    id: 3,
+    name: 'In case of a racetrack accident',
+    receiver: '00xa9....ab4d1',
+    value: '51,8.6 ETH',
+    date: '17 Nov 2024',
+  },
+  {
+    id: 4,
+    name: 'Digital inheritance',
+    receiver: ['00xa9....ab1d7', '00xa9....ab3d4', '00xa9....ab2d5'],
+    value: ['15%', '40%', '45%'],
+    date: '01 Jan 2025',
+  },
+  {
+    id: 5,
+    name: 'Heart surgery, June 2025',
+    receiver: '00xa9....ab42a',
+    value: '100%',
+    date: '31 June 2025',
+  },
+];
+
+export { columns, users };

frontend/app/backups/page.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useCallback } from 'react';
+import Image from 'next/image';
+import { Button } from '@nextui-org/button';
+import { Link } from '@nextui-org/link';
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+} from '@nextui-org/table';
+import { Tooltip } from '@nextui-org/tooltip';
+
+import { columns, users } from './data';
+
+import deleteIcon from '@/images/delete.svg';
+import editIcon from '@/images/edit.svg';
+import ghostIcon from '@/images/ghost.svg';
+
+export default function BackUpsPage() {
+  const renderCell = useCallback((user: any, columnKey: any) => {
+    const cellValue = user[columnKey];
+
+    switch (columnKey) {
+      case 'name':
+        return <div className="font-semibold">{user.name}</div>;
+      case 'receiver':
+        return (
+          <div className="flex flex-col">
+            <p className="font-semibold">Receiver</p>
+            <div className="">
+              {Array.isArray(user.receiver)
+                ? user.receiver.map((item: any) => <p key="item">{item}</p>)
+                : user.receiver}
+            </div>
+          </div>
+        );
+      case 'value':
+        return (
+          <div className="flex flex-col">
+            <p className="font-semibold">Value</p>
+            <div className="">
+              {Array.isArray(user.value)
+                ? user.value.map((item: any) => <p key="item">{item}</p>)
+                : user.value}
+            </div>
+          </div>
+        );
+      case 'date':
+        return (
+          <div className="flex flex-col">
+            <p className="font-semibold">Initiation Date</p>
+            <p className="">{user.value}</p>
+          </div>
+        );
+      case 'actions':
+        return (
+          <div className="relative flex justify-end gap-2">
+            <Tooltip content="Edit Backup">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <Image alt="edit icon" src={editIcon} />
+              </span>
+            </Tooltip>
+            <Tooltip color="danger" content="Delete Backup">
+              <span className="text-lg text-danger cursor-pointer active:opacity-50">
+                <Image alt="edit icon" src={deleteIcon} />
+              </span>
+            </Tooltip>
+          </div>
+        );
+      default:
+        return <>{user[columnKey]}</>;
+    }
+  }, []);
+
+  return (
+    <div>
+      <div className="flex justify-between pb-8">
+        <h1 className=" content-center text-lg font-semibold">Your Backups</h1>
+        <Button
+          className="font-semibold"
+          color="primary"
+          size="lg"
+          as={Link}
+          // TODO add link to add page
+          href={'/'}
+        >
+          Create Backup
+        </Button>
+      </div>
+      <div className="text-[#AFB8CE] flex justify-center p-6 bg-white rounded-xl mb-2">
+        <Image alt="ghost icon" src={ghostIcon} /> Start with creating a new
+        Backup!
+      </div>
+      <Table
+        fullWidth
+        hideHeader
+        isStriped
+        removeWrapper
+        aria-label="Backup table"
+      >
+        <TableHeader columns={columns}>
+          {(column: any) => (
+            <TableColumn key={column.uid}>{column.name}</TableColumn>
+          )}
+        </TableHeader>
+        <TableBody items={users}>
+          {(item: any) => (
+            <TableRow
+              key={item.id}
+              className=" border-b-[12px] border-transparent bg-white"
+            >
+              {(columnKey: any) => (
+                <TableCell className="py-4 text-sm align-top">
+                  {renderCell(item, columnKey)}
+                </TableCell>
+              )}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

frontend/app/layout.tsx

@@ -36,19 +36,19 @@ export default function RootLayout({
       <head />
       <body
         className={clsx(
-          'min-h-screen bg-background font-sans antialiased',
+          'font-sans antialiased min-h-screen bg-gradient-to-b from-white to-[#EAF1FF]',
           fontSans.variable,
         )}
       >
         <Providers themeProps={{ attribute: 'class', defaultTheme: 'light' }}>
-          <div className="relative flex flex-col h-screen">
+          <div className="relative flex min-h-screen flex-col bg-transparent">
             <Navbar />
 
-            <main className="container mx-auto max-w-7xl px-6 flex-grow">
+            <main className="container mx-auto max-w-7xl px-6 flex-grow ">
               {children}
             </main>
-            <footer className="w-full flex items-center justify-center py-3">
-              <span className="text-default-600">
+            <footer className="w-full flex items-center justify-center pt-8">
+              <span className="text-default-600 pb-8">
                 © 2024. All rights reserved.
               </span>
             </footer>

frontend/app/page.tsx

@@ -1,42 +1,32 @@
 'use client';
 
 import Image from 'next/image';
-import logoSafe from '@/images/logo-safe.svg';
-import keyImage from '@/images/key.png';
-
-import { Button } from '@nextui-org/button';
+import { useAccount } from 'wagmi';
 
-import { useWeb3Modal } from '@web3modal/wagmi/react';
+import keyImage from '@/images/key.png';
 import ConnectSafeButton from '@/components/ConnectSafeButton';
 
-import {useAccount, useConnect} from 'wagmi';
-
 export default function Home() {
-  const { open } = useWeb3Modal();
-
   const { isConnected, address, status } = useAccount();
 
   return (
-    <section className="flex flex-nowrap align-middle">
+    <section className="flex flex-nowrap align-middle pt-16">
       <div className="flex flex-col  gap-8 max-w-xl text-start justify-center">
         <h1 className="font-semibold text-5xl">
           Why Should You Worry about Web3 Security?
         </h1>
-
         <p className="text-lg">
           You might wonder about the reasons for which you need a web3 security
           tutorial in the first place. It is important to note that the
           advantage of democracy on the Internet comes at a price.
         </p>
-
         <ConnectSafeButton />
-
         isConnected: {isConnected ? 'true' : 'false'} <br />
         address: {address} <br />
         status: {status} <br />
       </div>
       <div className="flex align-middle justify-center w-full ">
-        <Image src={keyImage} alt="key image" />
+        <Image alt="key image" src={keyImage} />
       </div>
     </section>
   );

frontend/components/ConnectSafeButton.tsx

@@ -1,20 +1,20 @@
 import Image from 'next/image';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
-
 import { Button } from '@nextui-org/button';
 
 import logoSafe from '@/images/logo-safe.svg';
 
 const ConnectSafeButton = () => {
   const { open } = useWeb3Modal();
+
   return (
     <div className="">
       <Button
+        className="font-semibold"
         color="primary"
         size="lg"
-        className="font-semibold"
+        startContent={<Image alt="SAFE logo" src={logoSafe} />}
         onClick={() => open({ view: 'Connect' })}
-        startContent={<Image src={logoSafe} alt="SAFE logo" />}
       >
         Connect Safe
       </Button>