created AllMultisigAccount page and Multisig tabs

frontend/src/app/(routes)/multisig/AllMultisigAccount.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Image from 'next/image';
+import "./style.css"
+
+const AllMultisigAccount = () => {
+    const multisigData = [1,2,3,4];
+  return (
+    <div className='multisig-grid'>
+        {multisigData.map((index: number, id: number)=>(
+      <div className='multisig' key={id} >
+        <div className='multisig-details'>
+          <div className='multisig-first'>Name</div>
+          <div className='multisig-second'>Multisign Transaction name</div>
+        </div>
+        <div className="v-line"></div>
+        <div className='multisig-details'>
+          <div className='multisig-first'>Address</div>
+          <div className='flex'>
+            <div className='multisig-second'>cosmos1enruju0dnejv8v..</div>
+            <Image
+              src="/copy.svg"
+              width={24}
+              height={24}
+              alt="copy address.."
+              className="cursor-pointer"
+            ></Image>
+          </div>
+        </div>
+        <div className="v-line"></div>
+        <div className='multisig-details'>
+          <div className='multisig-first'>Threshold</div>
+          <div className='multisig-second'>2</div>
+        </div>
+        <div className="v-line"></div>
+        <div className='multisig-details'>
+          <div className='multisig-first'>Actions Required</div>
+          <div className='multisig-second'>2 Txns</div>
+        </div>
+        <div className="v-line"></div>
+        <div className='multisig-details'>
+          <div className='multisig-first'>Created At</div>
+          <div className='multisig-second'>2023-08-24 10:34:43</div>
+        </div>
+      </div>
+      ))}
+    </div>
+  );
+};
+
+export default AllMultisigAccount;

frontend/src/app/(routes)/multisig/page.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
-import Multisig from './Multisig'
+import AllMultisigAccount from './AllMultisigAccount'
+// import Groups from "../../../components/tabs/";
+import Multisig from 'staking/components/tabs/Multisg'
+
 
 const page = () => {
   return (
     <div className='page'>
-      <Multisig />
+     <Multisig />
     </div>
   )
 }

frontend/src/app/(routes)/multisig/style.css

@@ -0,0 +1,53 @@
+.multisig-grid {
+    @apply grid grid-rows-4 gap-[40px];
+  }
+  .multisig{
+    @apply flex flex-row h-[112px] items-start gap-6 self-stretch p-6 rounded-2xl;
+  background: rgba(46, 32, 55, 0.75);
+  }
+  .multisig-details {
+    @apply space-y-4;
+  }
+  .multisig {
+    @apply flex justify-between items-center flex-[1_0_0] self-stretch;
+  }
+  .multisig-first {
+    @apply text-[#B0B0B0] text-sm not-italic font-normal leading-4 tracking-[0.28px] flex-[1_0_0];
+  }
+  .multisig-second {
+    @apply flex h-6 flex-col justify-center self-stretch text-white text-right text-sm not-italic font-normal leading-10 tracking-[0.56px];
+  }
+  .v-line {
+    /* @apply w-full h-px self-stretch bg-[#b0b0b033]; */
+    @apply w-px h-[50px];
+  background: rgba(176, 176, 176, 0.2);
+  }
+  .members-limit-head {
+    @apply flex w-[225px] flex-col justify-center self-stretch text-white text-center text-xl not-italic font-bold leading-3;
+    font-family: Inter;
+  }
+  .members-limit-reach {
+    @apply flex flex-col w-[788px] h-[316px] justify-center items-center gap-10 self-stretch backdrop-blur-[2px] px-6 py-10 rounded-2xl;
+  background: #20172f;
+  }
+  .member-head {
+    @apply flex h-10 justify-between items-center;
+  }
+  .member-head h2 {
+    @apply flex w-[225px] flex-col justify-center self-stretch text-white text-center text-xl not-italic font-bold leading-3;
+  }
+  .member-image {
+    @apply flex flex-col items-center gap-4;
+  }
+  .member-image p {
+    @apply text-white text-center text-xl not-italic font-light leading-5;
+  }
+  .member-button {
+    @apply text-white text-center text-xl not-italic font-bold leading-5 underline cursor-pointer;
+  }
+
+
+
+
+
+

frontend/src/components/tabs/Multisg.tsx

@@ -0,0 +1,39 @@
+"use client";
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import CustomTabsGroup, { TabPanel } from "../CustomTabsGroup";
+import AllMultisigAccount from "staking/app/(routes)/multisig/AllMultisigAccount";
+
+
+export default function Multisig() {
+  const [tab, setTab] = React.useState(0);
+  const handleTabChange = (value: number) => {
+    setTab(value);
+  };
+  return (
+    <>
+      <div className="w-full flex justify-center">
+        <CustomTabsGroup
+          handleTabChange={handleTabChange}
+          tabs={[
+            { title: "Recent", disabled: false },
+            { title: "Create new Multisig", disabled: false },
+            { title: "All Multisig Accounts", disabled: false },
+          ]}
+        />
+      </div>
+      <div className="mt-10">
+        <TabPanel value={tab} index={0}>
+         Recent
+        </TabPanel>
+        <TabPanel value={tab} index={1}>
+          Create new group
+        </TabPanel>
+        <TabPanel value={tab} index={2}>
+          <AllMultisigAccount />
+        </TabPanel>
+      </div>
+    </>
+  );
+}