Skip to content

Commit

Permalink
Merge pull request #6 from hollow-leaf/feat/nft-accessory
Browse files Browse the repository at this point in the history 
feat: accessory page
  • Loading branch information
@crypto0627
crypto0627 authored May 12, 2024
2 parents 4b88e77 + 7e45dec commit 904c22a
Show file tree
Hide file tree
Showing 20 changed files with 273 additions and 213 deletions.
2 changes: 1 addition & 1 deletion apps/web/public/sw.js
View file

Large diffs are not rendered by default.

18 changes: 18 additions & 0 deletions apps/web/src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,21 @@
transform: rotate(1turn);
}
}

#BG {
background-color: red;
animation-name: NFTbackground;
animation-duration: 4s;
animation-iteration-count: infinite;
}

@keyframes NFTbackground {
0% {background-color: red;}
14% {background-color: orange;}
28% {background-color: yellow;}
42% {background-color: green;}
57% {background-color: blue;}
71% {background-color: indigo;}
85% {background-color: violet;}
100% {background-color: red;}
}
12 changes: 9 additions & 3 deletions apps/web/src/components/Team.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { Box, IconButton, Link, Typography } from "@mui/material";
import React from "react";
import Image from "next/image";
import { images } from "@/content/TeamData"
import { images } from "@/content/TeamData";
import { LinkedIn } from "@mui/icons-material";

