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 return (
32 <Tooltip text={hasPermission() ? props.tooltip : `${props.tooltip} (permission required)`}>
33 <button class={hasPermission() ? baseClass : disabledClass} onclick={handleClick}>
34 {props.children}
35 </button>
36 </Tooltip>
37 );
38};