snowballtools-base/packages/frontend/src/pages/components/renders/inlineNotifications.tsx
Wahyu Kurniawan 6df094bf2e
[T-4861: feat] Inline notification component (#86)
* ️ 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
2024-02-22 10:45:19 +07:00

44 lines
1.3 KiB
TypeScript

import { InlineNotification } from 'components/shared/InlineNotification';
import { InlineNotificationTheme } from 'components/shared/InlineNotification/InlineNotification.theme';
import React from 'react';
const inlineNotificationVariants = [
'info',
'danger',
'warning',
'success',
'generic',
];
const inlineNotificationSizes = ['md', 'sm'];
export const renderInlineNotifications = () => {
return inlineNotificationVariants.map((variant) => (
<div className="space-y-2" key={variant}>
{inlineNotificationSizes.map((size) => (
<InlineNotification
size={size as InlineNotificationTheme['size']}
variant={variant as InlineNotificationTheme['variant']}
key={`${variant}-${size}`}
title="Notification title goes here"
/>
))}
</div>
));
};
export const renderInlineNotificationWithDescriptions = () => {
return inlineNotificationVariants.map((variant) => (
<div className="space-y-2" key={variant}>
{inlineNotificationSizes.map((size) => (
<InlineNotification
size={size as InlineNotificationTheme['size']}
variant={variant as InlineNotificationTheme['variant']}
key={`${variant}-${size}`}
title="Notification title goes here"
description="Description goes here"
/>
))}
</div>
));
};