Skip to content

Commit 80cf7a5

Browse files
tractorsstractorss
committed
feat(frontend): buy-section
1 parent b87e5a3 commit 80cf7a5

File tree

10 files changed

+199
-47
lines changed

10 files changed

+199
-47
lines changed

‎frontend/src/components/CtaCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const CtaCard: React.FC<ICtaCard> = ({
3838
<ExternalLink
3939
text={arrowLink.text}
4040
url={arrowLink.link.url}
41-
className=" mt-6"
41+
className="mt-6 mb-4"
4242
/>
4343
</div>
4444
);

‎frontend/src/components/PNKToken/BuySection/Exchanges.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Exchange } from "@/queries/pnk-token/token-buy";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
5+
interface IExchanges {
6+
exchanges: Exchange[];
7+
}
8+
9+
const Exchanges: React.FC<IExchanges> = ({ exchanges }) => {
10+
return (
11+
<div className="w-full flex flex-wrap justify-center gap-6 md:gap-16 lg:gap-20 mb-8 md:mb-0">
12+
{exchanges.map((exchange) => (
13+
<Link
14+
href={exchange.url}
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
key={exchange.name}
18+
>
19+
<Image
20+
width={64}
21+
height={64}
22+
src={exchange.icon.url}
23+
alt={exchange.name}
24+
/>
25+
</Link>
26+
))}
27+
</div>
28+
);
29+
};
30+
31+
export default Exchanges;

‎frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
4+
import { Exchange } from "@/queries/pnk-token/token-buy";
5+
6+
interface IFeaturedExchange {
7+
exchange: Exchange;
8+
}
9+
const FeaturedExchange: React.FC<IFeaturedExchange> = ({ exchange }) => {
10+
return (
11+
<Link href={exchange.url} target="_blank" rel="noopener noreferrer">
12+
<div className="h-40 flex flex-col gap-5 items-center justify-center border border-stroke rounded-2xl px-2">
13+
<div className="relative h-16 w-60">
14+
<Image
15+
src={exchange.icon.url}
16+
alt={exchange.name}
17+
fill
18+
/>
19+
</div>
20+
21+
<p className="text-secondary-text">{exchange.name}</p>
22+
</div>
23+
</Link>
24+
);
25+
};
26+
27+
export default FeaturedExchange;

‎frontend/src/components/PNKToken/BuySection/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Exchanges from "./Exchanges";
2+
import FeaturedExchange from "./FeaturedExchange";
3+
4+
import { BuySectionQueryType } from "@/queries/pnk-token/token-buy";
5+
6+
interface IBuySection {
7+
buyData: BuySectionQueryType["pnkTokenPageBuySection"];
8+
}
9+
10+
const BuySection: React.FC<IBuySection> = ({ buyData }) => {
11+
return (
12+
<div className="bg-background-2 py-12 lg:py-24 px-6 lg:px-32">
13+
<h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-16">
14+
{buyData.header}
15+
</h1>
16+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
17+
{buyData.featuredExchanges.map((exchange) => (
18+
<FeaturedExchange key={exchange.name} {...{ exchange }} />
19+
))}
20+
</div>
21+
<Exchanges exchanges={buyData.exchanges}/>
22+
</div>
23+
);
24+
};
25+
26+
export default BuySection;

‎frontend/src/components/PNKToken/Explorers.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { HeroQueryType } from "@/queries/pnk-token/hero";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
5+
interface IExplorers {
6+
explorers: HeroQueryType["tokenExplorers"];
7+
}
8+
9+
const Explorers: React.FC<IExplorers> = ({ explorers }) => {
10+
return (
11+
<div className="flex flex-wrap gap-6 lg:gap-12">
12+
{explorers.map((explorer) => (
13+
<Link
14+
key={explorer.name}
15+
href={explorer.url}
16+
target="_blank"
17+
rel="noopener noreferrer"
18+
className="block relative h-6 min-w-32 items-start"
19+
>
20+
<Image
21+
src={explorer.icon.url}
22+
fill
23+
alt={explorer.name}
24+
className="!w-min"
25+
/>
26+
</Link>
27+
))}
28+
</div>
29+
);
30+
};
31+
32+
export default Explorers;

‎frontend/src/components/PNKToken/Hero.tsx‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,34 @@ import Link from "next/link";
55

