ChatGPT-Next-Web/app/components/button.tsx

40 lines
891 B
TypeScript
Raw Normal View History

2023-03-09 17:01:40 +00:00
import * as React from "react";
2023-03-12 19:06:21 +00:00
import styles from "./button.module.scss";
2023-03-09 17:01:40 +00:00
export function IconButton(props: {
onClick?: () => void;
icon: JSX.Element;
text?: string;
bordered?: boolean;
shadow?: boolean;
2023-04-02 18:28:07 +00:00
noDark?: boolean;
2023-03-09 17:01:40 +00:00
className?: string;
2023-03-12 19:06:21 +00:00
title?: string;
2023-04-06 13:02:48 +00:00
disabled?: boolean;
2023-03-09 17:01:40 +00:00
}) {
return (
2023-04-06 13:02:48 +00:00
<button
2023-03-09 17:01:40 +00:00
className={
styles["icon-button"] +
` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
props.className ?? ""
} clickable`
2023-03-09 17:01:40 +00:00
}
2023-03-10 18:25:33 +00:00
onClick={props.onClick}
2023-03-12 19:06:21 +00:00
title={props.title}
2023-04-06 13:02:48 +00:00
disabled={props.disabled}
role="button"
2023-03-09 17:01:40 +00:00
>
2023-04-02 18:28:07 +00:00
<div
className={styles["icon-button-icon"] + ` ${props.noDark && "no-dark"}`}
>
{props.icon}
</div>
2023-03-09 17:01:40 +00:00
{props.text && (
<div className={styles["icon-button-text"]}>{props.text}</div>
)}
2023-04-06 13:02:48 +00:00
</button>
2023-03-09 17:01:40 +00:00
);
}