import { ReactNode } from 'react'; import { IWebApp, UserProfile } from '@edifice.io/client'; export type BadgeRef = HTMLSpanElement; /** Badge variant : notification */ export type NotificationBadgeVariant = { type: 'notification'; level: 'success' | 'warning' | 'danger' | 'info'; }; /** Badge variant : status */ export type StatusBadgeVariant = { type: 'status'; level: 'validate' | 'success' | 'warning' | 'danger' | 'info'; }; /** Badge variant : content */ export type ContentBadgeVariant = { type: 'content'; level: 'success' | 'warning' | 'danger' | 'info'; background?: boolean; }; /** Badge variant : profile = teacher, student, relative or personnel, guest */ export type ProfileBadgeVariant = { type: 'user'; profile: UserProfile[number]; background?: boolean; }; /** Badge variant : chip */ export type ChipBadgeVariant = { type: 'chip'; }; /** Badge variant : link */ export type LinkBadgeVariant = { type: 'link'; }; /** * Badge variant : App Version. * * Displays a badge showing the app version, for example: BÊTA, ALPHA, NEW or a custom version label. * * Default label is BÊTA unless a label is provided as a children of the component. * Example of usage: * NEW * * The color prop allows to customize the badge color to match the app color (Defaults to black if not provided). * Example of usage: * * * If app prop is provided, the color of the App Version Badge is derived from the application colors, * for example if the app provided is Blog then the Badge will have the same color as Blog app. * Example of usage: * */ export type AppVersionBadgeVariant = { type: 'appVersion'; color?: string; app?: IWebApp; }; export type BadgeVariants = NotificationBadgeVariant | StatusBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant | AppVersionBadgeVariant; export interface BadgeProps extends React.ComponentPropsWithRef<'span'> { /** * Badge variant : notification, link or profile (Teacher|Student|Relative|Personnel) * Defaults to notification. */ variant?: BadgeVariants; /** * Text or icon (or whatever) to render as children elements. */ children?: ReactNode; /** * Optional class for styling purpose */ className?: string; } /** * Primary UI component for user interaction */ declare const Badge: import('react').ForwardRefExoticComponent & import('react').RefAttributes>; export default Badge;