66
import Button from "@/components/Button";
77
import { HeroQueryType } from "@/queries/pnk-token/hero";
8+
import Explorers from "./Explorers";
89

910
interface IHero {
10-
heroData: HeroQueryType["pnkTokenPageHero"];
11+
heroData: HeroQueryType;
1112
}
1213

1314
const Hero: React.FC<IHero> = ({ heroData }) => {
15+
const {header, subtitle, buyButton, background} = heroData.pnkTokenPageHero
1416
return (
15-
<div className="relative pt-32 lg:pt-52 pb-56 px-6 lg:px-32">
17+
<div className="relative pt-52 pb-52 lg:pb-56 px-6 lg:px-32">
1618
<div className="space-y-8">
17-
<h1 className="text-3xl lg:text-4xl font-medium">{heroData.header}</h1>
18-
<p className="text-lg">{heroData.subtitle}</p>
19+
<h1 className="text-3xl lg:text-4xl font-medium">{header}</h1>
20+
<p className="text-lg">{subtitle}</p>
1921
<div>
2022
<Link
21-
href={heroData.buyButton.link.url}
23+
href={buyButton.link.url}
2224
target="_blank"
2325
rel="noopener noreferrer"
2426
>
2527
<Button variant="secondary">
26-
<span>{heroData.buyButton.text}</span>
28+
<span>{buyButton.text}</span>
2729
</Button>
2830
</Link>
2931
</div>
30-
<div className="flex flex-wrap gap-6 lg:gap-12 space-x-2">
31-
{heroData.socials.map((social) => (
32-
<Link
33-
key={social.name}
34-
href={social.url}
35-
target="_blank"
36-
rel="noopener noreferrer"
37-
className="block relative h-6 min-w-32"
38-
>
39-
<Image
40-
src={social.icon.url}
41-
fill
42-
alt="social link image"
43-
/>
44-
</Link>
45-
))}
46-
</div>
32+
<Explorers explorers={heroData.tokenExplorers}/>
4733
</div>
4834
<Image
49-
src={heroData.background.url}
35+
src={background.url}
5036
alt="Hero Image Background"
5137
fill
5238
className="absolute top-0 left-0 h-full z-[-1] object-cover"

‎frontend/src/components/PNKToken/TokenNeedSection/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import CtaCard from "@/components/CtaCard";
2-
// import ExternalLink from "@/components/ExternalLink";
2+
import ExternalLink from "@/components/ExternalLink";
33
import { TokenNeedSectionQueryType } from "@/queries/pnk-token/token-need";
44

55
interface ITokenNeedSection {
@@ -10,7 +10,7 @@ const TokenNeedSection: React.FC<ITokenNeedSection> = ({ tokenNeedData }) => {
1010

1111
return (
1212
<div className="bg-background-1 py-12 lg:py-24 px-6 lg:px-32">
13-
<h1 className="text-2xl lg:text-4xl text-primary-text font-medium mb-8">
13+
<h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-8">
1414
{tokenNeedData.header}
1515
</h1>
1616
<p className="text-lg text-secondary-text mb-16">
@@ -21,14 +21,13 @@ const TokenNeedSection: React.FC<ITokenNeedSection> = ({ tokenNeedData }) => {
2121
<CtaCard key={card.title} {...card} />
2222
))}
2323
</div>
24-
{/* TODO: fix type in PR#28 */}
25-
{/* <div className="w-full items-center">
24+
<div className="w-full items-center">
2625
<ExternalLink
2726
text={tokenNeedData.arrowLink.text}
2827
url={tokenNeedData.arrowLink.link.url}
29-
className="mt-12"
28+
className="mt-12 flex-wrap justify-center md:justify-start"
3029
/>
31-
</div> */}
30+
</div>
3231
</div>
3332
);
3433
};

‎frontend/src/pages/pnk-token.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import Footer from "@/components/Footer";
22
import Navbar from "@/components/Navbar";
3+
import BuySection from "@/components/PNKToken/BuySection";
34
import Hero from "@/components/PNKToken/Hero";
45
import TokenNeedSection from "@/components/PNKToken/TokenNeedSection";
56
import TokenomicsSection from "@/components/PNKToken/TokenomicsSection";
67
import { footerQuery, FooterQueryType } from "@/queries/footer";
78
import { navbarQuery, NavbarQueryType } from "@/queries/navbar";
89
import { heroQuery, HeroQueryType } from "@/queries/pnk-token/hero";
10+
import {
11+
buySectionQuery,
12+
BuySectionQueryType,
13+
} from "@/queries/pnk-token/token-buy";
914
import {
1015
tokenNeedSectionQuery,
1116
TokenNeedSectionQueryType,
@@ -19,14 +24,16 @@ import { graphQLClient } from "@/utils/graphQLClient";
1924
interface IPNKtoken {
2025
navbarData: NavbarQueryType;
2126
footerData: FooterQueryType;
22-
heroData: HeroQueryType["pnkTokenPageHero"];
27+
heroData: HeroQueryType;
28+
buyData: BuySectionQueryType["pnkTokenPageBuySection"];
2329
tokenNeedData: TokenNeedSectionQueryType["pnkTokenPageNeedSection"];
2430
tokenomicsData: TokenomicsSectionQueryType["pnkTokenPageTokenomicsSection"];
2531
}
2632

2733
const PNKToken: React.FC<IPNKtoken> = ({
2834
footerData,
2935
heroData,
36+
buyData,
3037
tokenNeedData,
3138
tokenomicsData,
3239
navbarData,
@@ -35,6 +42,7 @@ const PNKToken: React.FC<IPNKtoken> = ({
3542
<div>
3643
<Navbar {...{ navbarData }} />
3744
<Hero {...{ heroData }} />
45+
<BuySection {...{ buyData }} />
3846
<TokenNeedSection {...{ tokenNeedData }} />
3947
<TokenomicsSection {...{ tokenomicsData }} />
4048
<Footer {...{ footerData }} />
@@ -47,19 +55,23 @@ export const getStaticProps = async () => {
4755

4856
const footerData = await graphQLClient.request<FooterQueryType>(footerQuery);
4957
const heroData = await graphQLClient.request<HeroQueryType>(heroQuery);
58+
const buyData = await graphQLClient.request<BuySectionQueryType>(
59+
buySectionQuery
60+
);
5061
const tokenNeedData = await graphQLClient.request<TokenNeedSectionQueryType>(
5162
tokenNeedSectionQuery
5263
);
5364
const tokenomicsData =
5465
await graphQLClient.request<TokenomicsSectionQueryType>(
5566
tokenomicsSectionQuery
5667
);
57-
68+
5869
return {
5970
props: {
6071
navbarData,
6172
footerData,
62-
heroData: heroData.pnkTokenPageHero,
73+
heroData,
74+
buyData: buyData.pnkTokenPageBuySection,
6375
tokenNeedData: tokenNeedData.pnkTokenPageNeedSection,
6476
tokenomicsData: tokenomicsData.pnkTokenPageTokenomicsSection,
6577
},

‎frontend/src/queries/pnk-token/hero.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ export const heroQuery = gql`
1111
url
1212
}
1313
}
14-
socials {
15-
name
14+
background {
1615
url
16+
}
17+
}
18+
tokenExplorers{
1719
icon {
18-
url
20+
url
1921
}
20-
}
21-
background {
22+
name
2223
url
23-
}
2424
}
2525
}
2626
`;
@@ -35,15 +35,15 @@ export type HeroQueryType = {
3535
url: string;
3636
};
3737
};
38-
socials: {
39-
name: string;
40-
url: string;
41-
icon : {
42-
url: string;
43-
}
44-
}[];
4538
background: {
4639
url: string;
4740
};
4841
};
42+
tokenExplorers: {
43+
name: string;
44+
url: string;
45+
icon: {
46+
url: string;
47+
};
48+
}[];
4949
};

‎frontend/src/queries/pnk-token/token-buy.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { gql } from "graphql-request";
2+
3+
export type Exchange = {
4+
url: string;
5+
name: string;
6+
icon: {
7+
url: string;
8+
};
9+
};
10+
11+
export const buySectionQuery = gql`
12+
{
13+
pnkTokenPageBuySection {
14+
header
15+
featuredExchanges {
16+
url
17+
name
18+
icon {
19+
url
20+
}
21+
}
22+
exchanges {
23+
url
24+
name
25+
icon {
26+
url
27+
}
28+
}
29+
}
30+
}
31+
`;
32+
33+
export type BuySectionQueryType = {
34+
pnkTokenPageBuySection: {
35+
header: string;
36+
featuredExchanges: Exchange[];
37+
exchanges: Exchange[];
38+
};
39+
};

0 commit comments

Comments
 (0)