NewBucketButton.tsx34 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { Plus } from 'lucide-react'
3	import { MouseEventHandler } from 'react'
4
5	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
6	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
7
8	export const CreateBucketButton = ({
9	onClick,
10	}: {
11	onClick: MouseEventHandler<HTMLButtonElement>
12	}) => {
13	const { can: canCreateBuckets } = useAsyncCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
14
15	return (
16	<ButtonTooltip
17	block
18	size="tiny"
19	type="primary"
20	className="w-fit"
21	icon={<Plus size={14} />}
22	disabled={!canCreateBuckets}
23	onClick={onClick}
24	tooltip={{
25	content: {
26	side: 'bottom',
27	text: !canCreateBuckets ? 'You need additional permissions to create buckets' : undefined,
28	},
29	}}
30	>
31	New bucket
32	</ButtonTooltip>
33	)
34	}