From 43c090a2258e11000509b51a3af744735caa1dd4 Mon Sep 17 00:00:00 2001 From: JenniferIze Date: Sat, 31 May 2025 07:52:32 +0100 Subject: [PATCH 1/4] add navbar --- components/dasboard-components/Navbar.tsx | 22 ++++++++ package-lock.json | 10 ++++ package.json | 1 + public/memoji.svg | 15 ++++++ public/nav-line.svg | 3 ++ public/navbar-icon.svg | 61 +++++++++++++++++++++++ 6 files changed, 112 insertions(+) create mode 100644 components/dasboard-components/Navbar.tsx create mode 100644 public/memoji.svg create mode 100644 public/nav-line.svg create mode 100644 public/navbar-icon.svg diff --git a/components/dasboard-components/Navbar.tsx b/components/dasboard-components/Navbar.tsx new file mode 100644 index 0000000..c9ba07c --- /dev/null +++ b/components/dasboard-components/Navbar.tsx @@ -0,0 +1,22 @@ +import { ChevronDown } from "lucide-react"; + +const Navbar = () => { + return ( +
+ +
+ +
+

Luciferess

+

0x742d...f44e

+
+ + +
+
+ ); +}; + +export default Navbar; diff --git a/package-lock.json b/package-lock.json index 038535d..9c4c237 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@argent/invisible-sdk": "^1.0.0", "animate.css": "^4.1.1", + "lucide-react": "^0.511.0", "next": "15.2.3", "next-themes": "^0.4.4", "react": "^19.0.0", @@ -3582,6 +3583,15 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, + "node_modules/lucide-react": { + "version": "0.511.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz", + "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/package.json b/package.json index d2ebddf..c3995bd 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@argent/invisible-sdk": "^1.0.0", "animate.css": "^4.1.1", + "lucide-react": "^0.511.0", "next": "15.2.3", "next-themes": "^0.4.4", "react": "^19.0.0", diff --git a/public/memoji.svg b/public/memoji.svg new file mode 100644 index 0000000..48d9a62 --- /dev/null +++ b/public/memoji.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/nav-line.svg b/public/nav-line.svg new file mode 100644 index 0000000..e5f6f60 --- /dev/null +++ b/public/nav-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/navbar-icon.svg b/public/navbar-icon.svg new file mode 100644 index 0000000..52f01ed --- /dev/null +++ b/public/navbar-icon.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 53b05fdb1c65c90d7dcc35e76cfb28a4122a0ad1 Mon Sep 17 00:00:00 2001 From: JenniferIze Date: Sat, 31 May 2025 07:55:57 +0100 Subject: [PATCH 2/4] add sidebar --- components/dasboard-components/Sidebar.tsx | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 components/dasboard-components/Sidebar.tsx diff --git a/components/dasboard-components/Sidebar.tsx b/components/dasboard-components/Sidebar.tsx new file mode 100644 index 0000000..6a5112c --- /dev/null +++ b/components/dasboard-components/Sidebar.tsx @@ -0,0 +1,25 @@ +import { ChartNoAxesCombined, House, Network } from "lucide-react"; + +const Sidebar = () => { + return ( +
+ +
+ Home +
+ + +
+ Campaigns +
+ + +
+ Analytics +
+ +
+ ); +}; + +export default Sidebar; From 789c39685add27458baf88fdefb87e57d44da5ac Mon Sep 17 00:00:00 2001 From: JenniferIze Date: Sat, 31 May 2025 08:00:09 +0100 Subject: [PATCH 3/4] add layout --- components/layout/DashboardLayout.tsx | 19 +++++++++++ package-lock.json | 48 +++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 68 insertions(+) create mode 100644 components/layout/DashboardLayout.tsx diff --git a/components/layout/DashboardLayout.tsx b/components/layout/DashboardLayout.tsx new file mode 100644 index 0000000..961d172 --- /dev/null +++ b/components/layout/DashboardLayout.tsx @@ -0,0 +1,19 @@ +import { Outlet } from "react-router-dom"; +import Navbar from "../dasboard-components/Navbar"; +import Sidebar from "../dasboard-components/Sidebar"; + +const DashboardLayout = () => { + return ( + <> + +
+ +
+ +
+
+ + ); +}; + +export default DashboardLayout; diff --git a/package-lock.json b/package-lock.json index 9c4c237..b3d3874 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.4.0", + "react-router-dom": "^7.6.1", "swiper": "^11.2.0" }, "devDependencies": { @@ -2353,6 +2354,15 @@ "simple-wcswidth": "^1.0.1" } }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cookie-es": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.2.2.tgz", @@ -4566,6 +4576,44 @@ "react": "*" } }, + "node_modules/react-router": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz", + "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz", + "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==", + "license": "MIT", + "dependencies": { + "react-router": "7.6.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index c3995bd..cbda821 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.4.0", + "react-router-dom": "^7.6.1", "swiper": "^11.2.0" }, "devDependencies": { From 9a23b96cd23ad08a9bd9d024fd8b58fa6ecdf8ed Mon Sep 17 00:00:00 2001 From: JenniferIze Date: Sat, 31 May 2025 08:10:08 +0100 Subject: [PATCH 4/4] add Dashboard page --- app/globals.css | 47 +++++---- components/dasboard-components/Campaigns.tsx | 102 +++++++++++++++++++ components/pages/Dashboard.tsx | 69 +++++++++++++ public/coiton-logo.png | Bin 0 -> 876 bytes 4 files changed, 201 insertions(+), 17 deletions(-) create mode 100644 components/dasboard-components/Campaigns.tsx create mode 100644 components/pages/Dashboard.tsx create mode 100644 public/coiton-logo.png diff --git a/app/globals.css b/app/globals.css index c551be0..8aebf82 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,37 +3,50 @@ @tailwind utilities; :root { - --background-color: #0d0d0d; - --text-color: #ffffff; + --background-color: #0d0d0d; + --text-color: #ffffff; } [data-theme="light"] { - --background-color: #ffffff; - --text-color: #000000; + --background-color: #ffffff; + --text-color: #000000; } body { - background-color: var(--background-color); - color: var(--text-color); - font-weight: 400; - transition: background-color 0.3s ease, color 0.3s ease; + background-color: var(--background-color); + color: var(--text-color); + font-weight: 400; + transition: background-color 0.3s ease, color 0.3s ease; } @media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + :root { + --background: #0a0a0a; + --foreground: #ededed; + } } .taskProgressBar::-webkit-progress-bar { - background-color: #f0f0f0; - border-radius: 4px; + background-color: #f0f0f0; + border-radius: 4px; } .taskProgressBar::-webkit-progress-value { - background-color: #c4ff63; - border-radius: 4px; + background-color: #c4ff63; + border-radius: 4px; } .animate__animated.animate__zoomIn { - --animate-duration: 0.3s; + --animate-duration: 0.3s; +} +.nft-pattern { + background-image: url("/nft-guy.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +.dao-pattern { + background-image: url("/dao-guy.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; } diff --git a/components/dasboard-components/Campaigns.tsx b/components/dasboard-components/Campaigns.tsx new file mode 100644 index 0000000..5fa5b74 --- /dev/null +++ b/components/dasboard-components/Campaigns.tsx @@ -0,0 +1,102 @@ +import { Dot, User } from "lucide-react"; + +interface CampaignsProps { + campaigns: Campaign[]; +} + +interface Campaign { + id: string; + title: string; + startDate: string; + endDate: string; + owner: string; + activeCount: number; + icon: string; +} +interface CampaignCardProps { + campaign: Campaign; + onClick?: () => void; + otherBg?: string; +} + +const Campaigns = ({ campaigns }: CampaignsProps) => { + return ( +
+ {campaigns.map((campaign) => ( + + ))} +
+ ); +}; + +const CampaignCard = ({ campaign, otherBg }: CampaignCardProps) => { + return ( +
(location.href = `/dashboard/campaign-details`)} + > +
+
+
+
+ +
+ {" "} + + {campaign.activeCount} + +
+ +
+
+
+ +
+ Icon + + {campaign.owner} + +
+ +
+ +

+ {campaign.title} +

+
+
+
+
+
+
+

{campaign.startDate}

+

{campaign.endDate}

+
+
+ +
+ + Live +
+ +
+
+
+ ); +}; + +export default Campaigns; diff --git a/components/pages/Dashboard.tsx b/components/pages/Dashboard.tsx new file mode 100644 index 0000000..d34efb4 --- /dev/null +++ b/components/pages/Dashboard.tsx @@ -0,0 +1,69 @@ +import Campaigns from "../dasboard-components/Campaigns"; + +const activeCampaigns = [ + { + id: "1", + title: "Early NFT Collector", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 14, + icon: "/coiton-logo.png", + }, + { + id: "2", + title: "DAO Voter", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Layer3", + activeCount: 987, + icon: "/coiton-logo.png", + }, + { + id: "3", + title: "TestNet Explorer", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 14, + icon: "/coiton-logo.png", + }, + { + id: "4", + title: "Dao Voter", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Layer3", + activeCount: 987, + icon: "/coiton-logo.png", + }, + { + id: "5", + title: "Early NFT Collector", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 14, + icon: "/coiton-logo.png", + }, + { + id: "6", + title: "Early NFT Collector", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 987, + icon: "/coiton-logo.png", + }, +]; +const Dashboard = () => { + return ( +
+

Campaigns

+

Trending campaigns

+ +
+ ); +}; + +export default Dashboard; diff --git a/public/coiton-logo.png b/public/coiton-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..ca7af7b3014cbe88ff7d3abefdde8ce1572ee08c GIT binary patch literal 876 zcmV-y1C#uTP)?lES+EG@R zU#^FK6+ubH9H(7JI$xrr=gjDnC*NqFO(m%`8v}Fm!GFK@u1b#Vl+9m&Sez({lhJQQ zd#6r?HFG-D$ms1<_37PX2P!tkCj8GH)`=IdSLkS;fa}_rY)B))YdJo^MZ#&Yde_VZ!rR=dwXGXJ^}WU4yl1bWZO0fh@j&@YHjI6 z5}vHU5zcaRDs(JH?J0Pr#GB()5G0@;1IIhNuwnU9M9*Ks@Wpdzt~v@ugjxu&yqOhT z55)?YQJV2 z-r{Xd4bq*RnJk>Waua*Dtizg;GQ9lMf>&Q#5pMYm$M2eav@=iT?#pb-luA81nz?qe zrx&kIR%3N>37)rn#FD}y1e`3)IdTxukp%33pNt|ST^I6o{bh!V@?xiaZJUgANapca z#>Q074=gAvMfv;^MEVC1e%A=N4t#+Cgt60OOKRFmg~D@965%^_tX9Y3dv!cP(!w^r zi*y=_Ze;|v9UsZWGbe*{!TheR>l<#Q!!PztMA zMREQCmY=&$r)3e*YbHfRMY=+s*7ggD?(VL?pYv~QT3OmH)c5}Y0000