The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
new switches/tick-boxes
+36
-28
+8
-4
components/Modal.tsx
+8
-4
components/Modal.tsx
···
74
74
75
75
<div className="flex items-center">
76
76
<span className="text-2xl font-semibold dark:text-neutral-200 text-neutral-800">{title}</span>
77
-
<button
77
+
<Button
78
78
onClick={() => onClose()}
79
-
className="ml-auto dark:bg-neutral-800/50 bg-neutral-200/50 dark:hover:bg-neutral-700/50 hover:bg-neutral-300/50 dark:text-neutral-400 text-neutral-600 dark:hover:text-neutral-200 hover:text-neutral-800 duration-200 rounded-md p-1.5"
79
+
className="ml-auto"
80
+
size="sm"
81
+
isIconOnly
80
82
>
81
-
<HiX className="h-3.5 w-3.5" />
82
-
</button>
83
+
<span>
84
+
<HiX />
85
+
</span>
86
+
</Button>
83
87
</div>
84
88
85
89
<Progress
+28
-24
components/inputs/Switch.tsx
+28
-24
components/inputs/Switch.tsx
···
1
+
import { Checkbox, Switch as UiSwitch } from "@nextui-org/react";
1
2
import { FunctionComponent, useEffect, useState } from "react";
2
-
import { HiCheck } from "react-icons/hi";
3
3
import { TailSpin } from "react-loading-icons";
4
4
5
5
import { RouteErrorResponse } from "@/typings";
6
+
import cn from "@/utils/cn";
6
7
7
8
type Props = {
8
9
className?: string;
···
85
86
}, [value]);
86
87
87
88
return (
88
-
<div className={`relative ${description && "mb-8"} ` + className}>
89
+
<div className={cn("relative", description && "mb-8", className)}>
89
90
90
-
<div className={`flex items-center ${!tickbox && "mb-6"}`}>
91
+
<div className={cn("flex items-center gap-2", !tickbox && "mb-6")}>
91
92
<div className="flex items-center gap-2">
92
-
<span className={`sm:text-lg ${value ? "dark:text-neutral-300 text-neutral-700" : "dark:text-neutral-400 text-neutral-600"} font-medium`}>{name}</span>
93
+
<span className={cn("sm:text-lg font-medium", value ? "dark:text-neutral-300 text-neutral-700" : "dark:text-neutral-400 text-neutral-600")}>{name}</span>
93
94
{state === "LOADING" && <TailSpin stroke="#d4d4d4" strokeWidth={8} className="relative h-3 w-3 overflow-visible" />}
94
95
</div>
95
96
96
-
<label className={`ml-auto relative inline-flex items-center cursor-pointer ${(state === "LOADING" || disabled) && "cursor-not-allowed opacity-50"} duration-700`}>
97
-
<input
98
-
type="checkbox"
99
-
className={"sr-only peer"}
100
-
checked={value}
101
-
onChange={() => {
102
-
setState(undefined);
103
-
setValue(!value);
97
+
{tickbox ?
98
+
<Checkbox
99
+
className="ml-auto"
100
+
isSelected={value}
101
+
onValueChange={(now) => {
102
+
setChanged(true);
103
+
setValue(now);
104
+
}}
105
+
aria-label={name}
106
+
color="secondary"
107
+
isDisabled={disabled}
108
+
/>
109
+
:
110
+
<UiSwitch
111
+
className="ml-auto"
112
+
isSelected={value}
113
+
onValueChange={(now) => {
104
114
setChanged(true);
115
+
setValue(now);
105
116
}}
106
-
disabled={(state === "LOADING" || disabled)}
117
+
aria-label={name}
118
+
color="secondary"
119
+
isDisabled={disabled}
107
120
/>
108
-
{tickbox ?
109
-
<div className={`w-6 h-6 border ${value ? "bg-violet-500/80 border-violet-500/80" : "dark:bg-wamellow bg-wamellow-100 dark:border-wamellow-light border-wamellow-100-light"} rounded-md flex items-center justify-center`}>
110
-
{value && <HiCheck className="dark:text-violet-200 text-violet-800" />}
111
-
</div>
112
-
:
113
-
<div
114
-
className={`w-11 h-6 bg-neutral-300 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all ease-in-out peer-checked:bg-violet-600 ${(state === "LOADING" || disabled) && "cursor-not-allowed"}`}
115
-
/>
116
-
}
117
-
</label>
121
+
}
122
+
</div>
118
123
119
-
</div>
120
124
121
125
<div className="absolute top-6">
122
126
{description && <div className="text-neutral-500 text-sm">{description}</div>}