mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-08 11:44:05 +00:00
75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
import clsx from 'clsx';
|
|
import { ReactNode } from 'react';
|
|
import { Button } from '@sd/ui';
|
|
import {
|
|
dismissibleNoticeStore,
|
|
getDismissibleNoticeStore,
|
|
useDismissibleNoticeStore
|
|
} from '~/hooks/useDismissibleNoticeStore';
|
|
|
|
interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
icon?: ReactNode;
|
|
title: string | ReactNode;
|
|
description: string;
|
|
onDismiss?: () => void;
|
|
onLearnMore?: () => void;
|
|
className?: string;
|
|
storageKey: keyof typeof dismissibleNoticeStore;
|
|
}
|
|
|
|
export default ({
|
|
icon,
|
|
title,
|
|
description,
|
|
onDismiss,
|
|
onLearnMore,
|
|
storageKey,
|
|
className,
|
|
...props
|
|
}: Props) => {
|
|
const dismissibleNoticeStore = useDismissibleNoticeStore();
|
|
|
|
if (dismissibleNoticeStore[storageKey]) return null;
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'rounded-md bg-gradient-to-l from-accent-deep via-accent-faint to-purple-500 p-1',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="flex items-center rounded bg-app px-3 py-4">
|
|
{icon}
|
|
|
|
<div className="flex flex-1 flex-col justify-center">
|
|
<h1 className="text-xl font-bold text-ink">{title}</h1>
|
|
<p className="text-xs text-ink-dull">{description}</p>
|
|
</div>
|
|
|
|
<div className="ml-6 mr-3 space-x-2">
|
|
{onLearnMore && (
|
|
<Button
|
|
variant="outline"
|
|
className="border-white/10 font-medium hover:border-white/20"
|
|
onClick={onLearnMore}
|
|
>
|
|
Learn More
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="accent"
|
|
className="font-medium"
|
|
onClick={() => {
|
|
getDismissibleNoticeStore()[storageKey] = true;
|
|
onDismiss?.();
|
|
}}
|
|
>
|
|
Got it
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|