forked from cerc-io/snowballtools-base
* ⚡️ feat: create info square icon component * ⚡️ feat: create inline notification component * 📝 docs: add js doc comment and add inline notification component to the example page * 🐛 fix: use the right method of `useCallback
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { VariantProps, tv } from 'tailwind-variants';
|
|
|
|
export const inlineNotificationTheme = tv({
|
|
slots: {
|
|
wrapper: ['rounded-xl', 'flex', 'gap-2', 'items-start', 'w-full', 'border'],
|
|
content: ['flex', 'flex-col', 'gap-1'],
|
|
title: [],
|
|
description: [],
|
|
icon: ['flex', 'items-start'],
|
|
},
|
|
variants: {
|
|
variant: {
|
|
info: {
|
|
wrapper: ['border-border-info-light', 'bg-base-bg-emphasized-info'],
|
|
title: ['text-elements-on-emphasized-info'],
|
|
description: ['text-elements-on-emphasized-info'],
|
|
icon: ['text-elements-info'],
|
|
},
|
|
danger: {
|
|
wrapper: ['border-border-danger-light', 'bg-base-bg-emphasized-danger'],
|
|
title: ['text-elements-on-emphasized-danger'],
|
|
description: ['text-elements-on-emphasized-danger'],
|
|
icon: ['text-elements-danger'],
|
|
},
|
|
warning: {
|
|
wrapper: [
|
|
'border-border-warning-light',
|
|
'bg-base-bg-emphasized-warning',
|
|
],
|
|
title: ['text-elements-on-emphasized-warning'],
|
|
description: ['text-elements-on-emphasized-warning'],
|
|
icon: ['text-elements-warning'],
|
|
},
|
|
success: {
|
|
wrapper: [
|
|
'border-border-success-light',
|
|
'bg-base-bg-emphasized-success',
|
|
],
|
|
title: ['text-elements-on-emphasized-success'],
|
|
description: ['text-elements-on-emphasized-success'],
|
|
icon: ['text-elements-success'],
|
|
},
|
|
generic: {
|
|
wrapper: ['border-border-separator', 'bg-base-bg-emphasized'],
|
|
title: ['text-elements-high-em'],
|
|
description: ['text-elements-on-emphasized-info'],
|
|
icon: ['text-elements-high-em'],
|
|
},
|
|
},
|
|
size: {
|
|
sm: {
|
|
wrapper: ['px-2', 'py-2'],
|
|
title: ['leading-4', 'text-xs'],
|
|
description: ['leading-4', 'text-xs'],
|
|
icon: ['h-4', 'w-4'],
|
|
},
|
|
md: {
|
|
wrapper: ['px-3', 'py-3'],
|
|
title: ['leading-5', 'tracking-[-0.006em]', 'text-sm'],
|
|
description: ['leading-5', 'tracking-[-0.006em]', 'text-sm'],
|
|
icon: ['h-5', 'w-5'],
|
|
},
|
|
},
|
|
hasDescription: {
|
|
true: {
|
|
title: ['font-medium'],
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'generic',
|
|
size: 'md',
|
|
},
|
|
});
|
|
|
|
export type InlineNotificationTheme = VariantProps<
|
|
typeof inlineNotificationTheme
|
|
>;
|