Merge pull request #11 from hollow-leaf/feat/frontend

Feat/frontend
hollow-leaf · May 12, 2024 · 0269465 · 0269465
2 parents cfd678f + e99b649
commit 0269465
Show file tree

Hide file tree

Showing 16 changed files with 367 additions and 151 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -16,6 +16,7 @@
     "@ducanh2912/next-pwa": "^10.2.6",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@headlessui/react": "^2.0.3",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@tanstack/react-query": "^5.32.0",

diff --git a/apps/web/public/background.png b/apps/web/public/background.png
diff --git a/apps/web/public/background1.png b/apps/web/public/background1.png
diff --git a/apps/web/public/main1.png b/apps/web/public/main1.png
diff --git a/apps/web/public/sunglasses.png b/apps/web/public/sunglasses.png
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -97,4 +97,10 @@
   71%  {background-color: indigo;}
   85%  {background-color: violet;}
   100% {background-color: red;}
+}
+
+.freeman-regular {
+  font-family: "Freeman", sans-serif;
+  font-weight: 400;
+  font-style: normal;
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-
 import type { Metadata, Viewport } from "next";
 import { Roboto } from "next/font/google";
 import "./globals.css";
@@ -31,8 +30,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+
       <head>
         <link rel="shortcut icon" href="/konan_logo.webp" type="image/webp" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.googleapis.com/css2?family=Freeman&display=swap" rel="stylesheet"></link>
       </head>
       <body className={roboto.className}>
         <Layout>{children}</Layout>

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Navbar, Footer, Hero, Mint_nft, Business, Team } from "@/components";
 import { Box } from "@mui/material";
 

diff --git a/apps/web/src/app/profile/page.tsx b/apps/web/src/app/profile/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Navbar, Footer } from "@/components";
 import { Hero } from "@/components/profile";
 import { Box } from "@mui/material";

diff --git a/apps/web/src/components/Loading.tsx b/apps/web/src/components/Loading.tsx
@@ -1,7 +1,41 @@
-"use client";
-import { Box } from "@mui/material";
-import React from "react";
-
-export function Loading() {
-  return <Box className="spinner"></Box>;
-}
+export function Loading(props: any) {
+    return (
+
+        <div className="flex absolute w-full h-full z-50 rounded-xl items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-black/70">
+            <div>
+            <svg className="ip mt-20" viewBox="0 0 256 128" width="256px" height="128px" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0">
+                        <stop offset="0%" stopColor="#5ebd3e" />
+                        <stop offset="33%" stopColor="#ffb900" />
+                        <stop offset="67%" stopColor="#f78200" />
+                        <stop offset="100%" stopColor="#e23838" />
+                    </linearGradient>
+                    <linearGradient id="grad2" x1="1" y1="0" x2="0" y2="0">
+                        <stop offset="0%" stopColor="#e23838" />
+                        <stop offset="33%" stopColor="#973999" />
+                        <stop offset="67%" stopColor="#009cdf" />
+                        <stop offset="100%" stopColor="#5ebd3e" />
+                    </linearGradient>
+                </defs>
+                <g fill="none" strokeLinecap="round" strokeWidth="16">
+                    <g className="ip__track" stroke="#ddd">
+                        <path d="M8,64s0-56,60-56,60,112,120,112,60-56,60-56"/>
+                        <path d="M248,64s0-56-60-56-60,112-120,112S8,64,8,64"/>
+                    </g>
+                    <g strokeDasharray="180 656">
+                        <path className="ip__worm1" stroke="url(#grad1)" strokeDashoffset="0" d="M8,64s0-56,60-56,60,112,120,112,60-56,60-56"/>
+                        <path className="ip__worm2" stroke="url(#grad2)" strokeDashoffset="358" d="M248,64s0-56-60-56-60,112-120,112S8,64,8,64"/>
+                    </g>
+                </g>
+            </svg>
+            <h2 className="mt-10 text-center text-3xl font-bold tracking-tight text-white">
+                        Loading...
+            </h2>
+            <div className="flex w-full items-center justify-center mt-10">
+                {props.close&&<button type="button" onClick={props.close} className="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white/70 rounded-lg border border-gray-200/70 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100">Cancel</button>}
+            </div>
+            </div>
+        </div>
+    )
+}
diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
@@ -1,8 +1,6 @@
 "use client";
-
 import React, { useEffect } from "react";
 
