Repository navigation
Expand file tree
/
Copy pathBanner.tsx
More file actions
66 lines (57 loc) · 1.83 KB
/
Copy pathBanner.tsx
File metadata and controls
66 lines (57 loc) · 1.83 KB
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
import React from "react";
import tw, { TwStyle } from "twin.macro";
import { Icon } from "./Icon";
import { Info, XOctagon, CheckCircle, AlertTriangle } from "react-feather";
export type BannerVariant =
| "primary"
| "secondary"
| "info"
| "danger"
| "success"
| "warning";
const defaultVariant: BannerVariant = "primary";
export interface Props {
variant?: BannerVariant;
icon?: React.ComponentType;
hideIcon?: boolean;
}
const containerStyles: Record<BannerVariant, TwStyle> = {
primary: tw`text-pink-800 bg-pink-100 border border-pink-200`,
secondary: tw`text-gray-800 bg-gray-100 border border-gray-200`,
info: tw`text-blue-800 bg-blue-100 border border-blue-200`,
danger: tw`text-red-800 bg-red-100 border border-red-200`,
success: tw`text-green-800 bg-green-100 border border-green-200`,
warning: tw`text-yellow-800 bg-yellow-100 border border-yellow-200`,
};
const iconStyles: Record<BannerVariant, TwStyle> = {
primary: tw`text-pink-500`,
secondary: tw`text-gray-500`,
info: tw`text-blue-500`,
danger: tw`text-red-500`,
success: tw`text-green-500`,
warning: tw`text-yellow-500`,
};
const defaultIcons: Record<BannerVariant, React.ComponentType | null> = {
primary: null,
secondary: null,
info: Info,
danger: XOctagon,
success: CheckCircle,
warning: AlertTriangle,
};
export const Banner: React.FC<Props> = ({ children, hideIcon, ...props }) => {
const variant = props.variant ?? defaultVariant;
const icon = props.icon ?? defaultIcons[variant];
return (
<div
css={[tw`flex p-3 border rounded-md space-x-3`, containerStyles[variant]]}
className="banner"
{...props}
>
{!hideIcon && icon != null && (
<Icon tw="mt-1" icon={icon} css={[iconStyles[variant]]} />
)}
{hideIcon || icon == null ? <>{children}</> : <span>{children}</span>}
</div>
);
};