export function Team() {
Expand All @@ -17,9 +17,15 @@ export function Team() {
</Typography>
</Box>
<Box className="flex flex-col xl:flex-row mx-auto items-center justify-center align-middle">
{images.map((image, index)=>(
{images.map((image, index) => (
<Box className="px-5" key={index}>
<Image src={image.name} alt={image.label} width={300} height={400} className="rounded-2xl"/>
<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>
Expand Down
21 changes: 10 additions & 11 deletions apps/web/src/components/collectionCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
import { Box, Typography } from "@mui/material";
import { Avatar, Box, Typography } from "@mui/material";
import React from "react";
import Image from "next/image";

export function CollectionCard(onClick: any) {
export function CollectionCard() {
return (
<Box className="bg-white rounded-3xl shadow p-4 m-4 bg-opacity-30 text-black">
<Box className="flex mb-2">
<Box className="m-2">
<Image
src={"/konan-hero.webp"}
alt="xuedao logo"
width={80}
height={80}
className="rounded-full"
/>
<Box className="rounded-full overflow-hidden">
<Avatar
src={"/konan-hero.webp"}
alt="Konan logo"
sx={{ width: 56, height: 56 }}
/>
</Box>
</Box>
<Box className="m-2 content-center">
<Typography className="text-xl font-bold ">#Polly Doll</Typography>
<Typography className="text-xl font-bold">#Polly Doll</Typography>
<Typography>@By TheSalvare</Typography>
</Box>
</Box>
Expand Down
43 changes: 5 additions & 38 deletions apps/web/src/components/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,29 @@
import React from "react";

import Image from "next/image";
import Link from "next/link";
import {
Instagram as InstagramIcon,
Telegram as TelegramIcon,
X as XIcon,
Facebook as FacebookIcon,
LinkedIn as LinkedInIcon,
} from "@mui/icons-material";
import { X as XIcon, GitHub } from "@mui/icons-material";
import { IconButton, Typography, Box } from "@mui/material";

export function Footer() {
return (
<Box className="flex w-full shrink-0 flex-col items-center justify-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6 text-black">
<Typography variant="body1" className="text-black">
© 2024 Konan foundation. All rights reserved.
© 2024 Konan Team. All rights reserved.
</Typography>
<Box sx={{ display: "flex", gap: 2 }}>
<IconButton
component="a"
href="/"
target="_blank"
rel="noopener noreferrer"
>
<InstagramIcon />
</IconButton>
<IconButton
component="a"
href="/"
href="https://twitter.com/psyduck_eth"
target="_blank"
rel="noopener noreferrer"
>
<XIcon />
</IconButton>
<IconButton
component="a"
href="/"
target="_blank"
rel="noopener noreferrer"
>
<TelegramIcon />
</IconButton>
<IconButton
component="a"
href="/"
target="_blank"
rel="noopener noreferrer"
>
<FacebookIcon />
</IconButton>
<IconButton
component="a"
href="/"
href="https://github.com/hollow-leaf/Konan"
target="_blank"
rel="noopener noreferrer"
>
<LinkedInIcon />
<GitHub />
</IconButton>
</Box>
</Box>
Expand Down
1 change: 1 addition & 0 deletions apps/web/src/components/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function Hero() {
BY ARTIST
</Typography>
</Box>
{/* 這裡請寫好IPFS資訊在@/content/ipfs中，再導入map */}
<Box className="flex flex-col items-center justify-center gap-x-8 px-12 sm:flex-row sm:px-12 md:px-24 lg:px-32 xl:px-48">
<Box className="flex flex-wrap items-center justify-center">
<Button onClick={handleCardClick} className="rounded-3xl">
Expand Down
189 changes: 117 additions & 72 deletions apps/web/src/components/nftCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
"use client";
import React from "react";
import React, { useState } from "react";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Button, IconButton, Typography } from "@mui/material";
import {
Flag as FlagIcon,
Directions as DirectionsIcon,
Sms as SmsIcon,
} from "@mui/icons-material";
import { Box, IconButton, Typography } from "@mui/material";
import Image from "next/image";
import { DNFT_Text } from "@/content/AccessoryText";

interface NFTCardProps {
openBTN: boolean;
onClose: () => void;
}
export function NFTCard(props: NFTCardProps) {
const [isExpanded, setIsExpanded] = useState(false);

const toggleText = () => {
setIsExpanded(!isExpanded);
};

const handleClose = () => {
props.onClose();
};

const handleBackgroundClick = (event: React.MouseEvent<HTMLDivElement>) => {
if (event.target === event.currentTarget) {
handleClose();
}
};

return (
<Box
className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
Expand All @@ -35,82 +40,122 @@ export function NFTCard(props: NFTCardProps) {
<CloseIcon className="text-3xl" />
</IconButton>
</Box>
<Box className="flex flex-col w-full h-full justify-center items-center rounded-3xl mt-120 xl:mt-0 xl:px-10 xl:py-2 xl:gap-5">
<Box className="flex flex-col w-full xl:h-full justify-center items-center rounded-3xl xl:px-10 xl:py-2 xl:gap-5">
<Box className="basis-1/2 xl:basis-4/6 w-full h-full flex flex-col xl:flex-row gap-3 mb-20 xl:mb-0">
<Box className="basis-1/2 bg-white w-full h-full flex justify-center">
<Box className="mx-10 flex min-w-80 min-h-80 xl:min-w-80 xl:min-h-28 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')] object-contain" />
<Image
src="https://bafybeihuuhqoo5wqbovk4iz6c22wkryogi4wllguxzj3l22472v5btrloi.ipfs.dweb.link/"
alt="dnft"
width={400}
height={300}
/>
</Box>
<Box className="basis-1/2 w-full h-full flex flex-col justify-start items-start gap-3">
<Typography className="text-4xl text-black font-bold">
NFT Mint
</Typography>
<Typography className="text-xl text-black ">
You can also use variant modifiers to target media queries like
responsive breakpoints, dark mode, prefers-reduced-motion, and
more. For example, use md:scroll-m-0 to apply the scroll-m-0
utility at only medium screen sizes and above.
</Typography>
<Typography className="text-xl text-black font-bold">
Price:
Dynamic update your NFT
</Typography>
<Typography className="text-xl text-black font-bold">
Date:
</Typography>
<Box className="flex flex-row gap-2 mt-5">
<IconButton className="border bg-gray-500 rounded-full">
<SmsIcon className="text-white hover:text-black" />
</IconButton>
<IconButton className="border bg-gray-500 rounded-full">
<DirectionsIcon className="text-white hover:text-black" />
</IconButton>
<IconButton className="border bg-gray-500 rounded-full">
<FlagIcon className="text-white hover:text-black" />
</IconButton>
<Button className="bg-gray-500 w-3/4 rounded-3xl text-white hover:bg-gray-500 hover:shadow-lg">
Mint
</Button>
<Box className="text-gray-600">
{isExpanded ? (
<>
<Typography className="text-clip">{DNFT_Text}</Typography>
<button
onClick={toggleText}
className="font-bold hover:text-gray-500"
>
See Less
</button>
</>
) : (
<>
<Typography className="truncate w-64 xl:w-96">
{DNFT_Text}
</Typography>
<button
onClick={toggleText}
className="font-bold hover:text-gray-500"
>
See More
</button>
</>
)}
</Box>
</Box>
</Box>
<Box className="basis-1/2 xl:basis-2/6 w-full h-full flex flex-col xl:flex-row gap-3 mt-32 xl:mt-0">
<Box className="basis-1/4 bg-gray-500 w-full h-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-0">
<Typography className="text-4xl font-bold text-white">
0/500
</Typography>
<Typography className="font-bold text-white px-10">
Fair Launch and distribution-all boars have the same cost of
0.04 ETH
</Typography>
</Box>
<Box className="basis-1/4 bg-gray-500 w-full h-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-0">
<Typography className="text-4xl font-bold text-white">
0/500
</Typography>
<Typography className="font-bold text-white px-10">
Fair Launch and distribution-all boars have the same cost of
0.04 ETH
</Typography>
</Box>
<Box className="basis-1/4 bg-gray-500 w-full h-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-0">
<Typography className="text-4xl font-bold text-white">
0/500
</Typography>
<Typography className="font-bold text-white px-10">
Fair Launch and distribution-all boars have the same cost of
0.04 ETH
</Typography>
{isExpanded ? (
<Box className="basis-1/2 xl:basis-2/6 w-full flex flex-col xl:flex-row gap-3 items-center justify-center">
<Box
className="basis-1/4 w-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-14"
id="BG"
>
<Typography className="text-2xl font-bold text-black">
Wish
</Typography>
<Typography className="text-2xl font-bold text-black">
Background
</Typography>
</Box>
<Box
className="basis-1/4 w-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-14"
id="BG"
>
<Typography className="text-2xl font-bold text-black">
Wish
</Typography>
<Typography className="text-2xl font-bold text-black">
Body
</Typography>
</Box>
<Box
className="basis-1/4 w-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-14"
id="BG"
>
<Typography className="text-2xl font-bold text-black">
Wish
</Typography>
<Typography className="text-2xl font-bold text-black">
Accessory
</Typography>
</Box>
<Box className="pt-12 h-full w-full xl:hidden"></Box>
</Box>
<Box className="basis-1/4 bg-gray-500 w-full h-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-0">
<Typography className="text-4xl font-bold text-white">
0/500
</Typography>
<Typography className="font-bold text-white px-10">
Fair Launch and distribution-all boars have the same cost of
0.04 ETH
</Typography>
) : (
<Box className="basis-1/2 xl:basis-2/6 w-full h-full flex flex-col xl:flex-row gap-3 items-center justify-center">
<Box
className="basis-1/4 w-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-14"
id="BG"
>
<Typography className="text-2xl font-bold text-black">
Wish
</Typography>
<Typography className="text-2xl font-bold text-black">
Background
</Typography>
</Box>
<Box
className="basis-1/4 w-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-14"
id="BG"
>
<Typography className="text-2xl font-bold text-black">
Wish
</Typography>
<Typography className="text-2xl font-bold text-black">
Body
</Typography>
</Box>
<Box
className="basis-1/4 w-full rounded-3xl flex flex-col text-center justify-center py-32 xl:py-14"
id="BG"
>
<Typography className="text-2xl font-bold text-black">
Wish
</Typography>
<Typography className="text-2xl font-bold text-black">
Accessory
</Typography>
</Box>
<Box className="pt-12 h-full w-full xl:hidden"></Box>
</Box>
<Box className="pt-12 h-full w-full xl:hidden"></Box>
</Box>
)}
</Box>
</Box>
</Box>
Expand Down
Loading

0 comments on commit 904c22a

Please sign in to comment.