Skip to content

Commit 3fa6198

Browse files
chin-flagschin-flags
committed
app router, libs folder, database, cleanups
1 parent c392c92 commit 3fa6198

37 files changed

+537
-280
lines changed

‎.env.example

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
INFURA_API_KEY=""
2-
WALLETCONNECT_PROJECT_ID=""
2+
WALLETCONNECT_PROJECT_ID=""
3+
WEB3_STORAGE_TOKEN=""
4+
WEB3_NAME_SERVICE_URL=""

‎app/application/[applicationId]/page.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from "react";
2+
import { notFound } from "next/navigation";
3+
import AppHeader from "../../../components/AppHeader";
4+
import AppDetails from "../../../components/AppDetails";
5+
import { getApplication } from "../../../lib/applications";
6+
7+
const ApplicationPage = async ({ params }: { params: any }) => {
8+
const application = await getApplication(params.applicationId);
9+
10+
if (!application) {
11+
return notFound();
12+
}
13+
14+
const {
15+
title,
16+
category,
17+
applicationUrl,
18+
repoUrl,
19+
description,
20+
screenshots,
21+
} = application;
22+
23+
return (
24+
<div>
25+
<AppHeader
26+
title={title}
27+
logoSrc={screenshots[0]}
28+
applicationUrl={applicationUrl}
29+
/>
30+
31+
<AppDetails
32+
category={category}
33+
description={description}
34+
externalLinks={[repoUrl]}
35+
images={screenshots.slice(0)}
36+
/>
37+
</div>
38+
);
39+
};
40+
41+
export default ApplicationPage;

‎app/layout.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import Head from "next/head";
2+
import { twMerge } from "tailwind-merge";
3+
import { Nav } from "../components/Nav";
4+
import WagmiProvider from "../components/WagmiProvider";
5+
6+
import "../styles/globals.css";
7+
8+
type Props = {
9+
description?: string;
10+
title?: string;
11+
className?: string;
12+
children: React.ReactNode;
13+
};
14+
15+
const Layout: React.FC<Props> = ({
16+
children,
17+
title,
18+
description,
19+
className,
20+
}) => {
21+
const rootClassName = twMerge(
22+
"relative px-4 md:px-20 text-primary-black min-h-screen",
23+
className ? className : ""
24+
);
25+
26+
return (
27+
<html lang="en">
28+
<body>
29+
<WagmiProvider>
30+
<div className={rootClassName}>
31+
<div className="max-w-screen-xl mx-auto">
32+
<Head>
33+
<title>{title}</title>
34+
<meta name="description" content={`${description}`} />
35+
<link rel="icon" href="/favicon.ico" />
36+
</Head>
37+
<Nav />
38+
<main className="">{children}</main>
39+
</div>
40+
<div className="-z-10 w-full h-[130vh] absolute top-5 left-0 bg-hero-pattern bg-no-repeat bg-cover lg:bg-[length:100%_100%]"></div>
41+
</div>
42+
</WagmiProvider>
43+
</body>
44+
</html>
45+
);
46+
};
47+
48+
Layout.defaultProps = {
49+
title: "Polis",
50+
description: "A decentralized DAO marketplace for ConsenSys example Dapps",
51+
};
52+
53+
export default Layout;

‎app/page.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Inter } from "next/font/google";
2+
import Hero from "../components/Hero";
3+
import EditorsPick from "../components/EditorsPick";
4+
5+
const inter = Inter({ subsets: ["latin"] });
6+
7+
const Home = async () => {
8+
return (
9+
<div className={inter.className}>
10+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-6"></div>
11+
12+
<Hero />
13+
{/* @ts-expect-error Async Server Component */}
14+
<EditorsPick />
15+
</div>
16+
);
17+
};
18+
19+
export default Home;

‎components/AppCard.tsx

+27-23
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
import React from "react";
22
import Image from "next/image";
3-
import { AppCardData } from "./types";
43
import { H2, Text } from "./Text";
4+
import Link from "next/link";
55

66
interface AppCardProps {
7-
data: AppCardData;
7+
data: IApplication;
88
}
99

