Explorer page implemented

dapp/components/_components/Card.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import React from "react";
+
+interface CardProp {
+  listed: boolean;
+  offered: boolean;
+  received: boolean;
+  ongoing: boolean;
+  title: string;
+  subTitle: string;
+  src: string;
+}
+
+const Card = ({
+  src,
+  offered,
+  ongoing,
+  received,
+  listed,
+  subTitle,
+  title,
+}: CardProp) => {
+  return (
+    <div className=" bg-[#090a20] p-2 w-fit rounded-xl">
+      {received ? (
+        ongoing ? (
+          <div className="bg-green-600 p-2 fixed rounded-xl">Ongoing</div>
+        ) : (
+          <div className="bg-red-600 p-2 fixed rounded-xl">Closed</div>
+        )
+      ) : null}
+      <Image src={src} alt={src} width={250} height={360}></Image>
+      <div className="flex justify-between space-y-2 py-4 w-full items-center">
+        <div>
+          <div className="text-lg">{title}</div>
+          <div className="text-xs" style={{ color: "#878893" }}>
+            {subTitle}
+          </div>
+        </div>
+        {listed ? (
+          received ? (
+            <div> Escrow</div>
+          ) : (
+            <div className="bg-[#1a2a32] p-2 rounded-2xl text-[#44a36b]">
+              Listed
+            </div>
+          )
+        ) : (
+          <div
+            className="p-2 rounded-2xl "
+            style={{ color: "#e28706", backgroundColor: "#663d08" }}
+          >
+            Unlisted
+          </div>
+        )}
+      </div>
+      {offered ? (
+        <div className="bg-[#8659fe] text-center p-2 rounded-2xl">
+          {received ? "View" : "See Offers"}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Card;

dapp/components/_components/Header.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+
+import React from 'react'
+import Search from './Search'
+import Icon from './Icon'
+
+const _Icons = [
+    {
+        src: "/images/icons/search.svg",
+        _function: () => { }
+    },
+    {
+        src: "/images/icons/bell.svg",
+        _function: () => { }
+    },
+    {
+        src: "/images/icons/help.svg",
+        _function: () => { }
+    },
+]
+
+const Header = () => {
+    return (
+        <div className='flex items-center justify-between p-6 w-full border-b-2 border-[#131429]'>
+            <div>
+
+                <Search />
+            </div>
+            <div className='flex space-x-3'>
+                <div className='flex space-x-3'>
+                    {
+                        _Icons.map((icon, index) => {
+                            return <button className='w-fit rounded-full p-2 bg-[#131429]' type="button" key={index} onClick={() => { icon._function() }}> <Icon src={icon.src} /> </button>
+                        })
+                    }
+                </div>
+                <div className='rounded-full p-2 bg-[#131429]'>
+                    connect wallet
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Header

dapp/components/_components/Icon.tsx

@@ -0,0 +1,14 @@
+import Image from 'next/image';
+import React from 'react'
+
+interface IconProps {
+    src: string;
+}
+
+const Icon = ({ src }: IconProps) => {
+    return (
+        <Image className='w-fit' src={src} alt={src} width={17} height={17} />
+    )
+}
+
+export default Icon

dapp/components/_components/Logo.tsx

@@ -0,0 +1,10 @@
+import Image from 'next/image'
+import React from 'react'
+
+const Logo = () => {
+    return (
+        <Image src={'/images/icons/logo.svg'} alt={'Logo'} width={120} height={120}></Image>
+    )
+}
+
+export default Logo

dapp/components/_components/Search.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Icon from "./Icon";
+
+const Search = () => {
+  return (
+    <div className="flex w-full items-center rounded-lg bg-[#131429] p-2 px-3 space-x-4">
+      <Icon src={"/images/icons/search.svg"} />
+      <input
+        type="search"
+        name=""
+        id=""
+        className="bg-inherit w-full border-none p-1s px-3 focus:outline-none"
+        placeholder="Search"
+      />
+    </div>
+  );
+};
+
+export default Search;

dapp/components/_components/SideBar.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React from "react";
+import Logo from "./Logo";
+import Link from "next/link";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import Search from "./Search";
+import Icon from "./Icon";
+import { usePathname } from "next/navigation";
+
+const navs = [
+  {
+    url: "/borrow/assets",
+    name: "My assets",
+  },
+  {
+    url: "/borrow/get_loan",
+    name: "Get a Loan",
+  },
+  {
+    url: "/borrow/give_loan",
+    name: "Give a Loan",
+  },
+];
+
+const SideBar = () => {
+  const path = usePathname();
+  return (
+    <div className="border-r-2 h-screen border-[#131429]  w-80 p-3 space-y-12">
+      <div className="mt-5">
+        <Link href={"/"}>
+          <Logo />
+        </Link>
+      </div>
+      <Search />
+      <div className="flex flex-col space-y-2">
+        {navs.map((nav, index) => {
+          return (
+            <Link
+              className={
+                "flex text-center rounded-xl p-3 items-center space-x-4" +
+                " " +
+                (path.includes(nav.url) ? "bg-[#835aff]" : " ")
+              }
+              href={nav.url}
+              key={index}
+            >
+              <div>
+                <Icon src={"/images/icons/dashboard-square.svg"} />
+              </div>
+              <div>{nav.name}</div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;

dapp/src/app/borrow/assets/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const page = () => {
+    return (<></>)
+}
+
+export default page

dapp/src/app/borrow/get_loan/layout.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const navs = [
+  {
+    url: "/borrow/get_loan",
+    text: "Assets (3)",
+  },
+  {
+    url: "/borrow/get_loan/offers_received",
+    text: "Offers Received (6)",
+  },
+  {
+    url: "/borrow/get_loan/loans_received",
+    text: "Loans Received (1)",
+  },
+];
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const path = usePathname();
+
+  return (
+    <div className="space-y-6 sm:overflow-hidden">
+      <div className="space-x-4 bg-[#13142a] w-fit p-2 py-3 rounded-3xl">
+        {navs.map((nav, index) => {
+          return (
+            <Link
+              className={path == nav.url ? "bg-[#835aff]" : " "}
+              style={{
+                padding: ".5em",
+                borderRadius: "100px",
+              }}
+              href={nav.url}
+              key={index}
+            >
+              {nav.text}
+            </Link>
+          );
+        })}
+      </div>
+      {children}
+    </div>
+  );
+}

dapp/src/app/borrow/get_loan/loans_received/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+    return (
+        <div>Loans received</div>
+    )
+}
+
+export default page

dapp/src/app/borrow/get_loan/offers_received/page.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import Card from '../../../../../components/_components/Card';
+
+
+const cards = [
+    {
+        title: "Cryptopunk #1232",
+        subTitle: "Cryptopunk VQ (STRK)",
+        ongoing: false,
+        received: false,
+        offered: true,
+        listed: true,
+        src: "/images/NFT4.png",
+    },
+    {
+        title: "Cryptopunk #1232",
+        subTitle: "Cryptopunk VQ (STRK)",
+        ongoing: false,
+        received: false,
+        offered: true,
+        listed: true,
+        src: "/images/NFT1.png",
+    },
+];
+
+const page = () => {
+    return (
+        <div className='bg-[#13142a]  lg:flex-row flex-col p-4 rounded-2xl'>
+
+            <div>All Listings</div>
+
+            <div className="flex flex-wrap space-y-2 md:*:my-2 space-x-3">
+                {cards.map((card, index) => {
+                    return (
+                        <Card
+                            listed={card.listed}
+                            offered={card.offered}
+                            received={card.received}
+                            ongoing={card.ongoing}
+                            title={card.title}
+                            subTitle={card.subTitle}
+                            src={card.src}
+                            key={index}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+
+    )
+}
+
+export default page