mirror of https://github.com/portainer/portainer
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import clsx from 'clsx';
|
|
import { Lightbulb, X } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { useStore } from 'zustand';
|
|
|
|
import { Button } from '@@/buttons';
|
|
|
|
import { insightStore } from './insights-store';
|
|
|
|
export type Props = {
|
|
header: string;
|
|
content: ReactNode;
|
|
setHtmlContent?: boolean;
|
|
insightCloseId?: string; // set if you want to be able to close the box and not show it again
|
|
};
|
|
|
|
export function InsightsBox({ header, content, insightCloseId }: Props) {
|
|
// allow to close the box and not show it again in local storage with zustand
|
|
const { addInsightIDClosed, isClosed } = useStore(insightStore);
|
|
const isInsightClosed = isClosed(insightCloseId);
|
|
|
|
if (isInsightClosed) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex w-full gap-1 rounded-lg bg-gray-modern-3 p-4 text-sm th-highcontrast:bg-legacy-grey-3 th-dark:bg-legacy-grey-3">
|
|
<div className="shrink-0">
|
|
<Lightbulb className="h-4 text-warning-7 th-highcontrast:text-warning-6 th-dark:text-warning-6" />
|
|
</div>
|
|
<div>
|
|
<p
|
|
className={clsx(
|
|
// text-[0.9em] matches .form-horizontal .control-label font-size used in many labels in portainer
|
|
'mb-2 text-[0.9em] font-medium',
|
|
insightCloseId && 'pr-4'
|
|
)}
|
|
>
|
|
{header}
|
|
</p>
|
|
<div className="small">{content}</div>
|
|
</div>
|
|
{insightCloseId && (
|
|
<Button
|
|
icon={X}
|
|
className="absolute top-2 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5"
|
|
color="link"
|
|
size="medium"
|
|
onClick={() => addInsightIDClosed(insightCloseId)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|