-import Image from "next/image";
 import Link from "next/link";
 
 import {

diff --git a/apps/web/src/components/profile/NFTCard.tsx b/apps/web/src/components/profile/NFTCard.tsx
@@ -1,41 +1,110 @@
-import React from "react";
+"use client";
+import React, { useState, Fragment } from "react";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
 import Typography from "@mui/material/Typography";
-import { CardActionArea, CardActions } from "@mui/material";
+import { CardActionArea } from "@mui/material";
 import { nftIPFS } from "@/content/ipfs/ipfs-nft";
-import Link from "next/link";
+import { Dialog, Transition } from '@headlessui/react'
+
 
 export function NFTCard(props: { index: number }) {
+  const [isOpen, sstIsOpen] = useState<boolean>(false)
+
+  function closeModal() {
+    sstIsOpen(false)
+  }
+
   return (
-    <Card sx={{ maxWidth: 345 }}>
-      <CardActionArea>
-        <CardMedia
-          component="img"
-          height="140"
-          image={nftIPFS[props.index].src}
-          alt={nftIPFS[props.index].name}
-          className="transform transition-transform hover:scale-110"
-        />
-        <CardContent>
-          <Typography gutterBottom variant="h5" component="div">
-            {nftIPFS[props.index].name}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            Solo is gold System Architect.
-          </Typography>
-        </CardContent>
-      </CardActionArea>
-      <CardActions>
-        <Link
-          color="primary"
-          href={nftIPFS[props.index].src}
-          className="hover:text-shadow-lg"
-        >
-          Show details
-        </Link>
-      </CardActions>
-    </Card>
+    <div className="m-4 rounded-lg w-3/12	" onClick={()=>{sstIsOpen(true)}}>
+      <Card sx={{ maxWidth: 400, maxHeight: 600 }}>
+        <CardActionArea>
+          <CardMedia
+            component="img"
+            height="80"
+            image={nftIPFS[props.index].src}
+            alt={nftIPFS[props.index].name}
+            className=""
+          />
+          <CardContent>
+            <Typography gutterBottom variant="h5" component="div">
+              {nftIPFS[props.index].name}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Solo is gold System Architect.
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+            <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+            >
+                <div className="fixed inset-0 bg-black bg-opacity-25" />
+            </Transition.Child>
+            <div className="fixed inset-0 overflow-y-auto">
+                <div className="flex min-h-full items-center justify-center p-4 text-center">
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0 scale-95"
+                        enterTo="opacity-100 scale-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100 scale-100"
+                        leaveTo="opacity-0 scale-95"
+                    >
+                        <Dialog.Panel className="w-full max-w-4xl transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-xl transition-all">
+                          <div className="py-2 px-2" style={{"background": "linear-gradient(90deg, transparent 445px, #fff 0) top left, url('/background1.png')"}}>
+                            <div className="flex justify-end mt-2">
+                              <svg onClick={closeModal} className='cursor-pointer' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 50 50">
+                              <path d="M 25 2 C 12.309534 2 2 12.309534 2 25 C 2 37.690466 12.309534 48 25 48 C 37.690466 48 48 37.690466 48 25 C 48 12.309534 37.690466 2 25 2 z M 25 4 C 36.609534 4 46 13.390466 46 25 C 46 36.609534 36.609534 46 25 46 C 13.390466 46 4 36.609534 4 25 C 4 13.390466 13.390466 4 25 4 z M 32.990234 15.986328 A 1.0001 1.0001 0 0 0 32.292969 16.292969 L 25 23.585938 L 17.707031 16.292969 A 1.0001 1.0001 0 0 0 16.990234 15.990234 A 1.0001 1.0001 0 0 0 16.292969 17.707031 L 23.585938 25 L 16.292969 32.292969 A 1.0001 1.0001 0 1 0 17.707031 33.707031 L 25 26.414062 L 32.292969 33.707031 A 1.0001 1.0001 0 1 0 33.707031 32.292969 L 26.414062 25 L 33.707031 17.707031 A 1.0001 1.0001 0 0 0 32.990234 15.986328 z"></path>
+                              </svg>
+                            </div>
+                            <div className="flex px-16 pb-4">
+                              <div className="rounded-lg shadow-2xl p-2 max-h-[500px]">
+                                <img className="ms-auto max-w-xs" src="/main1.png" alt="image description" />
+                                <div className="absolute bottom-5 left-8 rounded-lg bg-orange-100 py-6 px-16"><p className="freeman-regular text-3xl font-medium">Dinosaur #1</p></div>
+                              </div>
+                              <div className="py-6 pl-14 w-full">
+                                <div className="px-2 min-h-48">
+                                  <p className="text-2xl font-medium font-sans">Dinosaur #1</p>
+                                  <p className="text-lg font-sans text-orange-400">Created by SoloLin</p>
+                                  <p className="mt-1 text-xs font-sans">arbitrum sepolia:</p>
+                                  <p className="text-xs font-sans">{"0xf3419771c2551f88a91Db61cB874347f05640172"}</p>
+                                </div>
+                                <div>
+                                  <p className="p-2 text-2xl font-medium font-sans">Accessories</p>
+                                </div>
+                                <div className="flex flex-wrap justify-around">
+                                  <div className="flex justify-center items-center">
+                                    <div className="flex absolute w-40 h-40 z-50 opacity-0 text-2xl font-medium cursor-pointer hover:opacity-90 rounded-xl items-center justify-center bg-black/40">UnLock!</div>
+                                    <div className="flex absolute w-36 h-36 z-40 opacity-30 text-2xl font-medium cursor-pointer rounded-xl items-center justify-center bg-center bg-cover bg-[url('/sunglasses.png')] bg-black/10"></div>
+                                    <img className="rounded-lg border-2 w-40 h-40 opacity-40 p-2" src="https://gateway.pinata.cloud/ipfs/QmeobMV4X8WZNfQJhmUgMFh3gZ6rAsWD63wVuENazZM24Z" alt="image description" />
+                                  </div>
+                                  <div className="flex justify-center items-center">
+                                    <div className="flex absolute w-40 h-40 z-50 opacity-0 text-2xl font-medium cursor-pointer hover:opacity-90 rounded-xl items-center justify-center bg-black/40">UnLock!</div>
+                                    <div className="flex absolute w-36 h-36 z-40 opacity-30 text-2xl font-medium cursor-pointer rounded-xl items-center justify-center bg-center bg-cover bg-[url('/background.png')] bg-black/10"></div>
+                                    <img className="rounded-lg border-2 w-40 h-40 opacity-40 p-2" src="https://gateway.pinata.cloud/ipfs/QmeobMV4X8WZNfQJhmUgMFh3gZ6rAsWD63wVuENazZM24Z" alt="image description" />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </Dialog.Panel>
+                    </Transition.Child>
+                </div>
+            </div>
+        </Dialog>
+    </Transition>
+    </div>
+
   );
 }