85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
// local imports
|
|
import { Button } from "../button/button";
|
|
import { cn } from "../utils/classname";
|
|
import { getDetailedAsset } from "./assets/asset-registry";
|
|
import type { DetailedAssetType } from "./assets/asset-types";
|
|
import type { BaseEmptyStateCommonProps } from "./types";
|
|
|
|
export function EmptyStateDetailed({
|
|
asset,
|
|
assetKey,
|
|
title,
|
|
description,
|
|
actions,
|
|
className,
|
|
rootClassName,
|
|
assetClassName,
|
|
customButton,
|
|
align = "start",
|
|
}: BaseEmptyStateCommonProps) {
|
|
// Determine which asset to use: assetKey takes precedence, fallback to custom asset
|
|
const resolvedAsset = assetKey ? getDetailedAsset(assetKey as DetailedAssetType, assetClassName) : asset;
|
|
|
|
return (
|
|
<div className={cn("flex size-full items-center justify-center", rootClassName)}>
|
|
<div
|
|
className={cn(
|
|
"flex size-full max-w-[25rem] flex-col justify-center gap-6 text-left",
|
|
{
|
|
"items-center text-center": align === "center",
|
|
},
|
|
className
|
|
)}
|
|
>
|
|
{resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
|
|
|
|
<div
|
|
className={cn("flex flex-col gap-4", {
|
|
"items-center": align === "center",
|
|
})}
|
|
>
|
|
{(title || description) && (
|
|
<div className="flex flex-col gap-2">
|
|
{title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
|
|
{description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
|
|
</div>
|
|
)}
|
|
|
|
{customButton
|
|
? customButton
|
|
: actions &&
|
|
actions.length > 0 && (
|
|
<div className="flex flex-col gap-4 sm:flex-row">
|
|
{actions.map((action, index) => {
|
|
const { label, variant, ...rest } = action;
|
|
return (
|
|
<Button
|
|
key={index}
|
|
variant={variant}
|
|
size="xl"
|
|
className={cn({
|
|
"nodedc-empty-state-primary": variant === "primary",
|
|
"nodedc-empty-state-secondary": variant === "secondary",
|
|
})}
|
|
{...rest}
|
|
>
|
|
{label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
EmptyStateDetailed.displayName = "EmptyStateDetailed";
|