diff --git a/dapp/components/_components/Card.tsx b/dapp/components/_components/Card.tsx new file mode 100644 index 0000000..93b8c8c --- /dev/null +++ b/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 ( +
+ {received ? ( + ongoing ? ( +
Ongoing
+ ) : ( +
Closed
+ ) + ) : null} + {src} +
+
+
{title}
+
+ {subTitle} +
+
+ {listed ? ( + received ? ( +
Escrow
+ ) : ( +
+ Listed +
+ ) + ) : ( +
+ Unlisted +
+ )} +
+ {offered ? ( +
+ {received ? "View" : "See Offers"} +
+ ) : null} +
+ ); +}; + +export default Card; diff --git a/dapp/components/_components/Cards2.tsx b/dapp/components/_components/Cards2.tsx new file mode 100644 index 0000000..e69de29 diff --git a/dapp/components/_components/Header.tsx b/dapp/components/_components/Header.tsx new file mode 100644 index 0000000..aebcab3 --- /dev/null +++ b/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 ( +
+
+ + +
+
+
+ { + _Icons.map((icon, index) => { + return + }) + } +
+
+ connect wallet +
+
+
+ ) +} + +export default Header \ No newline at end of file diff --git a/dapp/components/_components/Icon.tsx b/dapp/components/_components/Icon.tsx new file mode 100644 index 0000000..e1338ac --- /dev/null +++ b/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 ( + {src} + ) +} + +export default Icon \ No newline at end of file diff --git a/dapp/components/_components/Logo.tsx b/dapp/components/_components/Logo.tsx new file mode 100644 index 0000000..c75c4fc --- /dev/null +++ b/dapp/components/_components/Logo.tsx @@ -0,0 +1,10 @@ +import Image from 'next/image' +import React from 'react' + +const Logo = () => { + return ( + {'Logo'} + ) +} + +export default Logo \ No newline at end of file diff --git a/dapp/components/_components/Search.tsx b/dapp/components/_components/Search.tsx new file mode 100644 index 0000000..fac9c8c --- /dev/null +++ b/dapp/components/_components/Search.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import Icon from "./Icon"; + +const Search = () => { + return ( +
+ + +
+ ); +}; + +export default Search; diff --git a/dapp/components/_components/SideBar.tsx b/dapp/components/_components/SideBar.tsx new file mode 100644 index 0000000..4676075 --- /dev/null +++ b/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 ( +
+
+ + + +
+ +
+ {navs.map((nav, index) => { + return ( + +
+ +
+
{nav.name}
+ + ); + })} +
+
+ ); +}; + +export default SideBar; diff --git a/dapp/public/images/icons/bell.svg b/dapp/public/images/icons/bell.svg new file mode 100644 index 0000000..8ba3fc4 --- /dev/null +++ b/dapp/public/images/icons/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/dapp/public/images/icons/dashboard-square.svg b/dapp/public/images/icons/dashboard-square.svg new file mode 100644 index 0000000..fa64691 --- /dev/null +++ b/dapp/public/images/icons/dashboard-square.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/dapp/public/images/icons/help.svg b/dapp/public/images/icons/help.svg new file mode 100644 index 0000000..05d9fa3 --- /dev/null +++ b/dapp/public/images/icons/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/dapp/public/images/icons/logo.svg b/dapp/public/images/icons/logo.svg new file mode 100644 index 0000000..a89a511 --- /dev/null +++ b/dapp/public/images/icons/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/dapp/public/images/icons/search.svg b/dapp/public/images/icons/search.svg new file mode 100644 index 0000000..80caf3c --- /dev/null +++ b/dapp/public/images/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/dapp/src/app/borrow/assets/page.tsx b/dapp/src/app/borrow/assets/page.tsx new file mode 100644 index 0000000..9787fb2 --- /dev/null +++ b/dapp/src/app/borrow/assets/page.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const page = () => { + return (<>) +} + +export default page \ No newline at end of file diff --git a/dapp/src/app/borrow/get_loan/layout.tsx b/dapp/src/app/borrow/get_loan/layout.tsx new file mode 100644 index 0000000..1442251 --- /dev/null +++ b/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 ( +
+
+ {navs.map((nav, index) => { + return ( + + {nav.text} + + ); + })} +
+ {children} +
+ ); +} diff --git a/dapp/src/app/borrow/get_loan/loans_received/page.tsx b/dapp/src/app/borrow/get_loan/loans_received/page.tsx new file mode 100644 index 0000000..31f8e92 --- /dev/null +++ b/dapp/src/app/borrow/get_loan/loans_received/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const page = () => { + return ( +
Loans received
+ ) +} + +export default page \ No newline at end of file diff --git a/dapp/src/app/borrow/get_loan/offers_received/page.tsx b/dapp/src/app/borrow/get_loan/offers_received/page.tsx new file mode 100644 index 0000000..16d7ae9 --- /dev/null +++ b/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 ( +
+ +
All Listings
+ +
+ {cards.map((card, index) => { + return ( + + ); + })} +
+
+ + ) +} + +export default page \ No newline at end of file diff --git a/dapp/src/app/borrow/get_loan/page.tsx b/dapp/src/app/borrow/get_loan/page.tsx new file mode 100644 index 0000000..2b3da0f --- /dev/null +++ b/dapp/src/app/borrow/get_loan/page.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import Search from "../../../../components/_components/Search"; +import Image from "next/image"; +import Card from "../../../../components/_components/Card"; + +const collections = [ + { + name: "Cryptopunk VQ (Wrapped ETH)", + avatar: "", + }, + { + name: "CLONE X-X", + avatar: "", + }, + { + name: "KOLLABEAR", + avatar: "", + }, + { + name: "NFT Locked Bundle ", + avatar: "", + }, + { + name: "FLUF", + avatar: "", + }, + { + name: "RANGA", + avatar: "", + }, + ], + cards = [ + { + title: "Cryptopunk #1232", + subTitle: "Cryptopunk VQ (STRK)", + ongoing: false, + received: false, + offered: false, + listed: false, + src: "/images/NFT4.png", + }, + { + title: "Cryptopunk #1232", + subTitle: "Cryptopunk VQ (STRK)", + ongoing: false, + received: false, + offered: false, + listed: false, + src: "/images/NFT1.png", + }, + { + title: "Cryptopunk #1232", + subTitle: "Cryptopunk VQ (STRK)", + ongoing: false, + received: false, + offered: false, + listed: false, + src: "/images/NFT3.png", + }, + ]; + +const page = () => { + return ( +
+ {/* collections side panel */} +
+
Collections
+ +
+ {collections.map((nft, index) => { + return ( +
+ + {"Avatar" +
{nft.name}
+
+ ); + })} +
+
+ {/* Search result section */} +
+
Search Results
+
+ {cards.map((card, index) => { + return ( + + ); + })} +
+
+
+ ); +}; + +export default page; diff --git a/dapp/src/app/borrow/give_loan/page.tsx b/dapp/src/app/borrow/give_loan/page.tsx new file mode 100644 index 0000000..9787fb2 --- /dev/null +++ b/dapp/src/app/borrow/give_loan/page.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const page = () => { + return (<>) +} + +export default page \ No newline at end of file diff --git a/dapp/src/app/borrow/layout.tsx b/dapp/src/app/borrow/layout.tsx new file mode 100644 index 0000000..857f6d0 --- /dev/null +++ b/dapp/src/app/borrow/layout.tsx @@ -0,0 +1,19 @@ +import Header from "../../../components/_components/Header"; +import SideBar from "../../../components/_components/SideBar"; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( +
+ + +
+
+
{children}
+
+
+ ); +} diff --git a/dapp/src/app/globals.css b/dapp/src/app/globals.css index 6b717ad..baef5f9 100644 --- a/dapp/src/app/globals.css +++ b/dapp/src/app/globals.css @@ -19,3 +19,8 @@ body { background: var(--background); font-family: Arial, Helvetica, sans-serif; } + +* { + font-family: monospace; + font-size: small; +} \ No newline at end of file diff --git a/dapp/tailwind.config.ts b/dapp/tailwind.config.ts index 109807b..e25ac66 100644 --- a/dapp/tailwind.config.ts +++ b/dapp/tailwind.config.ts @@ -5,6 +5,7 @@ export default { "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: {