forked from
pds.ls/pdsls
atmosphere explorer
1import { JSX } from "solid-js";
2import { hasUserScope } from "../auth/scope-utils";
3import { showPermissionPrompt } from "./permission-prompt";
4import Tooltip from "./tooltip";
5
6export interface PermissionButtonProps {
7 scope: "create" | "update" | "delete" | "blob";
8 tooltip?: string;
9 class?: string;
10 disabledClass?: string;
11 onClick: () => void;
12 children: JSX.Element;
13}
14
15export const PermissionButton = (props: PermissionButtonProps) => {
16 const hasPermission = () => hasUserScope(props.scope);
17
18 const handleClick = () => {
19 if (hasPermission()) {
20 props.onClick();
21 } else {
22 showPermissionPrompt(props.scope);
23 }
24 };
25
26 const baseClass =
27 props.class ||
28 "flex items-center rounded-sm p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600";
29 const disabledClass = props.disabledClass || "flex items-center rounded-sm p-1.5 opacity-40";
30
31 const tooltip = () =>
32 hasPermission() ? props.tooltip : `${props.tooltip ?? ""} (permission required)`.trimStart();
33
34 const button = (
35 <button class={hasPermission() ? baseClass : disabledClass} onclick={handleClick}>
36 {props.children}
37 </button>
38 );
39
40 return props.tooltip ?
41 <Tooltip text={tooltip()!}>{button}</Tooltip>
42 : button;
43};