90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Button — https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
|
|
* Result Dialog — https://app.subframe.com/f023064a5ca0/library?component=Result+Dialog_15b54873-a4f7-4507-a25a-06739f26cf11
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCheckCircle } from "@subframe/core";
|
|
import { FeatherX } from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
import { Button } from "../Button";
|
|
|
|
export interface ResultDialogRootProps
|
|
extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
variant?: "success" | "error";
|
|
state?: "open" | "closed";
|
|
title?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
closeLabel?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const ResultDialogRoot = React.forwardRef<
|
|
HTMLDivElement,
|
|
ResultDialogRootProps
|
|
>(function ResultDialogRoot(
|
|
{
|
|
variant = "success",
|
|
state = "open",
|
|
title,
|
|
description,
|
|
closeLabel,
|
|
className,
|
|
...otherProps
|
|
}: ResultDialogRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/15b54873 flex h-full w-full flex-col items-center justify-center gap-2 bg-surface-neutral-overlay group/resultdialog",
|
|
{ hidden: state === "closed" },
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div className="flex w-96 flex-col items-center gap-6 rounded-lg border border-solid border-border-default bg-surface-neutral-modal px-6 py-8 shadow-lg max-w-full mobile:w-full mobile:flex-none">
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-14 w-14 flex-none items-center justify-center gap-2 rounded-round bg-surface-feedback-subtle-positive",
|
|
{ "bg-surface-feedback-subtle-negative": variant === "error" }
|
|
)}
|
|
>
|
|
<FeatherCheckCircle
|
|
className={SubframeUtils.twClassNames(
|
|
"text-subtitle-0 font-subtitle-0 text-icon-feedback-positive",
|
|
{ hidden: variant === "error" }
|
|
)}
|
|
/>
|
|
<FeatherX
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-subtitle-0 font-subtitle-0 text-icon-feedback-negative",
|
|
{ "inline-flex": variant === "error" }
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col items-center gap-2">
|
|
{title ? (
|
|
<div className="flex w-full flex-col items-center text-center">
|
|
{title}
|
|
</div>
|
|
) : null}
|
|
{description ? (
|
|
<div className="flex w-full flex-col items-center text-center">
|
|
{description}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<Button variant={variant === "error" ? "destructive" : "success"}>
|
|
{closeLabel}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const ResultDialog = ResultDialogRoot;
|