diff --git a/frontend/app/dapp/Members.tsx b/frontend/app/dapp/Members.tsx new file mode 100644 index 00000000..cf901718 --- /dev/null +++ b/frontend/app/dapp/Members.tsx @@ -0,0 +1,412 @@ +'use client' +import Image from 'next/image' +import React, { useState } from 'react' +import { Nunito_Sans } from 'next/font/google' + +const nunito = Nunito_Sans({ + subsets: ['latin'], + weight: ['200', '300', '400', '500', '600', '700', '800', '900'], +}) + +const Members = () => { + const [activeTab, setActiveTab] = useState('members') + + return ( +
+
+
+

setActiveTab('members')} + > + Spherre Members +

+

setActiveTab('history')} + > + History +

+
+ + +
+ +
+ {activeTab === 'members' && ( +
+
+
+
+
+ member avatar{' '} +
+

+ Member 1 +

+
+

+ 22yquq...qyqiia +

+ copy +
+
+
+ + member avatar +
+
+
+ {' '} +

+ Roles: +

{' '} +
+ Voter{' '} +
+
+ Proposer{' '} +
+
+ Executer{' '} +
+
+ +
+ {' '} +

+ Date added: +

{' '} +

+ 24 Mar 2025 +

{' '} +
+
+ +
+
{' '} +
+
+
+
+ member avatar{' '} +
+

+ Member 2 +

+
+

+ 22yquq...qyqiia +

+ copy +
+
+
+ + member avatar +
+
+
+ {' '} +

+ Roles: +

{' '} +
+ Voter{' '} +
+
+ Proposer{' '} +
+
+ +
+ {' '} +

+ Date added: +

{' '} +

+ 24 Mar 2025 +

{' '} +
+
+ +
+
{' '} +
+
+
+
+ member avatar{' '} +
+

+ Member 3 +

+
+

+ 22yquq...qyqiia +

+ copy +
+
+
+ + member avatar +
+
+
+ {' '} +

+ Roles: +

{' '} +
+ Voter{' '} +
+
+ Proposer{' '} +
+
+ +
+ {' '} +

+ Date added: +

{' '} +

+ 24 Mar 2025 +

{' '} +
+
+ +
+
{' '} +
+
+
+
+ member avatar{' '} +
+

+ Member 4 +

+
+

+ 22yquq...qyqiia +

+ copy +
+
+
+ + member avatar +
+
+
+ {' '} +

+ Roles: +

{' '} +
+ Voter{' '} +
+ +
+ +
+ {' '} +

+ Date added: +

{' '} +

+ 24 Mar 2025 +

{' '} +
+
+ +
+
{' '} +
+
+
+
+ member avatar{' '} +
+

+ Member 5 +

+
+

+ 22yquq...qyqiia +

+ copy +
+
+
+ + member avatar +
+
+
+ {' '} +

+ Roles: +

{' '} +
+ Voter{' '} +
+ +
+ +
+ {' '} +

+ Date added: +

{' '} +

+ 24 Mar 2025 +

{' '} +
+
+ +
+
{' '} +
+
+ cross logo +
+

+ Add Member +

+
+
+ )} + {activeTab === 'history' &&

Showing History...

} +
+
+ ) +} + +export default Members diff --git a/frontend/app/dapp/Sidebar.tsx b/frontend/app/dapp/Sidebar.tsx index af558ab8..8aa70624 100644 --- a/frontend/app/dapp/Sidebar.tsx +++ b/frontend/app/dapp/Sidebar.tsx @@ -1,6 +1,6 @@ 'use client' -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, Dispatch, SetStateAction } from 'react' import logo from '../../public/Images/spherrelogo.png' import Image, { StaticImageData } from 'next/image' import Dashboard from '../../public/Images/Dash.png' @@ -22,7 +22,11 @@ interface NavItem { notification?: number } -const Sidebar = () => { +interface onSelectFunc { + onSelect: Dispatch> +} + +const Sidebar = ({ onSelect }: onSelectFunc) => { // State to track active page - set dashboard as default const [activePage, setActivePage] = useState('Dashboard') @@ -91,7 +95,10 @@ const Sidebar = () => { {navItems.map((item) => (
  • handleNavClick(item.name)} + onClick={() => { + handleNavClick(item.name) + onSelect(item.name) + }} className={`flex items-center cursor-pointer p-3 rounded-lg transition-all ${expanded ? 'gap-3' : 'justify-center' } ${activePage === item.name ? 'bg-[#27292D] text-white' diff --git a/frontend/app/dapp/page.tsx b/frontend/app/dapp/page.tsx index 6b8585a5..e233bcdc 100644 --- a/frontend/app/dapp/page.tsx +++ b/frontend/app/dapp/page.tsx @@ -3,10 +3,12 @@ import { useState, useEffect } from 'react' import Sidebar from '../dapp/Sidebar' import Navbar from './Navbar' +import Members from './Members' export default function Dapp() { // State to track sidebar expansion const [sidebarExpanded, setSidebarExpanded] = useState(false) + const [selectedPage, setSelectedPage] = useState('Dashboard') // Listen for sidebar expansion state changes useEffect(() => { @@ -30,7 +32,7 @@ export default function Dapp() { return (
    - +
    {/* Your page content goes here */} + {selectedPage === 'Members' && }
    diff --git a/frontend/public/copy.svg b/frontend/public/copy.svg new file mode 100644 index 00000000..b2f5d44c --- /dev/null +++ b/frontend/public/copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/cross.svg b/frontend/public/cross.svg new file mode 100644 index 00000000..9b0dd0e1 --- /dev/null +++ b/frontend/public/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/public/dots.svg b/frontend/public/dots.svg new file mode 100644 index 00000000..03f2ca47 --- /dev/null +++ b/frontend/public/dots.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/public/member1.svg b/frontend/public/member1.svg new file mode 100644 index 00000000..272347f9 --- /dev/null +++ b/frontend/public/member1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/member2.svg b/frontend/public/member2.svg new file mode 100644 index 00000000..71f47e9e --- /dev/null +++ b/frontend/public/member2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/member3.svg b/frontend/public/member3.svg new file mode 100644 index 00000000..f13d5429 --- /dev/null +++ b/frontend/public/member3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/member4.svg b/frontend/public/member4.svg new file mode 100644 index 00000000..f70a826e --- /dev/null +++ b/frontend/public/member4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/member5.svg b/frontend/public/member5.svg new file mode 100644 index 00000000..d3aa9a7e --- /dev/null +++ b/frontend/public/member5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/public/user-add.svg b/frontend/public/user-add.svg new file mode 100644 index 00000000..c242120e --- /dev/null +++ b/frontend/public/user-add.svg @@ -0,0 +1,3 @@ + + +