|
|
@@ -1,9 +1,9 @@
|
|
|
// Ref: https://github.com/Microflash/remark-callout-directives/blob/fabe4d8adc7738469f253836f0da346591ea2a2b/README.md
|
|
|
|
|
|
-import type { ReactNode, JSX } from 'react';
|
|
|
+import type { JSX, ReactNode } from 'react';
|
|
|
import React from 'react';
|
|
|
|
|
|
-import { type Callout } from '../services/consts';
|
|
|
+import type { Callout } from '../services/consts';
|
|
|
|
|
|
import styles from './CalloutViewer.module.scss';
|
|
|
|
|
|
@@ -11,7 +11,7 @@ const moduleClass = styles['callout-viewer'];
|
|
|
|
|
|
type CALLOUT_TO = {
|
|
|
[key in Callout]: string;
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const CALLOUT_TO_TYPE: CALLOUT_TO = {
|
|
|
note: 'Note',
|
|
|
@@ -34,38 +34,39 @@ const CALLOUT_TO_ICON: CALLOUT_TO = {
|
|
|
};
|
|
|
|
|
|
type CalloutViewerProps = {
|
|
|
- children: ReactNode,
|
|
|
- node: Element,
|
|
|
- type: string,
|
|
|
- label?: string,
|
|
|
-}
|
|
|
-
|
|
|
-export const CalloutViewer = React.memo((props: CalloutViewerProps): JSX.Element => {
|
|
|
+ children: ReactNode;
|
|
|
+ node: Element;
|
|
|
+ type: string;
|
|
|
+ label?: string;
|
|
|
+};
|
|
|
|
|
|
- const {
|
|
|
- node, type, label, children,
|
|
|
- } = props;
|
|
|
+export const CalloutViewer = React.memo(
|
|
|
+ (props: CalloutViewerProps): JSX.Element => {
|
|
|
+ const { node, type, label, children } = props;
|
|
|
|
|
|
- if (node == null) {
|
|
|
- return <></>;
|
|
|
- }
|
|
|
+ if (node == null) {
|
|
|
+ return <></>;
|
|
|
+ }
|
|
|
|
|
|
- return (
|
|
|
- <div className={`${moduleClass} callout-viewer`}>
|
|
|
- <div className={`callout callout-${CALLOUT_TO_TYPE[type].toLowerCase()}`}>
|
|
|
- <div className="callout-indicator">
|
|
|
- <div className="callout-hint">
|
|
|
- <span className="material-symbols-outlined">{CALLOUT_TO_ICON[type]}</span>
|
|
|
+ return (
|
|
|
+ <div className={`${moduleClass} callout-viewer`}>
|
|
|
+ <div
|
|
|
+ className={`callout callout-${CALLOUT_TO_TYPE[type].toLowerCase()}`}
|
|
|
+ >
|
|
|
+ <div className="callout-indicator">
|
|
|
+ <div className="callout-hint">
|
|
|
+ <span className="material-symbols-outlined">
|
|
|
+ {CALLOUT_TO_ICON[type]}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className="callout-title">
|
|
|
+ {label ?? CALLOUT_TO_TYPE[type]}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div className="callout-title">
|
|
|
- {label ?? CALLOUT_TO_TYPE[type]}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="callout-content">
|
|
|
- {children}
|
|
|
+ <div className="callout-content">{children}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
-});
|
|
|
+ );
|
|
|
+ },
|
|
|
+);
|
|
|
CalloutViewer.displayName = 'CalloutViewer';
|