-
Notifications
You must be signed in to change notification settings - Fork 545
/
PermissionIndicator.tsx
98 lines (94 loc) · 3.54 KB
/
PermissionIndicator.tsx
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { Box, Group, GroupProps, List, Popover, Text, Tooltip } from '@mantine/core';
import { CommercialUse } from '@prisma/client';
import {
IconBrushOff,
IconCheck,
IconExchangeOff,
IconPhotoOff,
IconRotate2,
IconShoppingCartOff,
IconUserCheck,
IconWorldOff,
IconX,
} from '@tabler/icons-react';
import React from 'react';
export const PermissionIndicator = ({ permissions, size = 20, spacing = 2, ...props }: Props) => {
const { allowNoCredit, allowCommercialUse, allowDerivatives, allowDifferentLicense } =
permissions;
const canSellImages = allowCommercialUse.includes(CommercialUse.Image);
const canRentCivit = allowCommercialUse.includes(CommercialUse.RentCivit);
const canRent = allowCommercialUse.includes(CommercialUse.Rent);
const canSell = allowCommercialUse.includes(CommercialUse.Sell);
const explanation = {
'Use the model without crediting the creator': allowNoCredit,
'Sell images they generate': canSellImages,
'Run on services that generate images for money': canRent,
'Run on Civitai': canRentCivit,
'Share merges using this model': allowDerivatives,
'Sell this model or merges using this model': canSell,
'Have different permissions when sharing merges': allowDifferentLicense,
};
const iconProps = { size, stroke: 1.5 };
const icons = [
!allowNoCredit && { label: 'Creator credit required', icon: <IconUserCheck {...iconProps} /> },
!canSellImages && { label: 'No selling images', icon: <IconPhotoOff {...iconProps} /> },
!canRentCivit && { label: 'No Civitai generation', icon: <IconBrushOff {...iconProps} /> },
!canRent && { label: 'No generation services', icon: <IconWorldOff {...iconProps} /> },
!canSell && { label: 'No selling models', icon: <IconShoppingCartOff {...iconProps} /> },
!allowDerivatives && { label: 'No sharing merges', icon: <IconExchangeOff {...iconProps} /> },
!allowDifferentLicense && {
label: 'Same permissions required',
icon: <IconRotate2 {...iconProps} />,
},
].filter(Boolean) as { label: string; icon: React.ReactNode }[];
return (
<Popover withArrow>
<Popover.Target>
<Group spacing={spacing} sx={{ cursor: 'pointer' }} noWrap {...props}>
{icons.map(({ label, icon }, i) => (
<Tooltip key={i} label={label} withArrow withinPortal position="top">
<Box sx={(theme) => ({ color: theme.colors.gray[5] })}>{icon}</Box>
</Tooltip>
))}
</Group>
</Popover.Target>
<Popover.Dropdown>
<Text weight={500}>This model permits users to:</Text>
<List
size="xs"
styles={{
itemIcon: { marginRight: 4, paddingTop: 2 },
}}
>
{Object.entries(explanation).map(([permission, allowed], i) => (
<List.Item
key={i}
styles={(theme) => ({
itemIcon: { color: theme.colors.red[4] },
})}
icon={
allowed ? (
<IconCheck style={{ color: 'green' }} size={12} stroke={4} />
) : (
<IconX style={{ color: 'red' }} size={12} stroke={3} />
)
}
>
{permission}
</List.Item>
))}
</List>
</Popover.Dropdown>
</Popover>
);
};
type Props = {
permissions: Permissions;
size?: number;
} & Omit<GroupProps, 'size'>;
type Permissions = {
allowNoCredit: boolean;
allowCommercialUse: CommercialUse[];
allowDerivatives: boolean;
allowDifferentLicense: boolean;
};