45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import * as React from "react";
|
|
import * as Toast from "@radix-ui/react-toast";
|
|
import "./styles.css";
|
|
|
|
type ToastProps = {
|
|
isOpen: boolean;
|
|
style?: React.CSSProperties;
|
|
text?: string;
|
|
};
|
|
|
|
const RedToastDemo = (props: ToastProps) => {
|
|
return (
|
|
<Toast.Provider swipeDirection="right">
|
|
<Toast.Root
|
|
className="ToastRoot"
|
|
open={props.isOpen}
|
|
style={{
|
|
border: "#BB3F3F 1px solid",
|
|
backgroundColor: "hsl(359, 69.5%, 74.3%)",
|
|
color: "white"
|
|
}}
|
|
>
|
|
<Toast.Title className="ToastTitle">
|
|
<div
|
|
style={
|
|
props.style || {
|
|
textAlign: "center",
|
|
color: "white",
|
|
fontSize: "1.1em"
|
|
}
|
|
}
|
|
>
|
|
{props.text || "Autosaving..."}
|
|
</div>
|
|
</Toast.Title>
|
|
<Toast.Description asChild>{"Waiting for more changes..."}</Toast.Description>
|
|
<Toast.Action className="ToastAction" asChild altText="Goto schedule to undo"></Toast.Action>
|
|
</Toast.Root>
|
|
<Toast.Viewport className="ToastViewport" />
|
|
</Toast.Provider>
|
|
);
|
|
};
|
|
|
|
export default RedToastDemo;
|