64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import type { WidgetNotificationAction } from "@/types/widget-notification";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
|
|
interface WidgetToastProps {
|
|
title: string;
|
|
description: string;
|
|
primaryAction?: WidgetNotificationAction;
|
|
secondaryAction?: WidgetNotificationAction;
|
|
onActionClick: (action: WidgetNotificationAction) => void;
|
|
}
|
|
|
|
export const WidgetToast: React.FC<WidgetToastProps> = ({
|
|
title,
|
|
description,
|
|
primaryAction,
|
|
secondaryAction,
|
|
onActionClick,
|
|
}) => {
|
|
return (
|
|
<Card className="min-w-[300px] gap-3 py-4 shadow-lg">
|
|
<CardHeader className="gap-1 px-4 py-0">
|
|
<CardTitle className="text-sm">{title}</CardTitle>
|
|
<CardDescription className="text-xs">{description}</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardFooter className="gap-2 px-4 py-0">
|
|
{secondaryAction && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onActionClick(secondaryAction)}
|
|
>
|
|
{secondaryAction.icon === "discord" && (
|
|
<img
|
|
src="assets/discord-icon.svg"
|
|
alt="Discord"
|
|
className="size-3.5"
|
|
/>
|
|
)}
|
|
{secondaryAction.label}
|
|
</Button>
|
|
)}
|
|
{primaryAction && (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={() => onActionClick(primaryAction)}
|
|
>
|
|
{primaryAction.label}
|
|
</Button>
|
|
)}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
};
|