shi.gg
+3
-46
app/dashboard/[guildId]/notifications/select.component.tsx
+3
-46
app/dashboard/[guildId]/notifications/select.component.tsx
···
1
1
import { PopoverClose } from "@radix-ui/react-popover";
2
-
import React, { useEffect, useState } from "react";
2
+
import React, { useState } from "react";
3
3
import { BsTwitch, BsYoutube } from "react-icons/bs";
4
4
import { FaBluesky } from "react-icons/fa6";
5
5
6
6
import { badgeVariants } from "@/components/ui/badge";
7
7
import { Button } from "@/components/ui/button";
8
-
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
9
8
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
10
9
import { type ApiV1GuildsModulesNotificationsGetResponse, NotificationType } from "@/typings";
11
10
import { cn } from "@/utils/cn";
···
36
35
add,
37
36
set
38
37
}: Props) {
39
-
const [isMobile, setIsMobile] = useState(false);
40
38
const [platform, setPlatform] = useState<typeof Platform[keyof typeof Platform] | null>(null);
41
39
42
-
useEffect(() => {
43
-
const mediaQuery = window.matchMedia("(max-width: 768px)"); // Adjust breakpoint as needed
44
-
const handleMediaChange = () => setIsMobile(mediaQuery.matches);
45
-
46
-
handleMediaChange(); // Check initial value
47
-
mediaQuery.addEventListener("change", handleMediaChange);
48
-
49
-
return () => mediaQuery.removeEventListener("change", handleMediaChange);
50
-
}, []);
51
-
52
-
const Wrapper = isMobile ? DrawerWrapper : PopoverWrapper;
53
-
54
40
return (<>
55
-
<Wrapper
41
+
<PopoverWrapper
56
42
button={
57
43
<Button
58
44
className={style === Style.Compact ? cn(badgeVariants(), "h-6") : ""}
···
72
58
{Object.keys(Platform)[platform]}
73
59
</Button>
74
60
)}
75
-
</Wrapper>
61
+
</PopoverWrapper>
76
62
77
63
<YoutubeNotificationModal add={add} set={set} isOpen={platform === Platform.YouTube} onClose={() => setPlatform(null)} />
78
64
<TwitchNotificationModal add={add} set={set} isOpen={platform === Platform.Twitch} onClose={() => setPlatform(null)} />
···
112
98
))}
113
99
</PopoverContent>
114
100
</Popover>
115
-
);
116
-
}
117
-
118
-
function DrawerWrapper({
119
-
children,
120
-
button
121
-
}: {
122
-
children: (platform: typeof Platform[keyof typeof Platform]) => React.ReactNode;
123
-
button: React.ReactNode;
124
-
style: typeof Style[keyof typeof Style];
125
-
}) {
126
-
return (
127
-
<Drawer>
128
-
<DrawerTrigger asChild>
129
-
{button}
130
-
</DrawerTrigger>
131
-
<DrawerContent className="space-y-2 wamellow-modal">
132
-
<DrawerHeader>
133
-
<DrawerTitle>Platform</DrawerTitle>
134
-
<DrawerDescription>Select a platform to create notifications for.</DrawerDescription>
135
-
</DrawerHeader>
136
-
137
-
{Object.values(Platform).map((platform) => (
138
-
<DrawerClose key={platform} asChild>
139
-
{children(platform)}
140
-
</DrawerClose>
141
-
))}
142
-
</DrawerContent>
143
-
</Drawer>
144
101
);
145
102
}
146
103
-1
components/click-outside.tsx
-1
components/click-outside.tsx
+12
-9
components/dashboard/lists/selector.tsx
+12
-9
components/dashboard/lists/selector.tsx
···
1
1
"use client";
2
2
3
-
import { Button } from "@nextui-org/react";
4
3
import Link from "next/link";
5
4
import { HiExternalLink, HiPencil } from "react-icons/hi";
6
5
7
6
import { type Guild, guildStore } from "@/common/guilds";
7
+
import { Button } from "@/components/ui/button";
8
8
import { cn } from "@/utils/cn";
9
9
10
10
interface TBase {
···
76
76
key={i.id}
77
77
buttons={<>
78
78
<Button
79
-
color="secondary"
80
-
variant="flat"
79
+
variant="secondary"
80
+
className="bg-secondary/30 text-secondary-800"
81
81
onClick={() => set(i.id)}
82
-
startContent={<HiPencil />}
83
82
>
83
+
<HiPencil />
84
84
Edit
85
85
</Button>
86
86
{deleteButton({
···
99
99
{createButton({ style: 1 })}
100
100
101
101
<Button
102
-
as={Link}
102
+
asChild
103
103
className="w-full md:w-[unset]"
104
-
href={`/docs/${docs}`}
105
-
target="_blank"
106
-
endContent={<HiExternalLink />}
107
104
>
108
-
Read docs & view placeholders
105
+
<Link
106
+
href={`/docs/${docs}`}
107
+
target="_blank"
108
+
>
109
+
Read docs & view placeholders
110
+
<HiExternalLink />
111
+
</Link>
109
112
</Button>
110
113
</div>
111
114
-118
components/ui/drawer.tsx
-118
components/ui/drawer.tsx
···
1
-
"use client";
2
-
3
-
import * as React from "react";
4
-
import { Drawer as DrawerPrimitive } from "vaul";
5
-
6
-
import { cn } from "@/utils/cn";
7
-
8
-
const Drawer = ({
9
-
shouldScaleBackground = true,
10
-
...props
11
-
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
12
-
<DrawerPrimitive.Root
13
-
shouldScaleBackground={shouldScaleBackground}
14
-
{...props}
15
-
/>
16
-
);
17
-
Drawer.displayName = "Drawer";
18
-
19
-
const DrawerTrigger = DrawerPrimitive.Trigger;
20
-
21
-
const DrawerPortal = DrawerPrimitive.Portal;
22
-
23
-
const DrawerClose = DrawerPrimitive.Close;
24
-
25
-
const DrawerOverlay = React.forwardRef<
26
-
React.ElementRef<typeof DrawerPrimitive.Overlay>,
27
-
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
28
-
>(({ className, ...props }, ref) => (
29
-
<DrawerPrimitive.Overlay
30
-
ref={ref}
31
-
className={cn("fixed inset-0 z-50 bg-black/80", className)}
32
-
{...props}
33
-
/>
34
-
));
35
-
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
36
-
37
-
const DrawerContent = React.forwardRef<
38
-
React.ElementRef<typeof DrawerPrimitive.Content>,
39
-
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
40
-
>(({ className, children, ...props }, ref) => (
41
-
<DrawerPortal>
42
-
<DrawerOverlay />
43
-
<DrawerPrimitive.Content
44
-
ref={ref}
45
-
className={cn(
46
-
"fixed inset-x-0 bottom-0 z-50 mt-24 mx-1 px-4 pb-4 flex h-auto flex-col bg-popover/75 backdrop-blur-md rounded-xl shadow-md",
47
-
className
48
-
)}
49
-
{...props}
50
-
>
51
-
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
52
-
{children}
53
-
</DrawerPrimitive.Content>
54
-
</DrawerPortal>
55
-
));
56
-
DrawerContent.displayName = "DrawerContent";
57
-
58
-
const DrawerHeader = ({
59
-
className,
60
-
...props
61
-
}: React.HTMLAttributes<HTMLDivElement>) => (
62
-
<div
63
-
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
64
-
{...props}
65
-
/>
66
-
);
67
-
DrawerHeader.displayName = "DrawerHeader";
68
-
69
-
const DrawerFooter = ({
70
-
className,
71
-
...props
72
-
}: React.HTMLAttributes<HTMLDivElement>) => (
73
-
<div
74
-
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
75
-
{...props}
76
-
/>
77
-
);
78
-
DrawerFooter.displayName = "DrawerFooter";
79
-
80
-
const DrawerTitle = React.forwardRef<
81
-
React.ElementRef<typeof DrawerPrimitive.Title>,
82
-
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
83
-
>(({ className, ...props }, ref) => (
84
-
<DrawerPrimitive.Title
85
-
ref={ref}
86
-
className={cn(
87
-
"text-lg font-semibold leading-none tracking-tight",
88
-
className
89
-
)}
90
-
{...props}
91
-
/>
92
-
));
93
-
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
94
-
95
-
const DrawerDescription = React.forwardRef<
96
-
React.ElementRef<typeof DrawerPrimitive.Description>,
97
-
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
98
-
>(({ className, ...props }, ref) => (
99
-
<DrawerPrimitive.Description
100
-
ref={ref}
101
-
className={cn("text-sm text-muted-foreground", className)}
102
-
{...props}
103
-
/>
104
-
));
105
-
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
106
-
107
-
export {
108
-
Drawer,
109
-
DrawerClose,
110
-
DrawerContent,
111
-
DrawerDescription,
112
-
DrawerFooter,
113
-
DrawerHeader,
114
-
DrawerOverlay,
115
-
DrawerPortal,
116
-
DrawerTitle,
117
-
DrawerTrigger
118
-
};