Skip to content

Commit b2145bd

Browse files
Otaiki1Otaiki1
authored
Merge pull request #58 from Thekal33d/kal33d-campaign-details-52
Kal33d campaign details 52
2 parents 037ac05 + 7e5e0c5 commit b2145bd

8 files changed

Lines changed: 226 additions & 0 deletions

File tree

‎components/dashboard-components/Banner.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
interface JoinBannerProps {
2+
date: string;
3+
}
4+
5+
const Banner = ({ date }: JoinBannerProps) => {
6+
return (
7+
<div className="flex justify-between w-full">
8+
<div className="flex space-x-3 items-center w-full">
9+
<img src="/users-avatar.png" alt="" />
10+
<p className="text-xl text-[#988C8C]">{date}</p>
11+
</div>
12+
<button className="bg-[#EBFFCB] text-[#70750B] w-[126px] py-2 rounded">
13+
Join
14+
</button>
15+
</div>
16+
);
17+
};
18+
19+
export default Banner;

‎components/dashboard-components/BannerCampaign.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
interface CampaignBannerProps {
2+
otherBg?: string;
3+
title: string;
4+
icon: string;
5+
owner: string;
6+
shareLink: string;
7+
telegramLink: string;
8+
xLink: string;
9+
}
10+
11+
const BannerCampaign = ({
12+
otherBg,
13+
title,
14+
icon,
15+
owner,
16+
shareLink,
17+
telegramLink,
18+
xLink,
19+
}: CampaignBannerProps) => {
20+
return (
21+
<div
22+
className={
23+
!otherBg
24+
? `h-32 nft-pattern bg-cover bg-center bg-no-repeat rounded border border-[#988C8C]`
25+
: `h-32 bg-cover bg-center bg-no-repeat rounded border border-[#988C8C] ${otherBg}`
26+
}
27+
>
28+
<div className="bg-black/50 h-full px-12 py-10 flex justify-between items-center">
29+
<div>
30+
<h1 className="text-[34px] font-bold">{title}</h1>
31+
<p className="text-[16px] text-[#B2A9A9]">
32+
Curated by <img src={icon} alt="" className="inline" />{" "}
33+
{owner}
34+
</p>
35+
</div>
36+
<div>
37+
<p>Share : </p>
38+
<div className="flex space-x-4">
39+
<a
40+
href={shareLink}
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
>
44+
<img
45+
src="/share-icon.svg"
46+
alt="share"
47+
className="w-6 h-6"
48+
/>
49+
</a>
50+
<a
51+
href={telegramLink}
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
>
55+
<img
56+
src="/telegram.svg"
57+
alt="telegram"
58+
className="w-6 h-6"
59+
/>
60+
</a>
61+
<a
62+
href={xLink}
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
>
66+
<img
67+
src="/twitter.svg"
68+
alt="X"
69+
className="w-6 h-6"
70+
/>
71+
</a>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
);
77+
};
78+
79+
export default BannerCampaign;

‎components/pages/CampaignDetailsPage.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { useState } from "react";
2+
import Banner from "../dashboard-components/Banner";
3+
import BannerCampaign from "../dashboard-components/BannerCampaign";
4+
5+
const CampaignDetails = () => {
6+
return (
7+
<div className="px-18 py-16 flex flex-col space-y-4">
8+
<BannerCampaign
9+
title="Early NFT Collector"
10+
icon={"/coiton-logo.png"}
11+
owner="Coiton"
12+
shareLink="/"
13+
telegramLink="/"
14+
xLink="/"
15+
/>
16+
<Banner date="20th May, 5:20pm" />
17+
<div>
18+
<p className="text-[22px]">
19+
This campaign rewards early adopters who mint and hold a
20+
genesis or limited edition NFT. It will be used to give
21+
early community members special access later.
22+
</p>
23+
<p className="mt-3 text-[22px]">
24+
<span className="font-bold">Goal: </span> Distribute limited
25+
NFTs and build early collector hype.
26+
</p>
27+
</div>
28+
<TasksSection />
29+
</div>
30+
);
31+
};
32+
33+
const tasksObj = [
34+
{
35+
title: "Mint the Genesis NFT from a drop page.",
36+
details: [
37+
"Visit the drop page URL",
38+
"Connect your crypto wallet (e.g., MetaMask)",
39+
'Click the "Mint" button',
40+
"Approve the transaction in your wallet",
41+
],
42+
},
43+
{
44+
title: "Hold it in your wallet for at least 7 days (verified via snapshot or chain data)",
45+
details: null,
46+
},
47+
{
48+
title: "Share your NFT on Twitter (bonus task)",
49+
details: null,
50+
},
51+
];
52+
53+
const TasksSection = () => {
54+
const [openIndex, setOpenIndex] = useState(0);
55+
56+
return (
57+
<div className="bg-black p-4 rounded-lg w-full ">
58+
<h2 className="text-white text-lg font-medium mb-2">Tasks</h2>
59+
<div className="space-y-2">
60+
{tasksObj.map((task, idx) => (
61+
<div key={idx}>
62+
<button
63+
className={`w-full flex items-center space-x-5 px-4 py-2 rounded transition-colors focus:outline-none border ${
64+
openIndex === idx
65+
? "bg-[#E0FFB0] border-blue-400"
66+
: "bg-[#E0FFB0] border-transparent"
67+
}`}
68+
onClick={() =>
69+
setOpenIndex(idx === openIndex ? -1 : idx)
70+
}
71+
>
72+
<span className="ml-2 text-2xl text-black">
73+
{openIndex === idx ? "▾" : "▸"}
74+
</span>
75+
<span className="text-black">{task.title}</span>
76+
</button>
77+
{openIndex === idx && task.details && (
78+
<div className="bg-black border border-[#988C8C] rounded px-12 py-4 my-5 mx-8">
79+
<ol className="list-decimal list-inside text-[#EBFFCB] text-[22px] space-y-3">
80+
{task.details.map((step, i) => (
81+
<li key={i}>
82+
{step.includes('"Mint"') ? (
83+
<span>
84+
Click the{" "}
85+
<span className="font-semibold">
86+
"Mint"
87+
</span>{" "}
88+
button
89+
</span>
90+
) : (
91+
step
92+
)}
93+
</li>
94+
))}
95+
</ol>
96+
</div>
97+
)}
98+
</div>
99+
))}
100+
</div>
101+
</div>
102+
);
103+
};
104+
105+
export default CampaignDetails;

‎public/coiton-logo.png‎

876 Bytes
Loading

‎public/share-icon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎public/telegram.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎public/twitter.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/users-avatar.png‎

10.3 KB
Loading

0 commit comments

Comments
 (0)