10-
const AppCard: React.FC<AppCardProps> = ({ data }) => {
10+
const AppCard: React.FC<AppCardProps> = ({
11+
data: { id, title, screenshots, description },
12+
}) => {
1113
return (
12-
<div className="border border-white bg-gradient-to-b from-slate-100 to-transparent flex flex-col justify-between p-4 w-fit max-w-sm rounded-2xl shadow-md transition duration-200 transform-gpu hover:shadow-lg hover:scale-105">
13-
<div className="flex justify-end">
14-
<div className="w-12 h-12">
15-
<Image
16-
src={data.logoUrl}
17-
alt={data.appName}
18-
width={48}
19-
height={48}
20-
className="rounded-lg shadow-md"
21-
sizes="100vw"
22-
/>
14+
<div className="flex flex-col justify-between max-w-sm p-4 transition duration-200 border border-white shadow-md bg-gradient-to-b from-slate-100 to-transparent w-fit rounded-2xl transform-gpu hover:shadow-lg hover:scale-105">
15+
<Link href={`/application/${id}`}>
16+
<div className="flex justify-end">
17+
<div className="w-12 h-12">
18+
<Image
19+
src={screenshots[0]}
20+
alt={title}
21+
width={48}
22+
height={48}
23+
className="rounded-lg shadow-md"
24+
sizes="100vw"
25+
/>
26+
</div>
2327
</div>
24-
</div>
25-
<div className="text-left px-4 py-2">
26-
<H2 className="text-xl md:text-2xl lg:text-2xl font-bold mb-2">
27-
{data.appName}
28-
</H2>
29-
<Text className="text-sm md:text-base lg:text-base">
30-
{data.dummyText}
31-
</Text>
32-
</div>
28+
<div className="px-4 py-2 text-left">
29+
<H2 className="mb-2 text-xl font-bold md:text-2xl lg:text-2xl">
30+
{title}
31+
</H2>
32+
<Text className="text-sm md:text-base lg:text-base">
33+
{description}
34+
</Text>
35+
</div>
36+
</Link>
3337
</div>
3438
);
3539
};

‎components/AppDetails.tsx

+22-30
Original file line numberDiff line numberDiff line change
@@ -3,100 +3,92 @@ import Image from "next/image";
33

44
type AppDetailsProps = {
55
category: string[];
6-
tags: string[];
76
description: string;
8-
externalLinks: {
9-
name: string;
10-
url: string;
11-
}[];
12-
images: {
13-
url: string;
14-
alt: string;
15-
}[];
7+
externalLinks: string[];
8+
images: string[];
169
};
1710

1811
const AppDetails: React.FC<AppDetailsProps> = ({
1912
category,
20-
tags,
2113
description,
2214
externalLinks,
2315
images,
2416
}) => {
2517
return (
26-
<div className="py-10 px-4 lg:px-16 container mx-auto">
27-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
18+
<div className="container px-4 py-10 mx-auto lg:px-16">
19+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
2820
{/* First Column */}
2921
<div className="grid grid-rows-3 gap-6">
3022
{/* Category */}
31-
<div className="bg-gradient-to-b from-white to-transparent border border-white shadow-lg backdrop-blur rounded-md p-6">
32-
<h2 className="text-2xl text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary font-bold mb-2">
23+
<div className="p-6 border border-white rounded-md shadow-lg bg-gradient-to-b from-white to-transparent backdrop-blur">
24+
<h2 className="mb-2 text-2xl font-bold text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary">
3325
Category
3426
</h2>
3527
<div className="flex pt-8 space-x-2">
3628
{category.map((cat, index) => (
3729
<span
3830
key={index}
39-
className="border border-gray-500 text-gray-500 rounded-lg px-2 py-1 text-lg hover:bg-slate-200 hover:text-gray-800"
31+
className="px-2 py-1 text-lg text-gray-500 border border-gray-500 rounded-lg hover:bg-slate-200 hover:text-gray-800"
4032
>
4133
{cat}
4234
</span>
4335
))}
4436
</div>
4537
</div>
4638
{/* Description */}
47-
<div className="bg-gradient-to-b from-white to-transparent border border-white shadow-lg backdrop-blur rounded-md p-6">
48-
<h2 className="text-2xl text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary font-bold mb-2">
39+
<div className="p-6 border border-white rounded-md shadow-lg bg-gradient-to-b from-white to-transparent backdrop-blur">
40+
<h2 className="mb-2 text-2xl font-bold text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary">
4941
Description
5042
</h2>
5143
<p className="text-gray-600">{description}</p>
5244
</div>
5345
{/* External Links */}
54-
<div className="bg-gradient-to-b from-white to-transparent border border-white shadow-lg backdrop-blur rounded-md p-6">
55-
<h2 className="text-2xl text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary font-bold mb-2">
46+
<div className="p-6 border border-white rounded-md shadow-lg bg-gradient-to-b from-white to-transparent backdrop-blur">
47+
<h2 className="mb-2 text-2xl font-bold text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary">
5648
External Links
5749
</h2>
58-
<div className="flex space-x-4 pt-8">
50+
<div className="flex pt-8 space-x-4">
5951
{externalLinks.map((link, index) => (
6052
<a
6153
key={index}
62-
href={link.url}
54+
href={link}
6355
className="text-gray-950 hover:underline"
6456
>
65-
{link.name}
57+
{link}
6658
</a>
6759
))}
6860
</div>
6961
</div>
7062
</div>
7163

7264
{/* Second Column */}
73-
<div className="bg-gradient-to-b from-white to-transparent border border-white shadow-lg backdrop-blur rounded-md flex flex-col justify-between p-6">
65+
<div className="flex flex-col justify-between p-6 border border-white rounded-md shadow-lg bg-gradient-to-b from-white to-transparent backdrop-blur">
7466
{/* Preview Title */}
75-
<h2 className="text-2xl text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary font-bold mb-2 pt-8 pb-4">
67+
<h2 className="pt-8 pb-4 mb-2 text-2xl font-bold text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary">
7668
Preview
7769
</h2>
7870
{/* Preview Images */}
7971
<div className="flex flex-col space-y-12">
8072
<Image
81-
src={images[0].url}
82-
alt={images[0].alt}
73+
src={images[0]}
74+
alt=""
8375
width={400}
8476
height={300}
8577
layout="responsive"
8678
className="rounded-lg shadow-md"
8779
/>
8880
<div className="flex space-x-8">
8981
<Image
90-
src={images[1].url}
91-
alt={images[1].alt}
82+
src={images[1]}
83+
alt={"image-1"}
9284
width={200}
9385
height={150}
9486
layout="responsive"
9587
className="rounded-lg shadow-md"
9688
/>
9789
<Image
98-
src={images[2].url}
99-
alt={images[2].alt}
90+
src={images[2]}
91+
alt={"image-2"}
10092
width={200}
10193
height={150}
10294
layout="responsive"

‎components/AppHeader.tsx

+11-17
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,32 @@ import Image from "next/image";
33
import Link from "next/link";
44

55
type AppHeaderProps = {
6-
appName: string;
6+
title: string;
77
logoSrc: string;
8-
websiteLink: string;
8+
applicationUrl: string;
99
};
1010

1111
const AppHeader: React.FC<AppHeaderProps> = ({
12-
appName,
12+
title,
1313
logoSrc,
14-
websiteLink,
14+
applicationUrl,
1515
}) => {
16-
const router = useRouter();
17-
18-
const handleVisitWebsite = () => {
19-
window.open(websiteLink, "_blank", "noopener noreferrer");
20-
};
21-
2216
return (
23-
<header className="flex flex-col sm:flex-row items-center justify-between mx-16 sm:mx-32 px-2 sm:px-32 py-2 mt-8">
17+
<header className="flex flex-col items-center justify-between px-2 py-2 mx-16 mt-8 sm:flex-row sm:mx-32 sm:px-32">
2418
<div className="flex items-center justify-start sm:justify-center">
2519
<Image
2620
src={logoSrc}
27-
alt={`${appName} Logo`}
28-
className="logo w-10 h-10 sm:w-14 sm:h-14"
21+
alt={`${title} Logo`}
22+
className="w-10 h-10 logo sm:w-14 sm:h-14"
2923
width={50}
3024
height={50}
3125
/>
32-
<h1 className="ml-2 text-4xl sm:text-5xl font-bold font-inter text-transparent bg-gradient-to-br bg-clip-text from-primary to-secondary">
33-
{appName}
26+
<h1 className="ml-2 text-4xl font-bold text-transparent sm:text-5xl font-inter bg-gradient-to-br bg-clip-text from-primary to-secondary">
27+
{title}
3428
</h1>
3529
</div>
36-
<Link href={websiteLink} passHref>
37-
<button className="flex items-center mt-2 sm:mt-0 sm:ml-4 px-3 py-2 font-bold border border-gray-500 text-gray-500 rounded-full hover:bg-gray-100 hover:text-gray-700">
30+
<Link href={applicationUrl} passHref>
31+
<button className="flex items-center px-3 py-2 mt-2 font-bold text-gray-500 border border-gray-500 rounded-full sm:mt-0 sm:ml-4 hover:bg-gray-100 hover:text-gray-700">
3832
Visit Website
3933
<i className="fa-sharp fa-solid fa-arrow-up-right-from-square"></i>
4034
</button>

‎components/Button.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react";
22
import Link from "next/link";
33
import { twMerge } from "tailwind-merge";
4-
import type { ButtonVariant } from "./types";
54
import type { PropsWithChildren } from "react";
65

6+
type ButtonVariant = "primary" | "light" | "borderless";
7+
78
const classMap: Record<ButtonVariant, string> = {
89
primary:
910
"px-10 py-3 bg-primary text-white rounded-2xl flex items-center justify-center gap-4 w-fit max-w-xs shadow-md hover:bg-opacity-80 hover:shadow-lg ease-in-out duration-200",

0 commit comments

Comments
 (0)