2023-04-25 12:48:14 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
import { ReactNode } from 'react';
|
|
|
|
import { Button } from '@sd/ui';
|
2024-05-04 16:16:49 +00:00
|
|
|
import { useLocale } from '~/hooks';
|
2023-04-25 12:48:14 +00:00
|
|
|
import {
|
|
|
|
dismissibleNoticeStore,
|
|
|
|
getDismissibleNoticeStore,
|
|
|
|
useDismissibleNoticeStore
|
|
|
|
} from '~/hooks/useDismissibleNoticeStore';
|
|
|
|
|
2023-08-28 12:38:47 +00:00
|
|
|
interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
2023-04-25 12:48:14 +00:00
|
|
|
icon?: ReactNode;
|
|
|
|
title: string | ReactNode;
|
|
|
|
description: string;
|
|
|
|
onDismiss?: () => void;
|
|
|
|
onLearnMore?: () => void;
|
|
|
|
className?: string;
|
|
|
|
storageKey: keyof typeof dismissibleNoticeStore;
|
|
|
|
}
|
|
|
|
|
2023-08-28 12:38:47 +00:00
|
|
|
export default ({
|
|
|
|
icon,
|
|
|
|
title,
|
|
|
|
description,
|
|
|
|
onDismiss,
|
|
|
|
onLearnMore,
|
|
|
|
storageKey,
|
|
|
|
className,
|
|
|
|
...props
|
|
|
|
}: Props) => {
|
2023-04-25 12:48:14 +00:00
|
|
|
const dismissibleNoticeStore = useDismissibleNoticeStore();
|
2024-05-04 16:16:49 +00:00
|
|
|
const { t } = useLocale();
|
2023-04-25 12:48:14 +00:00
|
|
|
|
2023-08-28 12:38:47 +00:00
|
|
|
if (dismissibleNoticeStore[storageKey]) return null;
|
|
|
|
|
2023-04-25 12:48:14 +00:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
'rounded-md bg-gradient-to-l from-accent-deep via-accent-faint to-purple-500 p-1',
|
2023-08-28 12:38:47 +00:00
|
|
|
className
|
2023-04-25 12:48:14 +00:00
|
|
|
)}
|
2023-08-28 12:38:47 +00:00
|
|
|
{...props}
|
2023-04-25 12:48:14 +00:00
|
|
|
>
|
2023-05-04 06:21:42 +00:00
|
|
|
<div className="flex items-center rounded bg-app px-3 py-4">
|
2023-08-28 12:38:47 +00:00
|
|
|
{icon}
|
2023-04-25 12:48:14 +00:00
|
|
|
|
|
|
|
<div className="flex flex-1 flex-col justify-center">
|
2023-08-28 12:38:47 +00:00
|
|
|
<h1 className="text-xl font-bold text-ink">{title}</h1>
|
|
|
|
<p className="text-xs text-ink-dull">{description}</p>
|
2023-04-25 12:48:14 +00:00
|
|
|
</div>
|
|
|
|
|
2023-05-04 06:21:42 +00:00
|
|
|
<div className="ml-6 mr-3 space-x-2">
|
2023-08-28 12:38:47 +00:00
|
|
|
{onLearnMore && (
|
2023-04-25 12:48:14 +00:00
|
|
|
<Button
|
|
|
|
variant="outline"
|
|
|
|
className="border-white/10 font-medium hover:border-white/20"
|
2023-08-28 12:38:47 +00:00
|
|
|
onClick={onLearnMore}
|
2023-04-25 12:48:14 +00:00
|
|
|
>
|
2024-05-04 16:16:49 +00:00
|
|
|
{t('learn_more')}
|
2023-04-25 12:48:14 +00:00
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
<Button
|
|
|
|
variant="accent"
|
|
|
|
className="font-medium"
|
|
|
|
onClick={() => {
|
2023-08-28 12:38:47 +00:00
|
|
|
getDismissibleNoticeStore()[storageKey] = true;
|
|
|
|
onDismiss?.();
|
2023-04-25 12:48:14 +00:00
|
|
|
}}
|
|
|
|
>
|
2024-05-04 16:16:49 +00:00
|
|
|
{t('got_it')}
|
2023-04-25 12:48:14 +00:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|