Skip to content

Commit 1c8a9c6

Browse files
GiselleNessiGiselleNessi
committed
feat: add feedback collection UI to navigation
1 parent 2d12249 commit 1c8a9c6

File tree

2 files changed

+146
-17
lines changed

2 files changed

+146
-17
lines changed

‎apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx‎

Lines changed: 72 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
"use client";
2+
13
import Link from "next/link";
24
import type React from "react";
5+
import { useState } from "react";
36
import type { ThirdwebClient } from "thirdweb";
47
import { NotificationsButton } from "@/components/notifications/notification-button";
58
import type { Account } from "@/hooks/useApi";
@@ -31,6 +34,20 @@ export function SecondaryNav(props: {
3134
}
3235

3336
export function SecondaryNavLinks() {
37+
const [showFeedbackDropdown, setShowFeedbackDropdown] = useState(false);
38+
const [modalFeedback, setModalFeedback] = useState("");
39+
40+
const handleModalSubmit = () => {
41+
console.log("Modal feedback sent:", modalFeedback);
42+
setModalFeedback("");
43+
setShowFeedbackDropdown(false);
44+
};
45+
46+
const handleModalCancel = () => {
47+
setModalFeedback("");
48+
setShowFeedbackDropdown(false);
49+
};
50+
3451
return (
3552
<div className="flex items-center gap-6">
3653
<ResourcesDropdownButton />
@@ -44,14 +61,61 @@ export function SecondaryNavLinks() {
4461
Docs
4562
</Link>
4663

47-
<Link
48-
className="text-muted-foreground text-sm hover:text-foreground"
49-
href="https://feedback.thirdweb.com"
50-
rel="noopener noreferrer"
51-
target="_blank"
52-
>
53-
Feedback
54-
</Link>
64+
<div className="relative">
65+
<button
66+
type="button"
67+
onClick={() => setShowFeedbackDropdown(!showFeedbackDropdown)}
68+
className="text-muted-foreground text-sm hover:text-foreground"
69+
>
70+
Feedback
71+
</button>
72+
73+
{showFeedbackDropdown && (
74+
<div className="absolute top-full right-0 mt-2 bg-background border border-border rounded-2xl p-6 w-96 z-50">
75+
<h2 className="text-foreground text-base font-sans mb-2">
76+
Share your feedback with us:
77+
</h2>
78+
79+
<textarea
80+
value={modalFeedback}
81+
onChange={(e) => setModalFeedback(e.target.value)}
82+
className="w-full bg-background text-foreground rounded-lg p-4 min-h-[120px] resize-none border border-border focus:border-border focus:outline-none placeholder-muted-foreground font-sans mb-4 text-sm"
83+
placeholder="Tell us what you think..."
84+
/>
85+
86+
<div className="flex items-start justify-between gap-4">
87+
<div className="text-muted-foreground text-xs font-sans">
88+
<div>Have a technical issue?</div>
89+
<div>
90+
<Link
91+
href="/team/~/~/support"
92+
className="underline hover:text-foreground transition-colors"
93+
>
94+
Contact support
95+
</Link>
96+
.
97+
</div>
98+
</div>
99+
<div className="flex gap-3 flex-shrink-0">
100+
<button
101+
type="button"
102+
onClick={handleModalCancel}
103+
className="bg-transparent text-foreground px-4 py-1.5 rounded-full font-sans text-sm border border-border hover:bg-muted transition-colors"
104+
>
105+
Cancel
106+
</button>
107+
<button
108+
type="button"
109+
onClick={handleModalSubmit}
110+
className="bg-primary text-primary-foreground px-4 py-1.5 rounded-full font-sans text-sm hover:bg-primary/90 transition-colors"
111+
>
112+
Submit
113+
</button>
114+
</div>
115+
</div>
116+
</div>
117+
)}
118+
</div>
55119
</div>
56120
);
57121
}

‎apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx‎

Lines changed: 74 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
"use client";
22

33
import {
4+
ChevronDownIcon,
5+
ChevronUpIcon,
46
LogOutIcon,
57
MenuIcon,
68
MoonIcon,
@@ -36,6 +38,8 @@ export function MobileBurgerMenuButton(
3638
},
3739
) {
3840
const [isMenuOpen, setIsMenuOpen] = useState(false);
41+
const [showFeedbackSection, setShowFeedbackSection] = useState(false);
42+
const [modalFeedback, setModalFeedback] = useState("");
3943
const { setTheme, theme } = useTheme();
4044
const ensQuery = useEns({
4145
addressOrEnsName:
@@ -44,6 +48,17 @@ export function MobileBurgerMenuButton(
4448
});
4549
// const [isCMDSearchModalOpen, setIsCMDSearchModalOpen] = useState(false);
4650

51+
const handleModalSubmit = () => {
52+
console.log("Modal feedback sent:", modalFeedback);
53+
setModalFeedback("");
54+
setShowFeedbackSection(false);
55+
};
56+
57+
const handleModalCancel = () => {
58+
setModalFeedback("");
59+
setShowFeedbackSection(false);
60+
};
61+
4762
useLayoutEffect(() => {
4863
if (isMenuOpen) {
4964
document.body.style.overflow = "hidden";
@@ -71,7 +86,7 @@ export function MobileBurgerMenuButton(
7186
</Button>
7287

7388
{isMenuOpen && (
74-
<div className="fade-in-0 fixed inset-0 z-50 flex animate-in flex-col bg-background p-6 duration-200">
89+
<div className="fade-in-0 fixed inset-0 z-50 flex animate-in flex-col bg-background p-6 duration-200 overflow-y-auto">
7590
<Button
7691
className="!h-auto absolute top-4 right-4 p-1"
7792
onClick={() => setIsMenuOpen(false)}
@@ -191,14 +206,64 @@ export function MobileBurgerMenuButton(
191206
Docs
192207
</Link>
193208

194-
<Link
195-
className="text-muted-foreground hover:text-foreground"
196-
href="https://feedback.thirdweb.com"
197-
rel="noopener noreferrer"
198-
target="_blank"
199-
>
200-
Feedback
201-
</Link>
209+
<div className="flex flex-col gap-3">
210+
<button
211+
type="button"
212+
className="flex items-center justify-between text-muted-foreground hover:text-foreground"
213+
onClick={() => setShowFeedbackSection(!showFeedbackSection)}
214+
>
215+
<span>Feedback</span>
216+
{showFeedbackSection ? (
217+
<ChevronUpIcon className="size-4" />
218+
) : (
219+
<ChevronDownIcon className="size-4" />
220+
)}
221+
</button>
222+
223+
{showFeedbackSection && (
224+
<div className="bg-muted/50 rounded-lg p-4 space-y-4 mb-8">
225+
<h3 className="text-sm font-medium text-foreground">
226+
Share your feedback with us:
227+
</h3>
228+
229+
<textarea
230+
value={modalFeedback}
231+
onChange={(e) => setModalFeedback(e.target.value)}
232+
className="w-full bg-background text-foreground rounded-lg p-3 min-h-[100px] resize-none border border-border focus:border-border focus:outline-none placeholder-muted-foreground font-sans text-sm"
233+
placeholder="Tell us what you think..."
234+
/>
235+
236+
<div className="flex flex-col gap-3">
237+
<p className="text-muted-foreground text-xs">
238+
Have a technical issue?{" "}
239+
<Link
240+
href="/team/~/~/support"
241+
className="underline hover:text-foreground transition-colors"
242+
>
243+
Contact support
244+
</Link>
245+
.
246+
</p>
247+
<div className="flex gap-3">
248+
<button
249+
type="button"
250+
onClick={handleModalCancel}
251+
className="flex-1 bg-transparent text-foreground px-3 py-2 rounded-lg font-sans text-sm border border-border hover:bg-muted transition-colors"
252+
>
253+
Cancel
254+
</button>
255+
<button
256+
type="button"
257+
onClick={handleModalSubmit}
258+
className="flex-1 bg-primary text-primary-foreground px-3 py-2 rounded-lg font-sans text-sm hover:bg-primary/90 transition-colors"
259+
>
260+
Submit
261+
</button>
262+
</div>
263+
</div>
264+
</div>
265+
)}
266+
</div>
202267
</div>
203268

204269
<div className="h-6" />

0 commit comments

Comments
 (0)