The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add headers to debug menu
+111
-53
+43
-53
app/(home)/debug/page.tsx
+43
-53
app/(home)/debug/page.tsx
···
1
1
import { Metadata } from "next";
2
-
import { cookies } from "next/headers";
2
+
import { cookies, headers } from "next/headers";
3
3
import Link from "next/link";
4
4
import { HiTrash } from "react-icons/hi";
5
5
6
6
import Box from "@/components/box";
7
7
import { ServerButton } from "@/components/server-button";
8
8
import { Shiggy } from "@/components/shiggy";
9
-
import cn from "@/utils/cn";
10
9
import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
10
+
import Panel from "./panel.component";
11
11
12
12
export const generateMetadata = async (): Promise<Metadata> => {
13
13
const title = "Shiggy";
···
43
43
};
44
44
45
45
export default function Home() {
46
+
const headerList: { name: string, value: string }[] = [];
47
+
for (const [key, value] of headers().entries()) {
48
+
headerList.push({ name: key, value });
49
+
}
50
+
console.log(headerList);
46
51
47
52
if (cookies().get("devTools")?.value !== "true") {
48
53
return (
···
88
93
}
89
94
}
90
95
91
-
const cookieStore = cookies();
92
-
93
96
return (
94
97
<div className="md:flex gap-8">
95
98
96
-
<div className="w-full">
97
-
<h2 className="text-2xl font-medium text-neutral-200">Cookies 🍪</h2>
98
-
99
-
<div className="mt-2 flex flex-col gap-3 divide-y-1 divide-wamellow">
100
-
101
-
{cookieStore.getAll().map((cookie) => (
102
-
<div
103
-
className="pt-2 flex gap-4 items-center justify-between"
104
-
key={cookie.name}
105
-
>
106
-
<div>
107
-
<h3 className="text-lg font-medium text-neutral-200">{cookie.name}</h3>
108
-
109
-
<div className={cn(
110
-
"break-all",
111
-
cookie.name === "session" ? "blur hover:blur-0 transition duration-50" : ""
112
-
)}>
113
-
{cookie.value}
114
-
</div>
115
-
</div>
116
-
117
-
<form action={deleteCookie}>
118
-
<ServerButton
119
-
type="submit"
120
-
isIconOnly
121
-
>
122
-
<HiTrash className="text-red-400" />
123
-
</ServerButton>
124
-
<input className="hidden" type="text" name="name" defaultValue={cookie.name} readOnly />
125
-
</form>
126
-
</div>
127
-
))}
128
-
129
-
</div>
130
-
131
-
<div className="mt-4 flex gap-2 items-center">
132
-
<form action={deleteCookie}>
99
+
<div className="space-y-10">
100
+
<Panel
101
+
name="Cookies 🍪"
102
+
items={cookies().getAll()}
103
+
action={(cookie) => (
104
+
<form action={deleteCookie}>
105
+
<ServerButton
106
+
type="submit"
107
+
isIconOnly
108
+
>
109
+
<HiTrash className="text-red-400" />
110
+
</ServerButton>
111
+
<input className="hidden" type="text" name="name" defaultValue={cookie.name} readOnly />
112
+
</form>
113
+
)}
114
+
>
115
+
<div className="mt-4 flex gap-2 items-center">
116
+
<form action={deleteCookie}>
117
+
<ServerButton
118
+
type="submit"
119
+
>
120
+
Delete all cookies
121
+
</ServerButton>
122
+
</form>
133
123
<ServerButton
134
-
type="submit"
124
+
as={Link}
125
+
href="/logout"
126
+
prefetch={false}
135
127
>
136
-
Delete all cookies
128
+
Logout
137
129
</ServerButton>
138
-
</form>
139
-
<ServerButton
140
-
as={Link}
141
-
href="/logout"
142
-
prefetch={false}
143
-
>
144
-
Logout
145
-
</ServerButton>
146
-
</div>
130
+
</div>
131
+
</Panel>
147
132
133
+
<Panel
134
+
name="Headers 📃"
135
+
items={headerList}
136
+
/>
148
137
</div>
149
138
150
139
<Shiggy className="mt-auto h-52" />
151
140
</div>
152
141
);
153
-
}
142
+
}
143
+
+40
app/(home)/debug/panel.component.tsx
+40
app/(home)/debug/panel.component.tsx
···
1
+
import Row from "./row.component";
2
+
3
+
interface Item {
4
+
name: string;
5
+
value: string;
6
+
}
7
+
8
+
export default function Panel({
9
+
name,
10
+
items,
11
+
action,
12
+
children
13
+
}: {
14
+
name: string;
15
+
items: Item[],
16
+
action?: (item: Item) => React.ReactNode;
17
+
children?: React.ReactNode;
18
+
}) {
19
+
return (
20
+
<div className="w-full">
21
+
<h2 className="text-2xl font-medium text-neutral-200">{name}</h2>
22
+
23
+
<div className="mt-2 flex flex-col gap-3 divide-y-1 divide-wamellow">
24
+
25
+
{items.map((item) => (
26
+
<Row
27
+
name={item.name}
28
+
value={item.value}
29
+
key={item.name}
30
+
>
31
+
{action && action(item)}
32
+
</Row>
33
+
))}
34
+
35
+
</div>
36
+
37
+
{children}
38
+
</div>
39
+
)
40
+
}
+28
app/(home)/debug/row.component.tsx
+28
app/(home)/debug/row.component.tsx
···
1
+
import cn from "@/utils/cn";
2
+
3
+
export default function Row({
4
+
name,
5
+
value,
6
+
children
7
+
}: {
8
+
name: string;
9
+
value: string;
10
+
children: React.ReactNode;
11
+
}) {
12
+
return (
13
+
<div className="pt-2 flex gap-4 items-center justify-between" >
14
+
<div>
15
+
<h3 className="text-lg font-medium text-neutral-200">{name}</h3>
16
+
17
+
<div className={cn(
18
+
"break-all",
19
+
name === "session" && "blur hover:blur-0 transition duration-50"
20
+
)}>
21
+
{value}
22
+
</div>
23
+
</div>
24
+
25
+
{children}
26
+
</div>
27
+
)
28
+
}