Skip to content

Commit cb304e8

Browse files
Otaiki1Otaiki1
authored
Merge pull request #64 from Onasachi/create-campaign-user-profile-fix
Create campaign user profile fix
2 parents d4ca3b2 + e5cecdb commit cb304e8

3 files changed

Lines changed: 196 additions & 0 deletions

File tree

‎components/dasboard-components/UserProfile.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { useState } from "react";
2+
import { Github, Send, Wallet, X, Copy, Pencil } from "lucide-react";
3+
4+
const UserProfile = () => {
5+
const [username, setUsername] = useState("Luciferess");
6+
const [email, setEmail] = useState("lulubae@gmail.com");
7+
const [editingField, setEditingField] = useState<string | null>(null);
8+
const [address] = useState("0x742d...f44e");
9+
10+
return (
11+
<div className="bg-zinc-900 rounded-xl p-8 max-w-sm mx-auto mt-8 shadow-lg flex flex-col items-center">
12+
{/* Avatar */}
13+
<div className="w-20 h-20 rounded-full bg-yellow-200 flex items-center justify-center mb-4 text-5xl">
14+
<img
15+
src="/assets/avatar.png"
16+
alt="avatar"
17+
className="w-full h-full rounded-full object-cover"
18+
/>
19+
</div>
20+
{/* Username */}
21+
<h2 className="text-xl font-semibold text-white mb-1">
22+
{username}
23+
</h2>
24+
{/* Social icons */}
25+
<div className="flex gap-4 mb-4 text-zinc-400">
26+
<Github size={20} className="hover:text-white cursor-pointer" />
27+
<Send size={20} className="hover:text-white cursor-pointer" />
28+
<Wallet size={20} className="hover:text-white cursor-pointer" />
29+
<X size={20} className="hover:text-white cursor-pointer" />
30+
</div>
31+
{/* Address row */}
32+
<div className="flex w-full gap-2 mb-4">
33+
<button className="flex-1 bg-lime-200 text-black rounded px-3 py-2 font-mono flex items-center justify-between text-sm">
34+
{address}
35+
<Copy size={16} className="ml-2" />
36+
</button>
37+
<button
38+
className="flex-1 bg-zinc-800 text-zinc-400 rounded px-3 py-2 text-sm cursor-not-allowed"
39+
disabled
40+
>
41+
+ Binding Address
42+
</button>
43+
</div>
44+
{/* Username field */}
45+
<div className="w-full mb-3">
46+
<label className="text-xs text-zinc-400">Username</label>
47+
<div className="relative mt-1">
48+
<input
49+
type="text"
50+
value={username}
51+
readOnly={editingField !== "username"}
52+
onChange={(e) => setUsername(e.target.value)}
53+
className="w-full bg-transparent border border-zinc-600 rounded px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition pr-8"
54+
/>
55+
<button
56+
type="button"
57+
className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-white"
58+
onClick={() =>
59+
setEditingField(
60+
editingField === "username" ? null : "username"
61+
)
62+
}
63+
>
64+
<Pencil size={16} />
65+
</button>
66+
</div>
67+
</div>
68+
{/* Email field */}
69+
<div className="w-full">
70+
<label className="text-xs text-zinc-400">Email address</label>
71+
<div className="relative mt-1">
72+
<input
73+
type="email"
74+
value={email}
75+
readOnly={editingField !== "email"}
76+
onChange={(e) => setEmail(e.target.value)}
77+
className="w-full bg-transparent border border-zinc-600 rounded px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition pr-8"
78+
/>
79+
<button
80+
type="button"
81+
className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-white"
82+
onClick={() =>
83+
setEditingField(
84+
editingField === "email" ? null : "email"
85+
)
86+
}
87+
>
88+
<Pencil size={16} />
89+
</button>
90+
</div>
91+
</div>
92+
</div>
93+
);
94+
};
95+
96+
export default UserProfile;

‎components/dashboard-components/CreateCampaignForm.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { useState } from "react";
2+
import { Plus } from "lucide-react";
3+
4+
const CreateCampaignForm = () => {
5+
const [tasks, setTasks] = useState<string[]>([]);
6+
const [taskInput, setTaskInput] = useState("");
7+
8+
const handleAddTask = () => {
9+
if (taskInput.trim()) {
10+
setTasks([...tasks, taskInput.trim()]);
11+
setTaskInput("");
12+
}
13+
};
14+
15+
return (
16+
<form className="bg-zinc-900 rounded-xl p-8 max-w-4xl mx-auto mt-8 shadow-lg">
17+
<div className="flex justify-between items-center mb-6">
18+
<h2 className="text-2xl font-semibold text-white">
19+
New Campaign
20+
</h2>
21+
<button
22+
type="submit"
23+
className="bg-lime-200 text-black font-medium px-5 py-2 rounded shadow hover:bg-lime-300 transition"
24+
>
25+
Create campaign
26+
</button>
27+
</div>
28+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
29+
<div className="flex flex-col gap-4">
30+
<label className="text-sm text-white">
31+
Name
32+
<input
33+
type="text"
34+
className="mt-1 w-full bg-transparent border border-zinc-600 rounded px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition"
35+
/>
36+
</label>
37+
<label className="text-sm text-white">
38+
Date
39+
<div className="flex items-center gap-2 mt-1">
40+
<input
41+
type="date"
42+
className="w-1/2 bg-transparent border border-zinc-600 rounded px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition"
43+
/>
44+
<span className="text-zinc-400">to</span>
45+
<input
46+
type="date"
47+
className="w-1/2 bg-transparent border border-zinc-600 rounded px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition"
48+
/>
49+
</div>
50+
</label>
51+
</div>
52+
<div className="flex flex-col gap-4">
53+
<label className="text-sm text-white">
54+
Campaign description
55+
<input
56+
type="text"
57+
className="mt-1 w-full bg-transparent border border-zinc-600 rounded px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition"
58+
/>
59+
</label>
60+
<label className="text-sm text-white">
61+
Add tasks
62+
<div className="flex mt-1">
63+
<input
64+
type="text"
65+
value={taskInput}
66+
onChange={(e) => setTaskInput(e.target.value)}
67+
className="flex-1 bg-transparent border border-zinc-600 rounded-l px-3 py-2 text-white focus:outline-none focus:border-lime-200 transition"
68+
placeholder="Task description"
69+
/>
70+
<button
71+
type="button"
72+
onClick={handleAddTask}
73+
className="bg-lime-200 text-black px-4 rounded-r flex items-center justify-center hover:bg-lime-300 transition border border-lime-200 border-l-0"
74+
aria-label="Add task"
75+
>
76+
<Plus size={20} />
77+
</button>
78+
</div>
79+
{/* Show added tasks */}
80+
{tasks.length > 0 && (
81+
<ul className="mt-2 space-y-1">
82+
{tasks.map((task, idx) => (
83+
<li
84+
key={idx}
85+
className="text-xs text-lime-200 bg-zinc-800 rounded px-2 py-1 inline-block"
86+
>
87+
{task}
88+
</li>
89+
))}
90+
</ul>
91+
)}
92+
</label>
93+
</div>
94+
</div>
95+
</form>
96+
);
97+
};
98+
99+
export default CreateCampaignForm;

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)