forked from cerc-io/snowballtools-base
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { tv, type VariantProps } from 'tailwind-variants';
|
|
|
|
export const avatarTheme = tv(
|
|
{
|
|
base: ['relative', 'block', 'rounded-full', 'overflow-hidden'],
|
|
slots: {
|
|
image: [
|
|
'h-full',
|
|
'w-full',
|
|
'rounded-[inherit]',
|
|
'object-cover',
|
|
'object-center',
|
|
],
|
|
fallback: [
|
|
'grid',
|
|
'select-none',
|
|
'place-content-center',
|
|
'h-full',
|
|
'w-full',
|
|
'rounded-[inherit]',
|
|
'font-medium',
|
|
],
|
|
},
|
|
variants: {
|
|
type: {
|
|
gray: {
|
|
fallback: ['text-elements-highEm', 'bg-base-bg-emphasized'],
|
|
},
|
|
orange: {
|
|
fallback: ['text-elements-warning', 'bg-base-bg-emphasized-warning'],
|
|
},
|
|
blue: {
|
|
fallback: ['text-elements-info', 'bg-base-bg-emphasized-info'],
|
|
},
|
|
},
|
|
size: {
|
|
18: {
|
|
base: ['rounded-[6px]', 'h-[18px]', 'w-[18px]', 'text-[0.625rem]'],
|
|
},
|
|
20: {
|
|
base: ['rounded-[6px]', 'h-[20px]', 'w-[20px]', 'text-[0.625rem]'],
|
|
},
|
|
24: {
|
|
base: ['rounded-[6px]', 'h-[24px]', 'w-[24px]', 'text-[0.625rem]'],
|
|
},
|
|
28: {
|
|
base: ['rounded-[8px]', 'h-[28px]', 'w-[28px]', 'text-[0.625rem]'],
|
|
},
|
|
32: {
|
|
base: ['rounded-[8px]', 'h-[32px]', 'w-[32px]', 'text-xs'],
|
|
},
|
|
36: {
|
|
base: ['rounded-[12px]', 'h-[36px]', 'w-[36px]', 'text-xs'],
|
|
},
|
|
40: {
|
|
base: ['rounded-[12px]', 'h-[40px]', 'w-[40px]', 'text-sm'],
|
|
},
|
|
44: {
|
|
base: ['rounded-[12px]', 'h-[44px]', 'w-[44px]', 'text-sm'],
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 24,
|
|
type: 'gray',
|
|
},
|
|
},
|
|
{ responsiveVariants: true },
|
|
);
|
|
|
|
export type AvatarVariants = VariantProps<typeof avatarTheme>;
|