The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
improve notification docs
+47
-40
+36
-36
app/dashboard/[guildId]/notifications/page.tsx
+36
-36
app/dashboard/[guildId]/notifications/page.tsx
···
1
1
"use client";
2
2
3
-
import { Button, Chip, Tooltip } from "@nextui-org/react";
3
+
import { Button, Chip } from "@nextui-org/react";
4
4
import Image from "next/image";
5
+
import Link from "next/link";
5
6
import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
6
7
import { useCallback, useEffect } from "react";
8
+
import { BiLogoYoutube } from "react-icons/bi";
7
9
import { HiChat, HiExternalLink, HiViewGridAdd } from "react-icons/hi";
8
10
import { useQuery, useQueryClient } from "react-query";
9
11
10
12
import { guildStore } from "@/common/guilds";
13
+
import Fetch from "@/components/button-fetch";
11
14
import MessageCreatorEmbed from "@/components/embed-creator";
15
+
import SelectMenu from "@/components/inputs/select-menu";
12
16
import { ScreenMessage } from "@/components/screen-message";
13
17
import { cacheOptions, getData } from "@/lib/api";
14
18
import SadWumpusPic from "@/public/sad-wumpus.gif";
···
16
20
17
21
import CreateNotification, { Style } from "./create.component";
18
22
import DeleteNotification from "./delete.component";
19
-
import { BiLogoYoutube } from "react-icons/bi";
20
-
import SelectMenu from "@/components/inputs/select-menu";
21
-
import Fetch from "@/components/button-fetch";
22
-
import Link from "next/link";
23
23
24
24
export default function Home() {
25
25
const guild = guildStore((g) => g);
···
102
102
103
103
return (<>
104
104
105
-
<div className="flex flex-wrap items-center gap-2 -mt-2 mb-5">
106
-
{data
107
-
.sort((a, b) => a.creator.username.localeCompare(b.creator.username))
108
-
.map((notification) => (
109
-
<Chip
110
-
key={"guildnotifications-" + notification.id}
111
-
as={Button}
112
-
className="default border-0"
113
-
variant={id === notification.id ? "flat" : "faded"}
114
-
color={id === notification.id ? "secondary" : undefined}
115
-
startContent={
116
-
<span className="opacity-50 relative left-2">
117
-
<BiLogoYoutube />
118
-
</span>
119
-
}
120
-
onClick={() => setNotificationId(notification.id)}
121
-
>
122
-
{notification.creator.username + " "}
123
-
</Chip>
124
-
))
125
-
}
105
+
<div className="flex flex-col-reverse md:flex-row gap-3 -mt-2 mb-5">
126
106
127
-
<CreateNotification
128
-
guildId={guild?.id as string}
129
-
style={Style.Compact}
130
-
addNotification={addNotification}
131
-
setNotificationId={setNotificationId}
132
-
/>
107
+
<div className="flex flex-wrap gap-2">
108
+
{data
109
+
.sort((a, b) => a.creator.username.localeCompare(b.creator.username))
110
+
.map((notification) => (
111
+
<Chip
112
+
key={"guildnotifications-" + notification.id}
113
+
as={Button}
114
+
className="default border-0"
115
+
variant={id === notification.id ? "flat" : "faded"}
116
+
color={id === notification.id ? "secondary" : undefined}
117
+
startContent={
118
+
<span className="opacity-50 relative left-2">
119
+
<BiLogoYoutube />
120
+
</span>
121
+
}
122
+
onClick={() => setNotificationId(notification.id)}
123
+
>
124
+
{notification.creator.username + " "}
125
+
</Chip>
126
+
))
127
+
}
133
128
134
-
<div className="ml-auto flex items-center gap-4">
135
-
<Tooltip content="Created notifications / Limit" closeDelay={0}>
136
-
<span className="dark:text-neutral-600 text-neutral-400 cursor-default">{data.length}/{30}</span>
137
-
</Tooltip>
129
+
<CreateNotification
130
+
guildId={guild?.id as string}
131
+
style={Style.Compact}
132
+
addNotification={addNotification}
133
+
setNotificationId={setNotificationId}
134
+
/>
135
+
</div>
138
136
137
+
<div className="ml-auto flex items-center gap-4 w-full md:w-[unset] mb-auto">
139
138
<Button
140
139
as={Link}
140
+
className="w-full md:w-[unset]"
141
141
href="/docs/notifications"
142
142
target="_blank"
143
143
endContent={<HiExternalLink />}
+11
-4
public/docs/notifications.md
+11
-4
public/docs/notifications.md
···
1
1
- We only support **YouTube**, use [NotifyMe](https://notifyme.bot) or [DisPing](https://disping.xyz) for Twitch, Kick, Twitter, etc.
2
-
- Every guild can have **up to 30 different channels for free**.
3
-
- Notifications are sent within **less than 1 (one) minute**.
2
+
- Every server can have **up to 30 different channels for free**.
3
+
- Notifications are sent with **less than 1 (one) minute delay**.
4
4
- And **free custom message & embed** for every notification individually.
5
5
<br />
6
6
<br />
···
21
21
22
22
### ✏️ Custom message & embed
23
23
You can create a notification message with a **fully customizable message and embed for free**, enabling you to style the messages the way you love.
24
+
<br />
25
+
<br />
24
26
25
-
Image previews might be broken on the site*
27
+
**Note:** Image previews might be broken on the dashboard
26
28
27
29
### 🏓 Pings
28
30
The role that should get notified about new uploads.
31
+
- `@everyone` will ping every member in the server.
32
+
- `@here` will ping every *currently online* member in the server.
33
+
- `@some-role` will ping everyone with that role.
34
+
<br />
35
+
<br />
29
36
30
-
(You can add more pings in the message content like `<@& 1200776778801750167>`)
37
+
**Note:** If Wamellow does not have the `Mention Everyone` permissions inside the channel, it might not be able to actually notify those roles.
31
38
32
39
## Placeholders
33
40
Placeholders allow you to use variables that change from message to message, for example to display information about the uploaded video or creator. They are always enclosed in curly braces, such as `{creator.name}`.