1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./addonCard.css";
import { classNameFactory } from "@api/Styles";
import { Badge } from "@components/Badge";
import { Switch } from "@components/Switch";
import { Text } from "@webpack/common";
import type { MouseEventHandler, ReactNode } from "react";
const cl = classNameFactory("vc-addon-");
interface Props {
name: ReactNode;
description: ReactNode;
enabled: boolean;
setEnabled: (enabled: boolean) => void;
disabled?: boolean;
isNew?: boolean;
onMouseEnter?: MouseEventHandler<HTMLDivElement>;
onMouseLeave?: MouseEventHandler<HTMLDivElement>;
infoButton?: ReactNode;
footer?: ReactNode;
author?: ReactNode;
}
export function AddonCard({ disabled, isNew, name, infoButton, footer, author, enabled, setEnabled, description, onMouseEnter, onMouseLeave }: Props) {
return (
<div
className={cl("card", { "card-disabled": disabled })}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div className={cl("header")}>
<div className={cl("name-author")}>
<Text variant="text-md/bold" className={cl("name")}>
{name}{isNew && <Badge text="NEW" color="#ED4245" />}
</Text>
{!!author && (
<Text variant="text-md/normal" className={cl("author")}>
{author}
</Text>
)}
</div>
{infoButton}
<Switch
checked={enabled}
onChange={setEnabled}
disabled={disabled}
/>
</div>
<Text className={cl("note")} variant="text-sm/normal">{description}</Text>
{footer}
</div>
);
}
|
