The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix ListTab highlight & add ListFeature
+68
-22
+68
-22
components/List.tsx
+68
-22
components/List.tsx
···
2
2
import { usePathname, useRouter, useSearchParams } from "next/navigation";
3
3
import React, { FunctionComponent } from "react";
4
4
5
-
interface Props {
5
+
import decimalToRgb from "@/utils/decimalToRgb";
6
+
7
+
interface ListProps {
6
8
tabs: {
7
9
name: string;
8
10
icon?: React.ReactElement;
···
13
15
disabled: boolean;
14
16
}
15
17
16
-
export const ListTab: FunctionComponent<Props> = ({ tabs, url, searchParamName, disabled }) => {
17
-
const path = usePathname();
18
+
export const ListTab: FunctionComponent<ListProps> = ({ tabs, url, searchParamName, disabled }) => {
19
+
const path = usePathname().split(`${url}/`)[1];
18
20
const params = useSearchParams();
19
21
const router = useRouter();
20
22
21
23
return (
22
24
<div className="text-sm font-medium text-center border-b dark:border-wamellow-light border-wamellow-100-light mt-2 mb-6 overflow-x-scroll scrollbar-none">
23
25
<ul className="flex">
24
-
{tabs.map((tab) => (
25
-
<li className="mr-2" key={tab.name}>
26
-
<button
27
-
className={`inline-block p-3 border-b-2 border-transparent rounded-t-lg ${(searchParamName ? (tab.value ? params.get(searchParamName) === tab.value : !tab.value && !params.get(searchParamName)) : path.endsWith(`${url}${tab.value === "/" ? "" : tab.value}`)) && "text-violet-500 border-b-2 border-violet-500"} hover:text-violet-400 duration-200 ${disabled && "cursor-not-allowed"}`}
28
-
onClick={() => {
29
-
if (disabled) return;
26
+
{tabs.map((tab) => {
27
+
28
+
let isCurrent = false;
29
+
if (searchParamName) isCurrent = tab.value ? params.get(searchParamName) === tab.value : !tab.value && !params.get(searchParamName);
30
+
isCurrent ||= (!path && tab.value === "/") || path?.startsWith(tab.value !== "/" ? tab.value.slice(1) : tab.value);
31
+
32
+
return (
33
+
<li className="mr-2" key={tab.name}>
34
+
<button
35
+
className={`inline-block p-3 border-b-2 border-transparent rounded-t-lg ${isCurrent && "text-violet-500 border-b-2 border-violet-500"} hover:text-violet-400 duration-200 ${disabled && "cursor-not-allowed"}`}
36
+
onClick={() => {
37
+
if (disabled) return;
30
38
31
-
if (searchParamName) {
32
-
const newparams = new URLSearchParams();
39
+
if (searchParamName) {
40
+
const newparams = new URLSearchParams();
33
41
34
-
if (tab.value) newparams.append(searchParamName, tab.value);
35
-
else newparams.delete(searchParamName);
42
+
if (tab.value) newparams.append(searchParamName, tab.value);
43
+
else newparams.delete(searchParamName);
36
44
37
-
router.push(`${url}?${newparams.toString()}`);
38
-
}
39
-
else router.push(`${url}${tab.value}`);
40
-
}}
41
-
>
42
-
{tab.name}
43
-
</button>
44
-
</li>
45
-
))}
45
+
router.push(`${url}?${newparams.toString()}`);
46
+
}
47
+
else router.push(`${url}${tab.value}`);
48
+
}}
49
+
>
50
+
{tab.name}
51
+
</button>
52
+
</li>
53
+
);
54
+
55
+
})}
46
56
</ul>
47
57
</div>
48
58
);
59
+
60
+
};
61
+
62
+
interface FeatureProps {
63
+
items: {
64
+
title: string;
65
+
description: string;
66
+
icon: React.ReactNode;
67
+
color: number;
68
+
}[]
69
+
}
70
+
71
+
export const ListFeature: FunctionComponent<FeatureProps> = ({ items }) => {
72
+
73
+
return (
74
+
<div className="grid gap-6 grid-cols-2">
75
+
{items.map((item, index) => {
76
+
77
+
const rgb = decimalToRgb(item.color);
78
+
79
+
return (
80
+
<div
81
+
className="flex items-center gap-3"
82
+
key={index}
83
+
>
84
+
<div className="rounded-full h-12 aspect-square p-[10px] svg-max" style={{ backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`, color: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)` }}>
85
+
{item.icon}
86
+
</div>
87
+
<span className="text-neutral-300">{item.description}</span>
88
+
</div>
89
+
);
90
+
91
+
})}
92
+
</div>
93
+
);
94
+
49
95
};