89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import React, { ComponentProps, PropsWithChildren, ReactNode } from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import Stack from "../layout/Stack";
|
|
import Border from "./Border";
|
|
import Center from "../layout/Center";
|
|
import Row from "../layout/Row";
|
|
import Span from "../layout/Span";
|
|
import Link from "../layout/Link";
|
|
|
|
export const ToastStyles = ["normal", "success", "error"] as const;
|
|
export const ToastColors = ToastStyles;
|
|
|
|
export type TWUIEmptyContentProps = ComponentProps<typeof Stack> & {
|
|
title: string;
|
|
url?: string;
|
|
linkProps?: ComponentProps<typeof Link>;
|
|
borderProps?: ComponentProps<typeof Border>;
|
|
textProps?: ComponentProps<typeof Span>;
|
|
contentWrapperProps?: ComponentProps<typeof Row>;
|
|
icon?: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* # EmptyC ontent Component
|
|
* @className twui-empty-content
|
|
* @className twui-empty-content-border
|
|
* @className twui-empty-content-link
|
|
*/
|
|
export default function EmptyContent({
|
|
title,
|
|
url,
|
|
linkProps,
|
|
icon,
|
|
borderProps,
|
|
textProps,
|
|
contentWrapperProps,
|
|
...props
|
|
}: TWUIEmptyContentProps) {
|
|
const mainComponent = (
|
|
<Stack
|
|
{...props}
|
|
className={twMerge("w-full", "twui-empty-content", props.className)}
|
|
>
|
|
<Border
|
|
{...borderProps}
|
|
className={twMerge(
|
|
"w-full",
|
|
borderProps?.className,
|
|
"twui-empty-content-border"
|
|
)}
|
|
>
|
|
<Center>
|
|
<Row {...contentWrapperProps}>
|
|
{icon && <div className="opacity-50">{icon}</div>}
|
|
<Span
|
|
size="small"
|
|
{...textProps}
|
|
className={twMerge(
|
|
"opacity-70 text-foreground-light dark:text-foreground-dark",
|
|
textProps?.className
|
|
)}
|
|
>
|
|
{title}
|
|
</Span>
|
|
</Row>
|
|
</Center>
|
|
</Border>
|
|
</Stack>
|
|
);
|
|
|
|
if (url) {
|
|
return (
|
|
<Link
|
|
{...linkProps}
|
|
className={twMerge(
|
|
"w-full",
|
|
"twui-empty-content-link",
|
|
linkProps?.className
|
|
)}
|
|
href={url}
|
|
>
|
|
{mainComponent}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return mainComponent;
|
|
}
|