We use RR in one spot in this repo:
|
import { Link } from 'react-router-dom' |
|
|
|
import { Button, buttonStyle } from '../' |
|
|
|
const buttonStyleProps = { variant: 'ghost', size: 'sm', color: 'secondary' } as const |
|
|
|
type Props = { |
|
icon?: ReactElement |
|
title: string |
|
body?: string |
|
} & ( // only require buttonTo or onClick if buttonText is present |
|
| { buttonText: string; buttonTo: string } |
|
| { buttonText: string; onClick: () => void } |
|
| { buttonText?: never } |
|
) |
|
|
|
export function EmptyMessage(props: Props) { |
|
let button: ReactElement | null = null |
|
if (props.buttonText && 'buttonTo' in props) { |
|
button = ( |
|
<Link className={cn('mt-6', buttonStyle(buttonStyleProps))} to={props.buttonTo}> |
|
{props.buttonText} |
|
</Link> |
|
) |
|
} else if (props.buttonText && 'onClick' in props) { |
|
button = ( |
|
<Button {...buttonStyleProps} className="mt-6" onClick={props.onClick}> |
|
{props.buttonText} |
|
</Button> |
|
) |
|
} |
|
return ( |
|
<div className="m-4 flex max-w-[14rem] flex-col items-center text-center"> |
|
{props.icon && ( |
|
<div className="mb-4 rounded p-1 leading-[0] text-accent bg-accent-secondary"> |
|
{props.icon} |
|
</div> |
|
)} |
|
<h3 className="text-sans-semi-lg">{props.title}</h3> |
|
{props.body && <p className="mt-1 text-sans-md text-secondary">{props.body}</p>} |
|
{button} |
|
</div> |
|
) |
|
} |
And it's used only once in the entire org:
https://github.com/oxidecomputer/oxide-computer/blob/f59e4282b775b6ee582535cfc4a44b92a035c370/app/routes/events/index.tsx#L122-L126
If we inline that definition in oxide-computer we can delete EmptyMessage here and remove the dep.
