From c77f9048c23293375ba07900cade6b8deaf346bc Mon Sep 17 00:00:00 2001 From: = Date: Tue, 16 Jan 2024 12:15:57 +0300 Subject: [PATCH 1/2] Headless UI Package Installation #25 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Install @headlessui/react package for foundational structures in UI development. Co-Authored-By: Faru Nuri Sönmez --- package-lock.json | 42 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 43 insertions(+) diff --git a/package-lock.json b/package-lock.json index b003589..4811d6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "nft-marketplace-app", "version": "1.0.0", "dependencies": { + "@headlessui/react": "^1.7.18", "@web3modal/ethers5": "^3.5.6", "ethers": "^5.7.2", "next": "14.0.4", @@ -824,6 +825,22 @@ "@ethersproject/strings": "^5.7.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.18", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz", + "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==", + "dependencies": { + "@tanstack/react-virtual": "^3.0.0-beta.60", + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1769,6 +1786,31 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.1.tgz", + "integrity": "sha512-IFOFuRUTaiM/yibty9qQ9BfycQnYXIDHGP2+cU+0LrFFGNhVxCXSQnaY6wkX8uJVteFEBjUondX0Hmpp7TNcag==", + "dependencies": { + "@tanstack/virtual-core": "3.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz", + "integrity": "sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/connect": { "version": "3.4.38", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz", diff --git a/package.json b/package.json index 4bd7603..62e3be1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "start": "next start" }, "dependencies": { + "@headlessui/react": "^1.7.18", "@web3modal/ethers5": "^3.5.6", "ethers": "^5.7.2", "next": "14.0.4", From 2c4fb252467b8f46d12fc24106376eb0e4b4c8de Mon Sep 17 00:00:00 2001 From: = Date: Tue, 16 Jan 2024 13:36:48 +0300 Subject: [PATCH 2/2] Implement Profile Menu Components #26 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added visual design elements, including color schemes, layout arrangements, and responsive adjustments to enhance the aesthetic appeal of the Profile Menu component. This commit completes task #26 Co-Authored-By: Faru Nuri Sönmez --- src/app/component/menus/profile.menu.tsx | 104 +++++++++++++++++++++++ src/app/component/navbar/index.tsx | 28 +++--- 2 files changed, 122 insertions(+), 10 deletions(-) create mode 100644 src/app/component/menus/profile.menu.tsx diff --git a/src/app/component/menus/profile.menu.tsx b/src/app/component/menus/profile.menu.tsx new file mode 100644 index 0000000..2761c8f --- /dev/null +++ b/src/app/component/menus/profile.menu.tsx @@ -0,0 +1,104 @@ +import { Menu, Transition } from '@headlessui/react' +import { Fragment, useEffect, useRef, useState } from 'react' + +import { FaChevronDown } from "react-icons/fa"; +import { HiOutlineUserCircle } from "react-icons/hi2"; + + +const solutions = [ + { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#' }, + { name: 'Engagement', description: 'Speak directly to your customers', href: '#' }, + { name: 'Security', description: "Your customers' data will be safe and secure", href: '#' }, + { name: 'Integrations', description: 'Connect with third-party tools', href: '#' }, + { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#' }, +] +const callsToAction = [ + { name: 'Watch demo', href: '#' }, + { name: 'Contact sales', href: '#' }, +] + +const ProfileMenu = () => { + return ( + + +
+ + + +
+ + +
+ + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + +
+
+ + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + +
+
+ + {({ active }) => ( + + )} + +
+ + + + ) +} + +export default ProfileMenu \ No newline at end of file diff --git a/src/app/component/navbar/index.tsx b/src/app/component/navbar/index.tsx index 1b1bdcb..63d98c2 100644 --- a/src/app/component/navbar/index.tsx +++ b/src/app/component/navbar/index.tsx @@ -2,9 +2,14 @@ "use client" import { useWeb3Modal, useWeb3ModalAccount } from '@web3modal/ethers5/react' import { useEffect } from 'react'; -import { MdOutlineWallet } from "react-icons/md"; import { shortenWalletAddress } from '@/app/utils/Web3Modal'; +//icons +import { HiOutlineUserCircle } from "react-icons/hi2"; +import { MdOutlineWallet } from "react-icons/md"; +import ProfileMenu from '../menus/profile.menu'; + + const Navbar = () => { const { open } = useWeb3Modal() const { address, chainId, isConnected } = useWeb3ModalAccount() @@ -29,17 +34,20 @@ const Navbar = () => {
  • { - isConnected ? - : - + isConnected ? + : + }
    • +
  • + +