server/assets/js/react/components/FallbackMessage.tsx

29 lines
731 B
TypeScript
Raw Normal View History

2023-12-04 13:42:32 +00:00
import * as React from "react"
import clsx from "clsx"
import { FadeIn } from "./FadeIn"
2023-12-06 02:46:27 +00:00
export type FallbackMessageProps = {
2023-12-04 13:42:32 +00:00
title: string
body: string
2023-12-06 02:46:27 +00:00
} & React.ComponentPropsWithoutRef<"div">
2023-12-04 13:42:32 +00:00
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>
)
})