The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
redesign url clipboard button
+59
-48
+36
-39
app/dashboard/[guildId]/layout.tsx
+36
-39
app/dashboard/[guildId]/layout.tsx
···
165
165
<title>{`${guild?.name}'s Dashboard`}</title>
166
166
167
167
<div className="flex flex-col gap-5 mb-3">
168
-
<Button
169
-
as={Link}
170
-
className="w-fit"
171
-
href="/profile"
172
-
startContent={<HiArrowNarrowLeft />}
173
-
>
174
-
Serverlist
175
-
</Button>
168
+
<div className="flex gap-2">
169
+
<Button
170
+
as={Link}
171
+
className="w-fit"
172
+
href="/profile"
173
+
startContent={<HiArrowNarrowLeft />}
174
+
>
175
+
Serverlist
176
+
</Button>
177
+
{cookies.get("devTools") &&
178
+
<CopyToClipboardButton
179
+
needsWait
180
+
text={getCanonicalUrl("leaderboard", params.guildId.toString())}
181
+
items={[
182
+
{ icon: <HiShare />, name: "Copy page url", description: "Creates a link to this specific page", text: getCanonicalUrl(...path.split("/").slice(1)) },
183
+
{ icon: <HiCursorClick />, name: "Copy dash-to url", description: "Creates a dash-to link to the current tab", text: getCanonicalUrl(`dashboard?to=${path.split("/dashboard/")[1].split("/")[1] || "/"}`) }
184
+
]}
185
+
icon={<HiShare />}
186
+
/>
187
+
}
188
+
</div>
176
189
177
-
<div className="text-lg flex flex-col md:flex-row md:items-center">
178
-
<div className="flex gap-5">
179
-
<Skeleton isLoaded={!!guild?.id} className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0">
180
-
<ImageReduceMotion url={`https://cdn.discordapp.com/icons/${guild?.id}/${guild?.icon}`} size={128} alt="Server" />
181
-
</Skeleton>
190
+
<div className="text-lg flex gap-5">
191
+
<Skeleton isLoaded={!!guild?.id} className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0">
192
+
<ImageReduceMotion url={`https://cdn.discordapp.com/icons/${guild?.id}/${guild?.icon}`} size={128} alt="Server" />
193
+
</Skeleton>
182
194
183
-
{!guild?.id ?
184
-
<div className="mt-1.5">
185
-
<Skeleton className="rounded-xl w-32 h-6 mb-2" />
186
-
<Skeleton className="rounded-xl w-10 h-3.5" />
187
-
</div>
188
-
:
189
-
<div className="flex flex-col gap-1">
190
-
<div className="text-2xl dark:text-neutral-200 text-neutral-800 font-medium">{guild?.name || "Unknown Server"}</div>
191
-
<div className="text-sm font-semibold flex items-center gap-1"> <HiUsers /> {intl.format(guild?.memberCount || 0)}</div>
192
-
</div>
193
-
}
195
+
{!guild?.id ?
196
+
<div className="mt-1.5">
197
+
<Skeleton className="rounded-xl w-32 h-6 mb-2" />
198
+
<Skeleton className="rounded-xl w-10 h-3.5" />
199
+
</div>
200
+
:
201
+
<div className="flex flex-col gap-1">
202
+
<div className="text-2xl dark:text-neutral-200 text-neutral-800 font-medium">{guild?.name || "Unknown Server"}</div>
203
+
<div className="text-sm font-semibold flex items-center gap-1"> <HiUsers /> {intl.format(guild?.memberCount || 0)}</div>
204
+
</div>
205
+
}
194
206
195
-
</div>
196
-
197
-
<div className="md:ml-auto mt-6 md:mt-0">
198
-
{cookies.get("devTools") &&
199
-
<CopyToClipboardButton
200
-
needsWait
201
-
text={getCanonicalUrl("leaderboard", params.guildId.toString())}
202
-
items={[
203
-
{ icon: <HiShare />, name: "Copy page url", description: "Creates a link to this specific page", text: getCanonicalUrl(...path.split("/").slice(1)) },
204
-
{ icon: <HiCursorClick />, name: "Copy dash-to url", description: "Creates a dash-to link to the current tab", text: getCanonicalUrl(`dashboard?to=${path.split("/dashboard/")[1].split("/")[1] || "/"}`) }
205
-
]}
206
-
icon={<HiShare />}
207
-
/>
208
-
}
209
-
</div>
210
207
</div>
211
208
212
209
</div>
+23
-9
components/copy-to-clipboard.tsx
+23
-9
components/copy-to-clipboard.tsx
···
24
24
25
25
const [saved, setSaved] = useState<boolean>(false);
26
26
27
-
const handleCopy = (t: string) => {
27
+
function handleCopy(t: string) {
28
28
navigator.clipboard.writeText(t);
29
29
setSaved(true);
30
30
···
39
39
40
40
<Button
41
41
className="w-full !justify-start"
42
-
color={saved ? "secondary" : undefined}
42
+
color={
43
+
saved
44
+
? "secondary"
45
+
: undefined
46
+
}
43
47
onClick={() => handleCopy(text)}
44
48
startContent={icon}
45
49
>
46
-
{saved ? "Copied to clipboard" : (title || "Copy to clipboard")}
50
+
{saved
51
+
? "Copied to clipboard"
52
+
: (title || "Copy to clipboard")
53
+
}
47
54
</Button>
48
55
49
56
{items &&
50
-
<Dropdown placement="bottom-end">
57
+
<Dropdown
58
+
placement="bottom-end"
59
+
className="backdrop-blur-xl backdrop-brightness-50"
60
+
>
51
61
<DropdownTrigger>
52
62
<Button
53
-
color={saved ? "secondary" : undefined}
54
63
className={className}
64
+
color={
65
+
saved
66
+
? "secondary"
67
+
: undefined
68
+
}
55
69
isIconOnly
56
70
>
57
71
<HiChevronDown />
···
60
74
<DropdownMenu variant="faded">
61
75
{items.map((item, i) => (
62
76
<DropdownItem
63
-
onClick={() => handleCopy(item.text)}
64
-
showDivider={i !== (items?.length || 0) - 1}
65
-
closeOnSelect
66
77
key={i}
78
+
className="backdrop-blur-md backdrop-brightness-75"
79
+
closeOnSelect
80
+
onClick={() => handleCopy(item.text)}
67
81
description={item.description}
82
+
showDivider={i !== (items?.length || 0) - 1}
68
83
startContent={item.icon}
69
-
className="backdrop-blur-md"
70
84
>
71
85
{item.name}
72
86
</DropdownItem>