Justin Edmund
6bc887c95b
We changed things so we could insert React elements into the content field.
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import React, { PropsWithChildren } from 'react'
|
||
import classNames from 'classnames'
|
||
|
||
import * as ToastPrimitive from '@radix-ui/react-toast'
|
||
import './index.scss'
|
||
|
||
interface Props extends ToastPrimitive.ToastProps {
|
||
altText: string
|
||
className?: string
|
||
title?: string
|
||
content: React.ReactNode
|
||
onCloseClick: () => void
|
||
}
|
||
|
||
const Toast = ({
|
||
altText,
|
||
children,
|
||
title,
|
||
content,
|
||
...props
|
||
}: PropsWithChildren<Props>) => {
|
||
const { onCloseClick, ...toastProps } = props
|
||
|
||
const classes = classNames(props.className, {
|
||
Toast: true,
|
||
})
|
||
|
||
return (
|
||
<ToastPrimitive.Root {...toastProps} className={classes}>
|
||
{title && (
|
||
<div className="Header">
|
||
<ToastPrimitive.Title asChild>
|
||
<h3>{title}</h3>
|
||
</ToastPrimitive.Title>
|
||
<ToastPrimitive.Close aria-label="Close" onClick={onCloseClick}>
|
||
<span aria-hidden>×</span>
|
||
</ToastPrimitive.Close>
|
||
</div>
|
||
)}
|
||
<ToastPrimitive.Description asChild>
|
||
<p>{content}</p>
|
||
</ToastPrimitive.Description>
|
||
{children && (
|
||
<ToastPrimitive.Action asChild altText={altText}>
|
||
{children}
|
||
</ToastPrimitive.Action>
|
||
)}
|
||
</ToastPrimitive.Root>
|
||
)
|
||
}
|
||
|
||
export default Toast
|