Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: accessory page #6

Merged
merged 1 commit into from
May 12, 2024
Merged

feat: accessory page #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/public/sw.js
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 18 additions & 0 deletions apps/web/src/app/globals.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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