Merge branch 'main' into Hammad_Dev

components/common/button/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Spinner } from "@nextui-org/react";
+
+import { ButtonProps } from "@/interfaces";
+
+const Button = ({ styles, onClick, loading, btnText }: ButtonProps) => {
+  return (
+    <button className={`${styles}`} onClick={onClick}>
+      {loading ? <Spinner color="default" size="sm" /> : btnText}
+    </button>
+  );
+};
+
+export default Button;

interfaces/index.tsx

@@ -1 +1,6 @@
-// Will declare the types here
+export interface ButtonProps {
+  styles?: string;
+  onClick: () => void;
+  loading: boolean;
+  btnText: string;
+}

package.json

@@ -14,7 +14,9 @@
     "@solana/wallet-adapter-react-ui": "^0.9.35",
     "@solana/wallet-adapter-wallets": "^0.19.26",
     "@solana/web3.js": "^1.90.0",
+    "@nextui-org/react": "^2.2.9",
     "dotenv": "^16.4.5",
+    "framer-motion": "^11.0.5",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18"
@@ -30,4 +32,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

pages/_app.tsx

@@ -1,5 +1,6 @@
 import type { AppProps } from "next/app";
 import { K2D } from "next/font/google";
+import { NextUIProvider } from "@nextui-org/react";
 
 import "@/styles/globals.css";
 import Header from "@/components/header";
@@ -11,8 +12,10 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <main className={k2d.className}>
       <WalletContextProvider>
-        <Header />
-        <Component {...pageProps} />
+        <NextUIProvider>
+          <Header />
+          <Component {...pageProps} />
+        </NextUIProvider>
       </WalletContextProvider>
     </main>
   );

pages/index.tsx

@@ -1,13 +1,4 @@
-import Footer from "@/components/footer";
-import WalletContextProvider from "@/components/wallet-context-provider";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
-import {
-  WalletConnectButton,
-  WalletDisconnectButton,
-  WalletModalButton,
-  WalletMultiButton,
-} from "@solana/wallet-adapter-react-ui";
-import { useEffect } from "react";
+import Button from "@/components/common/button";
 
 export default function Home() {
   //console connection every time it gets connected
@@ -26,14 +17,20 @@ export default function Home() {
   }, [connection, publicKey]);
 
   return (
-    <main className={``}>
-      <h1 className="font-bold text-[80px]">WELCOME TO THE GAME</h1>
-
-      <WalletMultiButton />
-      <WalletModalButton />
-      <WalletDisconnectButton />
-
-      <Footer />
+    <main className="flex flex-col justify-between items-center w-full min-h-[78vh]">
+      <div />
+      <div className="flex flex-col items-center">
+        <h1 className="font-bold text-[50px]">WELCOME TO THE GAME</h1>
+        <Button
+          styles="w-96 mt-12"
+          btnText="Connect Wallet"
+          loading={false}
+          onClick={() => {
+            console.log("hello");
+          }}
+        />
+      </div>
+      <div />
     </main>
   );
 }

styles/globals.css

@@ -4,9 +4,17 @@
 
 body {
   padding: 16px;
-  background-image: url("/assets/images/main-bg.jpg");
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+    url("/assets/images/main-bg.jpg");
   background-size: 100vw 100vh;
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: #ffffff;
 }
+
+button {
+  padding: 8px 16px;
+  border-radius: 8px;
+  background-color: #da821a;
+  color: #ffffff;
+}

tailwind.config.js

@@ -1,14 +1,16 @@
 /** @type {import('tailwindcss').Config} */
+const {nextui} = require("@nextui-org/react");
 module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
     // Or if using `src` directory:
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {},
   },
-  plugins: [],
-}
+  plugins: [nextui()],
+};