UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: обновление empty-state во внешних контурах
This commit is contained in:
parent
589a3916a4
commit
a4e9c3751a
|
|
@ -4,7 +4,7 @@
|
||||||
* See the LICENSE file for details.
|
* See the LICENSE file for details.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Inbox } from "lucide-react";
|
import { ViewVerticalStackIllustration, WorkItemVerticalStackIllustration } from "@plane/propel/empty-state";
|
||||||
import { cn } from "@plane/utils";
|
import { cn } from "@plane/utils";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
@ -15,15 +15,25 @@ type Props = {
|
||||||
|
|
||||||
export const ExternalContoursEmptyState = (props: Props) => {
|
export const ExternalContoursEmptyState = (props: Props) => {
|
||||||
const { title, description, compact = false } = props;
|
const { title, description, compact = false } = props;
|
||||||
|
const Illustration = compact ? WorkItemVerticalStackIllustration : ViewVerticalStackIllustration;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
|
<div
|
||||||
<div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
|
className={cn(
|
||||||
<Inbox className={cn("block shrink-0", compact ? "size-9" : "size-10")} strokeWidth={1.6} />
|
"nodedc-external-empty-state",
|
||||||
|
compact ? "max-w-[24rem]" : "max-w-sm"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className={cn("nodedc-external-empty-media", compact ? "h-[7rem] w-[7rem]" : "h-[6rem] w-[6rem]")}>
|
||||||
|
<Illustration className={cn("block shrink-0", compact ? "h-[6.4rem] w-auto" : "h-[5.5rem] w-auto")} />
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className={cn("space-y-2", compact ? "max-w-[24rem]" : "max-w-sm")}>
|
||||||
<h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
|
<h3 className={cn("font-semibold text-primary", compact ? "text-18" : "text-18")}>{title}</h3>
|
||||||
{description && <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>}
|
{description && (
|
||||||
|
<p className={cn("mx-auto text-13 leading-6 text-secondary", compact ? "max-w-[24rem]" : "max-w-sm")}>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -99,8 +99,9 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
|
||||||
inboxIssueId={inboxIssueId.toString()}
|
inboxIssueId={inboxIssueId.toString()}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-full w-full items-center justify-center px-8">
|
<div className="flex h-full w-full flex-col overflow-hidden px-8">
|
||||||
<div className="nodedc-external-section max-w-xl px-8 py-10">
|
<div className="hidden h-20 shrink-0 lg:block" />
|
||||||
|
<div className="flex min-h-0 flex-1 items-center justify-center">
|
||||||
<ExternalContoursEmptyState
|
<ExternalContoursEmptyState
|
||||||
compact
|
compact
|
||||||
title={t("external_contours_page.empty_state.detail_title")}
|
title={t("external_contours_page.empty_state.detail_title")}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue