Skip to content

Commit 8f593af

Browse files
LanttcatLanttcat
committed
refactor: use layout component for page
1 parent 1a2a44d commit 8f593af

17 files changed

+481
-459
lines changed

‎components/Footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { FrontendVersion } from "../version"
66
export const Footer = memo(() => {
77
const [backendVersion] = useLocalStorageValue(BACKEND_VERSION)
88
return (
9-
<footer className="border-b p-6">
9+
<footer className="border-b p-6 flex justify-center">
1010
<p>Frontend Version: {FrontendVersion} &nbsp;
1111
Backend Version: {backendVersion} &nbsp;
1212
& <a href="https://ipfs.io/">IPFS</a> &nbsp;

‎components/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Footer } from "./Footer"
33

44
export const Layout =memo( ({ children }) => {
55
return (
6-
<main>
6+
<main style={{ minHeight: 'calc(100vh - 140px)' }} className='flex flex-col justify-between'>
77
{ children }
88
<Footer />
99
</main>

‎pages/_app.tsx

+60-61
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ function App({ Component, pageProps }) {
122122
<button
123123
suppressHydrationWarning
124124
onClick={connectWallet}
125-
className="font-bold mt-2 bg-pink-500 rounded p-2 text-white"
125+
className="font-bold bg-pink-500 rounded p-2 text-white"
126126
>
127127
ConnectWallet
128128
</button>
@@ -134,7 +134,7 @@ function App({ Component, pageProps }) {
134134
<button
135135
suppressHydrationWarning
136136
onClick={() => switchNetwork(provider)}
137-
className="font-bold mt-2 bg-pink-500 rounded p-2 text-white"
137+
className="font-bold bg-pink-500 rounded p-2 text-white"
138138
>
139139
Switch Network
140140
</button>
@@ -149,70 +149,69 @@ function App({ Component, pageProps }) {
149149
<title>Creative Comomons NFT Playground</title>
150150
<link rel="icon" href="/favicon.ico"/>
151151
</Head>
152-
153152
<nav className="border-b p-6">
154-
<p className="text-4xl font-bold">Creative Commons NFT Playground</p>
155-
<div className="flex justify-around">
156-
<Navigation/>
153+
<div className="flex justify-between items-center">
154+
<h1 className="text-4xl font-bold">Creative Commons NFT Playground</h1>
157155
<div>
158156
{renderActionButton()}
157+
{
158+
account && isSupportCurrentNetwork &&
159+
<div>
160+
<Menu as="div" className="relative inline-block text-left">
161+
<div>
162+
<Menu.Button
163+
className="inline-flex justify-center w-full px-2 py-2 font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
164+
<ChevronDownIcon
165+
className="w-5 h-5 text-violet-200 hover:text-violet-100"
166+
aria-hidden="true"
167+
/>
168+
</Menu.Button>
169+
</div>
170+
<Transition
171+
as={Fragment}
172+
enter="transition ease-out duration-100"
173+
enterFrom="transform opacity-0 scale-95"
174+
enterTo="transform opacity-100 scale-100"
175+
leave="transition ease-in duration-75"
176+
leaveFrom="transform opacity-100 scale-100"
177+
leaveTo="transform opacity-0 scale-95"
178+
>
179+
<Menu.Items
180+
className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
181+
<div className="px-1 py-1">
182+
<Menu.Item>
183+
{({ active }) => (
184+
<button
185+
className={`${
186+
active ? "bg-blue-500 text-gray-300" : "text-gray-900"
187+
} group flex rounded-md items-center w-full px-2 py-2 text-sm`}
188+
>
189+
id: {getBrief(account)}
190+
</button>
191+
)}
192+
</Menu.Item>
193+
<Menu.Item>
194+
{({ active }) => (
195+
<button
196+
onClick={disconnectWallet}
197+
className={`${
198+
active ? "bg-blue-500 text-gray-300" : "text-gray-900"
199+
} group flex rounded-md items-center w-full px-2 py-2 text-sm`}
200+
>
201+
Logout
202+
</button>
203+
)}
204+
</Menu.Item>
205+
</div>
206+
</Menu.Items>
207+
</Transition>
208+
</Menu>
209+
</div>
210+
}
159211
</div>
160212
</div>
161-
162-
<div
163-
style={{ display: account && isSupportCurrentNetwork ? "block" : "none" }}
164-
className="absolute top-8 right-8 text-right fixed "
165-
>
166-
<Menu as="div" className="relative inline-block text-left">
167-
<div>
168-
<Menu.Button
169-
className="inline-flex justify-center w-full px-2 py-2 font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
170-
<ChevronDownIcon
171-
className="w-5 h-5 text-violet-200 hover:text-violet-100"
172-
aria-hidden="true"
173-
/>
174-
</Menu.Button>
175-
</div>
176-
<Transition
177-
as={Fragment}
178-
enter="transition ease-out duration-100"
179-
enterFrom="transform opacity-0 scale-95"
180-
enterTo="transform opacity-100 scale-100"
181-
leave="transition ease-in duration-75"
182-
leaveFrom="transform opacity-100 scale-100"
183-
leaveTo="transform opacity-0 scale-95"
184-
>
185-
<Menu.Items
186-
className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
187-
<div className="px-1 py-1">
188-
<Menu.Item>
189-
{({ active }) => (
190-
<button
191-
className={`${
192-
active ? "bg-blue-500 text-gray-300" : "text-gray-900"
193-
} group flex rounded-md items-center w-full px-2 py-2 text-sm`}
194-
>
195-
id: {getBrief(account)}
196-
</button>
197-
)}
198-
</Menu.Item>
199-
200-
<Menu.Item>
201-
{({ active }) => (
202-
<button
203-
onClick={disconnectWallet}
204-
className={`${
205-
active ? "bg-blue-500 text-gray-300" : "text-gray-900"
206-
} group flex rounded-md items-center w-full px-2 py-2 text-sm`}
207-
>
208-
Logout
209-
</button>
210-
)}
211-
</Menu.Item>
212-
</div>
213-
</Menu.Items>
214-
</Transition>
215-
</Menu>
213+
<div className="flex justify-around">
214+
<Navigation/>
216215
</div>
217216
</nav>
218217
<Web3Context.Provider value={web3ContextValue}>

‎pages/all-assets.js

+17-14
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { nftaddress, nftmarketaddress } from "../config"
88
import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
99
import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
1010
import { useWeb3 } from "../hooks/useWeb3"
11+
import { Layout } from "../components/Layout"
1112

1213
export default function AllAssets() {
1314
const [nfts, setNfts] = useState([])
@@ -56,24 +57,26 @@ export default function AllAssets() {
5657
setLoadingState("loaded")
5758
}
5859
if (loadingState === "loaded" && !nfts.length)
59-
return <h1 className="py-10 px-20 text-3xl">No assets created</h1>
60+
return <Layout><h1 className="py-10 px-20 text-3xl">No assets created</h1></Layout>
6061
return (
61-
<div>
62-
<div className="p-4">
63-
<h2 className="text-2xl py-2">Items Created</h2>
64-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
65-
{nfts.map((nft, i) => (
66-
<div key={i} className="border shadow rounded-xl overflow-hidden">
67-
<img src={nft.image} className="rounded" />
68-
<div className="p-4 bg-black">
69-
<p className="text-2xl font-bold text-white">
62+
<Layout>
63+
<div>
64+
<div className="p-4">
65+
<h2 className="text-2xl py-2">Items Created</h2>
66+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
67+
{nfts.map((nft, i) => (
68+
<div key={i} className="border shadow rounded-xl overflow-hidden">
69+
<img src={nft.image} className="rounded" />
70+
<div className="p-4 bg-black">
71+
<p className="text-2xl font-bold text-white">
7072
Price - {nft.price} Eth
71-
</p>
73+
</p>
74+
</div>
7275
</div>
73-
</div>
74-
))}
76+
))}
77+
</div>
7578
</div>
7679
</div>
77-
</div>
80+
</Layout>
7881
)
7982
}

‎pages/article.js

+40-37
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
1616
import { providers } from "ethers"
1717
import { init } from "@textile/eth-storage"
1818
import { useWeb3 } from "../hooks/useWeb3"
19+
import { Layout } from "../components/Layout"
1920

2021
let ethAccount
2122
let myethAccount
@@ -160,54 +161,56 @@ export default function MyAssets() {
160161
}
161162

162163
if (loadingState != "loaded" && !("name" in nft))
163-
return <h1 className="py-10 px-20 text-3xl"></h1>
164+
return <Layout><h1 className="py-10 px-20 text-3xl"></h1></Layout>
164165
if (loadingState === "loaded" && !("name" in nft))
165-
return <h1 className="py-10 px-20 text-3xl">No creation</h1>
166+
return <Layout><h1 className="py-10 px-20 text-3xl">No creation</h1></Layout>
166167
return (
167-
<div className="flex justify-center">
168-
<div className="p-4">
169-
<div className="border shadow rounded-xl overflow-hidden">
170-
<img src={nft.image} className="rounded" />
171-
<div className="p-4">
172-
<p className="text-3xl font-semibold flex justify-center">
173-
{nft.name}
174-
</p>
175-
<div className="markdown">
176-
<ReactMarkdown escapeHtml={true}>{nft.description}</ReactMarkdown>
177-
</div>
178-
<p>
168+
<Layout>
169+
<div className="flex justify-center">
170+
<div className="p-4">
171+
<div className="border shadow rounded-xl overflow-hidden">
172+
<img src={nft.image} className="rounded" />
173+
<div className="p-4">
174+
<p className="text-3xl font-semibold flex justify-center">
175+
{nft.name}
176+
</p>
177+
<div className="markdown">
178+
<ReactMarkdown escapeHtml={true}>{nft.description}</ReactMarkdown>
179+
</div>
180+
<p>
179181
By:
180-
<a href={"/articles?author=" + nft.authors[0].wallet.eth}>
181-
{nft.authors[0].name}
182-
</a>
182+
<a href={"/articles?author=" + nft.authors[0].wallet.eth}>
183+
{nft.authors[0].name}
184+
</a>
183185
&nbsp;&nbsp;&nbsp;&nbsp;Author-Wallet: {nft.authors[0].wallet.eth}
184-
</p>
186+
</p>
185187

186-
<p>Tags: {nft.tags}</p>
187-
<p>
188+
<p>Tags: {nft.tags}</p>
189+
<p>
188190
License: <a href={nft.license_url}>{nft.license}</a>
189-
</p>
191+
</p>
190192

191-
{!("minted" in nft) && nft.authors[0].wallet.eth == myethAccount && (
192-
<button
193-
onClick={createMint}
194-
className="font-bold mt-4 bg-pink-500 text-white rounded p-4 shadow-lg"
195-
>
193+
{!("minted" in nft) && nft.authors[0].wallet.eth == myethAccount && (
194+
<button
195+
onClick={createMint}
196+
className="font-bold mt-4 bg-pink-500 text-white rounded p-4 shadow-lg"
197+
>
196198
Mint (Will sign 2 times. Be patient...)
197-
</button>
198-
)}
199-
<br />
200-
{nft.authors[0].wallet.eth == myethAccount && (
201-
<button
202-
onClick={storeNFTtoFilecoin}
203-
className="font-bold mt-4 bg-pink-500 text-white rounded p-4 shadow-lg"
204-
>
199+
</button>
200+
)}
201+
<br />
202+
{nft.authors[0].wallet.eth == myethAccount && (
203+
<button
204+
onClick={storeNFTtoFilecoin}
205+
className="font-bold mt-4 bg-pink-500 text-white rounded p-4 shadow-lg"
206+
>
205207
Store NFT on the Filecoin network(optional)
206-
</button>
207-
)}
208+
</button>
209+
)}
210+
</div>
208211
</div>
209212
</div>
210213
</div>
211-
</div>
214+
</Layout>
212215
)
213216
}

‎pages/articles-all.js

+20-19
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { ethers } from "ethers"
21
import { useEffect, useState } from "react"
32
import axios from "axios"
4-
5-
import { nftmarketaddress, nftaddress } from "../config"
3+
import { Layout } from "../components/Layout"
64

75
let ethAccount
6+
87
export default function MyAssets() {
98
const [nfts, setNfts] = useState([])
109
const [loadingState, setLoadingState] = useState("not-loaded")
@@ -28,26 +27,28 @@ export default function MyAssets() {
2827
return <h1 className="py-10 px-20 text-3xl">No creations</h1>
2928

3029
return (
31-
<div className="flex justify-center">
32-
<div className="p-4">
33-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
34-
{nfts.map((nft, i) => (
35-
<div key={i} className="border shadow rounded-xl overflow-hidden">
36-
<img src={nft.image} className="rounded" />
37-
<div className="p-4">
38-
<a href={"/article?cid=" + nft.path}>
39-
<p className="text-2xl font-semibold">{nft.name}</p>
40-
</a>
41-
<p className="text-2xl font-semibold">
30+
<Layout>
31+
<div className="flex justify-center">
32+
<div className="p-4">
33+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
34+
{nfts.map((nft, i) => (
35+
<div key={i} className="border shadow rounded-xl overflow-hidden">
36+
<img src={nft.image} className="rounded" />
37+
<div className="p-4">
38+
<a href={"/article?cid=" + nft.path}>
39+
<p className="text-2xl font-semibold">{nft.name}</p>
40+
</a>
41+
<p className="text-2xl font-semibold">
4242
By:
43-
<a href={"/articles?author=" + nft.eth}>{nft.authors}</a>
44-
</p>
43+
<a href={"/articles?author=" + nft.eth}>{nft.authors}</a>
44+
</p>
4545
Tags: {nft.tags}
46+
</div>
4647
</div>
47-
</div>
48-
))}
48+
))}
49+
</div>
4950
</div>
5051
</div>
51-
</div>
52+
</Layout>
5253
)
5354
}

0 commit comments

Comments
 (0)