|
1 |
| -import * as React from "react"; |
2 |
| -import { useThemeHooks } from "@redocly/theme/core/hooks"; |
3 |
| - |
4 |
| -const alertStyle: React.CSSProperties = { |
| 1 | +import clsx from 'clsx' |
| 2 | +import * as React from 'react'; |
| 3 | +import { useThemeHooks } from '@redocly/theme/core/hooks'; |
| 4 | + |
| 5 | +const alertStyle = { |
5 | 6 | position: "relative",
|
6 | 7 | margin: "0px",
|
7 |
| - zIndex: 9999, |
8 |
| -}; |
9 |
| -interface AlertTemplateProps { |
10 |
| - message: string; |
11 |
| - link: string; |
12 |
| - button: string; |
13 |
| - show: boolean; |
| 8 | + zIndex: "9999", |
| 9 | +} |
| 10 | + |
| 11 | +function typeToClass(type: string): string { |
| 12 | + if(type === "error") { |
| 13 | + return "alert-danger" |
| 14 | + } else if(type === "success") { |
| 15 | + return "alert-success" |
| 16 | + } else if(type === "info") { |
| 17 | + return "alert-info" |
| 18 | + } else { |
| 19 | + return "" |
| 20 | + } |
14 | 21 | }
|
15 | 22 |
|
16 |
| -export default function AlertTemplate({ |
17 |
| - message, |
18 |
| - link, |
19 |
| - button, |
20 |
| - show, |
21 |
| -}: AlertTemplateProps): React.JSX.Element { |
| 23 | +interface AlertTemplateProps { |
| 24 | + message: string |
| 25 | + options: { |
| 26 | + type: string |
| 27 | + } |
| 28 | + style: any |
| 29 | + close: any // Callback to close the alert early |
| 30 | +} |
| 31 | + |
| 32 | +export default function AlertTemplate ({ message, options, style, close }: AlertTemplateProps): React.JSX.Element { |
22 | 33 | const { useTranslate } = useThemeHooks();
|
23 |
| - const { translate } = useTranslate(); |
24 |
| - if (!show) return null; |
25 |
| - return ( |
26 |
| - <div |
27 |
| - className={`web-banner`} |
28 |
| - style={{ ...alertStyle }} |
29 |
| - > |
30 |
| - <div className="banner-content"> |
31 |
| - <div className="event-info">{translate(message)}</div> |
32 |
| - <button |
33 |
| - onClick={() => window.open(link, "_blank")} |
34 |
| - className="ticket-button" |
35 |
| - > |
36 |
| - <span className="button-text">{translate(button)}</span> |
37 |
| - <img |
38 |
| - src="https://cdn.builder.io/api/v1/image/assets/7f21b7559e5f46cebba4373859bcb6b5/bb74a0f169c7bf5ebfe70eabaef024556dd89f9a3e47a03da76851b4f66dab43?apiKey=7f21b7559e5f46cebba4373859bcb6b5&" |
39 |
| - alt="" |
40 |
| - className="button-icon" |
41 |
| - /> |
42 |
| - </button> |
43 |
| - </div> |
| 34 | + const { translate } = useTranslate() |
| 35 | + return( |
| 36 | + <div className={clsx("bootstrap-growl alert alert-dismissible", typeToClass(options.type))} style={{ ...alertStyle, ...style }}> |
| 37 | + <button className="close" data-dismiss="alert" type="button" onClick={close}> |
| 38 | + <span aria-hidden="true">×</span> |
| 39 | + <span className="sr-only">{translate("Close")}</span> |
| 40 | + </button> |
| 41 | + {message} |
44 | 42 | </div>
|
45 |
| - ); |
46 |
| - // return( |
47 |
| - // <div className={clsx("bootstrap-growl alert alert-dismissible", typeToClass(options.type))} style={{ ...alertStyle, ...style }}> |
48 |
| - // <button className="close" data-dismiss="alert" type="button" onClick={close}> |
49 |
| - // <span aria-hidden="true">×</span> |
50 |
| - // <span className="sr-only">{translate("Close")}</span> |
51 |
| - // </button> |
52 |
| - // {message} |
53 |
| - // </div> |
54 |
| - // ) |
| 43 | + ) |
55 | 44 | }
|
0 commit comments