From 95b5aa974dd8add27b7058981e2088181e85cb55 Mon Sep 17 00:00:00 2001
From: Hammad Waseem <56793093+Hammad19@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:12:07 +0500
Subject: [PATCH] Header Completed

---
 components/header/index.tsx                   | 52 ++++++++++++++++---
 .../wallet-connect-button.tsx                 |  6 ++-
 pages/create-profile.tsx                      |  7 +++
 3 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 pages/create-profile.tsx

diff --git a/components/header/index.tsx b/components/header/index.tsx
index 629d8b1..111fcb8 100644
--- a/components/header/index.tsx
+++ b/components/header/index.tsx
@@ -1,15 +1,53 @@
 import React from "react";
 import Image from "next/image";
+import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
+import Footer from "../footer";
 
 const Header = () => {
   return (
-    <div className="flex justify-center items-center w-full">
-      <Image
-        src="/assets/images/logo.png"
-        alt="logo"
-        width={350}
-        height={0}
-      />
+    <div
+      className={`flex flex-row ${
+        window.location.pathname !== "/" ? "justify-between" : "justify-center"
+      } items-center  w-full`}
+    >
+      {window.location.pathname !== "/" && (
+        <WalletMultiButton
+          style={{
+            height: "40px",
+            borderRadius: "15px",
+            backgroundColor: "transparent",
+            color: "#ffffff",
+            width: "174px",
+            display: "flex",
+            justifyContent: "center",
+            border: "2px solid #8E8B77",
+            fontSize: "12px",
+          }}
+        />
+      )}
+      <Image src="/assets/images/logo.png" alt="logo" width={350} height={0} />
+      {window.location.pathname !== "/" && (
+        <div className="flex flex-row gap-3">
+          <Image
+            width={30}
+            height={30}
+            src="/assets/svgs/github-icon.svg"
+            alt="github"
+          />
+          <Image
+            width={30}
+            height={30}
+            src="/assets/svgs/discord-icon.svg"
+            alt="discord"
+          />
+          <Image
+            width={30}
+            height={30}
+            src="/assets/svgs/twitter-icon.svg"
+            alt="twitter"
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/components/wallet-context-provider/wallet-connect-button.tsx b/components/wallet-context-provider/wallet-connect-button.tsx
index 9adcbc6..ecd4c5f 100644
--- a/components/wallet-context-provider/wallet-connect-button.tsx
+++ b/components/wallet-context-provider/wallet-connect-button.tsx
@@ -1,9 +1,11 @@
 import { useWallet } from "@solana/wallet-adapter-react";
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
+import { useRouter } from "next/router";
 
 import Button from "@/components/common/button";
 
 const WalletConnectButton = () => {
+  const router = useRouter();
   const { publicKey } = useWallet();
   return (
     <div>
@@ -33,7 +35,9 @@ const WalletConnectButton = () => {
             styles="w-96"
             btnText="Let's Create an Account"
             loading={false}
-            onClick={() => {}}
+            onClick={() => {
+              router.push("/create-profile");
+            }}
           />
         ) : (
           <WalletMultiButton
diff --git a/pages/create-profile.tsx b/pages/create-profile.tsx
new file mode 100644
index 0000000..f0d9243
--- /dev/null
+++ b/pages/create-profile.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const createProfile = () => {
+  return <div>create-profile</div>;
+};
+
+export default createProfile;