Merge pull request #5 from hollow-leaf/fix/profile-RWD

fix: profile rwd & feat ipfs nft
hollow-leaf · May 11, 2024 · 4b88e77 · 4b88e77
2 parents 6223e5a + 1775016
commit 4b88e77
Show file tree

Hide file tree

Showing 15 changed files with 132 additions and 224 deletions.
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -3,7 +3,7 @@ import { Box } from "@mui/material";
 
 export default function Profile() {
   return (
-    <Box className="bg-white bg-cover bg-center">
+    <Box className="bg-gradient-to-br from-purple-200 via-purple-100 to-purple-50">
       <Navbar />
       <Hero />
       <Mint_nft />

diff --git a/apps/web/src/components/AutoPlaySwipe.tsx b/apps/web/src/components/AutoPlaySwipe.tsx
diff --git a/apps/web/src/components/Mint_nft.tsx b/apps/web/src/components/Mint_nft.tsx
@@ -26,11 +26,11 @@ export function Mint_nft() {
         <Suspense fallback={<Loading />}>
           <Box className="flex w-full overflow-hidden py-6 sm:py-12 md:py-24 lg:py-32 xl:py-12 justify-center items-center mx-auto">
             <Box className="flex flex-col w-full mx-24 gap-10">
-              <Box className="bg-white w-full flex flex-col xl:flex-row py-24 gap-5 xl:px-24 justify-center items-center">
-                <Box className="xl:w-1/2 bg-white  flex justify-center">
+              <Box className="w-full flex flex-col xl:flex-row py-24 gap-5 xl:px-24 justify-center items-center">
+                <Box className="xl:w-1/2 flex justify-center">
                   <Box className="mx-10 flex min-w-80 min-h-80 xl:min-w-120 xl:min-h-28 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')] object-contain py-64" />
                 </Box>
-                <Box className="xl:w-1/2 bg-white xl:py-32 gap-5 flex flex-col px-10 xl:px-0">
+                <Box className="xl:w-1/2 xl:py-32 gap-5 flex flex-col px-10 xl:px-0">
                   <Typography className="text-4xl text-black font-bold">
                     NFT Mint
                   </Typography>

diff --git a/apps/web/src/components/Team.tsx b/apps/web/src/components/Team.tsx
@@ -1,11 +1,13 @@
 "use client";
-import { AutoPlaySwipe } from "@/components/AutoPlaySwipe";
-import { Box, Typography } from "@mui/material";
+import { Box, IconButton, Link, Typography } from "@mui/material";
 import React from "react";
+import Image from "next/image";
+import { images } from "@/content/TeamData"
+import { LinkedIn } from "@mui/icons-material";
 
 export function Team() {
   return (
-    <Box className="flex flex-col justify-center items-center">
+    <Box className="flex flex-col justify-center items-center py-10">
       <Box className="flex flex-col xl:flex-row py-10 xl:py-48 gap-5">
         <Typography className="text-4xl xl:text-8xl font-bold text-black">
           MEET
@@ -15,7 +17,17 @@ export function Team() {
         </Typography>
       </Box>
       <Box className="flex flex-col xl:flex-row mx-auto items-center justify-center align-middle">
-        <AutoPlaySwipe />
+        {images.map((image, index)=>(
+          <Box className="px-5" key={index}>
+            <Image src={image.name} alt={image.label} width={300} height={400} className="rounded-2xl"/>
+            <Typography className="text-2xl font-bold text-black">
+              {image.title}
+            </Typography>
+            <Link href={image.linkedin}>
+              <LinkedIn className="text-2xl hover:text-gray-500" />
+            </Link>
+          </Box>
+        ))}
       </Box>
     </Box>
   );

diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
@@ -59,11 +59,6 @@ export function Footer() {
           <LinkedInIcon />
         </IconButton>
       </Box>
-      <Box sx={{ display: "flex", gap: 2 }}>
-        <Typography variant="body2">
-          <Link href="/">Privacy Policy</Link>
-        </Typography>
-      </Box>
     </Box>
   );
 }

diff --git a/apps/web/src/components/profile/NFTCard.tsx b/apps/web/src/components/profile/NFTCard.tsx
@@ -0,0 +1,38 @@
+import React 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 { nftIPFS } from '@/content/ipfs/ipfs-nft';
+import Link from 'next/link';
+
+export function NFTCard(props: { index: number }) {
+
+  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>
+  );
+}
diff --git a/apps/web/src/components/profile/NftTable.tsx b/apps/web/src/components/profile/NftTable.tsx
@@ -1,51 +1,23 @@
 import React from "react";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
-import Image from "next/image";
-import { NFTdata } from "@/content/NftData";
 import { MediaProps } from "@/interface/MediaInterface";
+import { NFTCard } from "./NFTCard";
+import { nftIPFS } from "@/content/ipfs/ipfs-nft";
+import { IPFSTyeps } from "@/types/IPFSTypes";
 
 function Media(props: MediaProps) {
   const { loading = false } = props;
 
   return (
     <Grid container>
-      {(loading ? Array.from(new Array(4)) : NFTdata).map((item, index) => (
+      {(loading ? Array.from(new Array(nftIPFS.length)) : nftIPFS).map((item, index) => (
         <Box key={index} sx={{ width: 420, marginRight: 0.5, my: 5 }}>
-          {item ? (
-            <Image
-              width={420}
-              height={236}
-              alt={item.title}
-              src={item.src}
-              className="rounded-3xl"
-            />
+          {item  ? (
+            <NFTCard index={index}/>
           ) : (
-            <Skeleton variant="rectangular" width={420} height={236} />
-          )}
-          {item ? (
-            <Box sx={{ pr: 2 }}>
-              <Typography gutterBottom variant="body2">
-                {item.title}
-              </Typography>
-              <Typography
-                display="block"
-                variant="caption"
-                color="text.secondary"
-              >
-                {item.channel}
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                {`${item.views} • ${item.createdAt}`}
-              </Typography>
-            </Box>
-          ) : (
-            <Box sx={{ pt: 0.5 }}>
-              <Skeleton />
-              <Skeleton width="60%" />
-            </Box>
+            <Skeleton variant="rectangular" width={345} height={360} />
           )}
         </Box>
       ))}
@@ -56,6 +28,7 @@ function Media(props: MediaProps) {
 export function NftTable() {
   return (
     <Box sx={{ overflow: "hidden" }}>
+      <Media loading />
       <Media />
     </Box>
   );

diff --git a/apps/web/src/components/profile/SideList.tsx b/apps/web/src/components/profile/SideList.tsx
@@ -37,7 +37,7 @@ export function NestedList() {
   };
 
   return (
-    <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
+    <List className="max-w-360 w-72 bg-white">
       <ListItemButton onClick={() => handleClick(0)}>
         <ListItemText primary="Backround" />
         {openIndex === 0 ? <ExpandLess /> : <ExpandMore />}