29 lines
731 B
TypeScript
29 lines
731 B
TypeScript
|
import * as React from "react"
|
||
|
|
import clsx from "clsx"
|
||
|
|
|
||
|
|
import { FadeIn } from "./FadeIn"
|
||
|
|
|
||
|
|
export type FallbackMessageProps = React.ComponentPropsWithoutRef<"div"> & {
|
||
|
|
title: string
|
||
|
|
body: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const FallbackMessage = React.forwardRef(function FallbackMessage(
|
||
|
|
props: FallbackMessageProps,
|
||
|
|
ref: React.ForwardedRef<HTMLDivElement>
|
||
|
|
) {
|
||
|
|
const { title, body, className, ...other } = props
|
||
|
|
return (
|
||
|
|
<FadeIn
|
||
|
|
ref={ref}
|
||
|
|
className={clsx("flex flex-col items-center text-center", className)}
|
||
|
|
{...other}
|
||
|
|
>
|
||
|
|
<h1 className="font-display text-2xl font-semibold text-neutral-950">
|
||
|
|
{title}
|
||
|
|
</h1>
|
||
|
|
<p className="mt-2 text-sm text-neutral-600">{body}</p>
|
||
|
|
</FadeIn>
|
||
|
|
)
|
||
|
|
})
|