343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* ProjectCard — https://app.subframe.com/f023064a5ca0/library?component=ProjectCard_f82a72d5-da31-4d61-b47b-6b6ebd18ff67
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCalendarClock } from "@subframe/core";
|
|
import { FeatherFlag } from "@subframe/core";
|
|
import { FeatherPlayCircle } from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface PriorityIndicatorProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?: "none" | "low" | "medium" | "high" | "critical";
|
|
className?: string;
|
|
}
|
|
|
|
const PriorityIndicator = React.forwardRef<
|
|
HTMLDivElement,
|
|
PriorityIndicatorProps
|
|
>(function PriorityIndicator(
|
|
{ variant = "none", className, ...otherProps }: PriorityIndicatorProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/ba2d0229 flex h-8 items-center gap-0.5 rounded-md border-2 border-solid border-border-default bg-surface-neutral-secondary px-1.5 py-1.5",
|
|
{
|
|
"border-2 border-solid border-surface-ui-solid-purple-default":
|
|
variant === "critical",
|
|
"border-2 border-solid border-border-negative-solid":
|
|
variant === "high",
|
|
"border-2 border-solid border-border-warning-subtle":
|
|
variant === "medium",
|
|
"border-2 border-solid border-border-positive-subtle":
|
|
variant === "low",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-4 w-1.5 flex-none items-center rounded-sm bg-border-default",
|
|
{
|
|
"bg-surface-ui-solid-purple-default": variant === "critical",
|
|
"bg-surface-feedback-solid-negative-default": variant === "high",
|
|
"bg-surface-ui-subtle-yellow-active": variant === "medium",
|
|
"bg-surface-feedback-solid-positive-default": variant === "low",
|
|
}
|
|
)}
|
|
/>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden h-4 w-1.5 flex-none items-center rounded-sm bg-surface-ui-subtle-yellow-active",
|
|
{ flex: variant === "medium" }
|
|
)}
|
|
/>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-4 w-1.5 flex-none items-start rounded-sm bg-border-default",
|
|
{
|
|
"bg-surface-ui-solid-purple-default": variant === "critical",
|
|
"bg-surface-ui-solid-red-default": variant === "high",
|
|
hidden: variant === "medium",
|
|
}
|
|
)}
|
|
/>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-4 w-1.5 flex-none items-start rounded-sm bg-border-default",
|
|
{
|
|
"bg-surface-ui-solid-purple-default": variant === "critical",
|
|
"bg-surface-ui-solid-red-default": variant === "high",
|
|
}
|
|
)}
|
|
/>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-4 w-1.5 flex-none items-start rounded-sm bg-border-default",
|
|
{
|
|
"bg-surface-ui-solid-purple-hover": variant === "critical",
|
|
"bg-brand-brand-surface-subtle-default": variant === "high",
|
|
}
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface PriorityBadgeProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?: "none" | "low" | "medium" | "high" | "critical";
|
|
/**
|
|
* Local wrapper deviation from the Subframe export: the export hardcodes the
|
|
* German words "Kritisch"/"Hoch"/"Mittel"/"Niedrig" inside the badge, which
|
|
* would ship untranslated text into an English UI. The label is a prop here
|
|
* so the calling screen passes the already-translated string. Reported back
|
|
* to David; keep this override if the component is re-synced.
|
|
*/
|
|
label?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const PriorityBadge = React.forwardRef<HTMLDivElement, PriorityBadgeProps>(
|
|
function PriorityBadge(
|
|
{ variant = "none", label, className, ...otherProps }: PriorityBadgeProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/94453bd3 hidden items-center rounded-sm border-2 border-solid border-surface-ui-solid-purple-default bg-surface-ui-subtle-purple-default px-1.5 py-0.5",
|
|
{
|
|
flex: variant === "critical",
|
|
"flex border-2 border-solid border-border-negative-solid bg-surface-feedback-subtle-negative":
|
|
variant === "high",
|
|
"flex border-2 border-solid border-border-warning-subtle bg-surface-feedback-subtle-warning":
|
|
variant === "medium",
|
|
"flex border-2 border-solid border-border-positive-subtle bg-surface-feedback-subtle-positive":
|
|
variant === "low",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"whitespace-nowrap text-body-small-semibold-0 font-body-small-semibold-0 text-text-neutral-secondary",
|
|
{
|
|
"text-text-ui-purple": variant === "critical",
|
|
"text-text-feedback-negative": variant === "high",
|
|
"text-text-feedback-warning": variant === "medium",
|
|
"text-text-feedback-positive": variant === "low",
|
|
}
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface ProjectCardRootProps
|
|
extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
title?: React.ReactNode;
|
|
subtitle?: React.ReactNode;
|
|
tags?: React.ReactNode;
|
|
price?: React.ReactNode;
|
|
/** Translated priority label rendered inside the badge (see PriorityBadge). */
|
|
priorityLabel?: React.ReactNode;
|
|
avatar?: React.ReactNode;
|
|
startDate?: React.ReactNode;
|
|
endDate?: React.ReactNode;
|
|
appointmentLabel?: React.ReactNode;
|
|
variant?: "none" | "low" | "medium" | "high" | "critical";
|
|
hideBadge?: boolean;
|
|
hideIndicator?: boolean;
|
|
hideAvatar?: boolean;
|
|
hideDateRange?: boolean;
|
|
hideAppointment?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const ProjectCardRoot = React.forwardRef<HTMLDivElement, ProjectCardRootProps>(
|
|
function ProjectCardRoot(
|
|
{
|
|
title,
|
|
subtitle,
|
|
tags,
|
|
price,
|
|
priorityLabel,
|
|
avatar,
|
|
startDate,
|
|
endDate,
|
|
appointmentLabel,
|
|
variant = "none",
|
|
hideBadge = false,
|
|
hideIndicator = false,
|
|
hideAvatar = false,
|
|
hideDateRange = false,
|
|
hideAppointment = false,
|
|
className,
|
|
...otherProps
|
|
}: ProjectCardRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/f82a72d5 flex w-80 cursor-pointer flex-col items-start overflow-hidden rounded-lg border border-solid border-border-default bg-surface-neutral-secondary shadow-sm hover:shadow-md",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full flex-col items-start px-3.5 pt-3.5",
|
|
{ "group-hover/f82a72d5:pt-2.5": variant === "low" }
|
|
)}
|
|
>
|
|
{title ? (
|
|
<span className="line-clamp-2 w-full text-body-default-semibold-0 font-body-default-semibold-0 text-text-neutral-primary">
|
|
{title}
|
|
</span>
|
|
) : null}
|
|
{subtitle ? (
|
|
<span className="line-clamp-1 w-full text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-secondary">
|
|
{subtitle}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="flex w-full flex-wrap items-center gap-1 px-3.5 pt-2">
|
|
{tags ? (
|
|
<div className="flex max-h-[44px] flex-wrap items-start gap-1 overflow-hidden">
|
|
{tags}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="flex w-full items-center px-3.5 pt-2 pb-4 relative z-10">
|
|
{price ? (
|
|
<span className="text-subtitle-0 font-subtitle-0 text-text-neutral-primary">
|
|
{price}
|
|
</span>
|
|
) : null}
|
|
<div className="flex items-center gap-1.5 absolute -bottom-4 right-2">
|
|
<div className="flex items-center gap-1">
|
|
<PriorityBadge
|
|
className={SubframeUtils.twClassNames({ hidden: hideBadge })}
|
|
label={priorityLabel}
|
|
variant={
|
|
variant === "critical"
|
|
? "critical"
|
|
: variant === "high"
|
|
? "high"
|
|
: variant === "medium"
|
|
? "medium"
|
|
: variant === "low"
|
|
? "low"
|
|
: "none"
|
|
}
|
|
/>
|
|
<PriorityIndicator
|
|
className={SubframeUtils.twClassNames({
|
|
hidden: hideIndicator,
|
|
})}
|
|
variant={
|
|
variant === "critical"
|
|
? "critical"
|
|
: variant === "high"
|
|
? "high"
|
|
: variant === "medium"
|
|
? "medium"
|
|
: variant === "low"
|
|
? "low"
|
|
: "none"
|
|
}
|
|
/>
|
|
</div>
|
|
{avatar ? (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex items-center gap-1.5 rounded-[9999px] ring-2 ring-border-default",
|
|
{
|
|
hidden: hideAvatar,
|
|
"ring-surface-ui-solid-purple-default":
|
|
variant === "critical",
|
|
"ring-border-negative-solid": variant === "high",
|
|
"ring-border-warning-subtle": variant === "medium",
|
|
"ring-border-positive-subtle": variant === "low",
|
|
}
|
|
)}
|
|
>
|
|
{avatar}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full flex-col items-start gap-2 overflow-hidden rounded-md border-2 border-solid border-border-default bg-surface-neutral-tertiary px-3 pt-6 pb-2.5 relative z-0",
|
|
{
|
|
"border-2 border-solid border-surface-ui-subtle-purple-active bg-surface-ui-subtle-purple-default":
|
|
variant === "critical",
|
|
"border-2 border-solid border-border-negative-subtle bg-surface-feedback-subtle-negative":
|
|
variant === "high",
|
|
"border-2 border-solid border-border-warning-subtle bg-surface-feedback-subtle-warning":
|
|
variant === "medium",
|
|
"border-2 border-solid border-border-positive-subtle bg-surface-feedback-subtle-positive":
|
|
variant === "low",
|
|
}
|
|
)}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full items-center gap-1.5",
|
|
{ hidden: hideDateRange }
|
|
)}
|
|
>
|
|
<FeatherPlayCircle className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary" />
|
|
{startDate ? (
|
|
<span className="whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-primary">
|
|
{startDate}
|
|
</span>
|
|
) : null}
|
|
<div className="flex h-px grow shrink-0 basis-0 items-start bg-text-neutral-primary" />
|
|
{endDate ? (
|
|
<span className="whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-primary">
|
|
{endDate}
|
|
</span>
|
|
) : null}
|
|
<FeatherFlag className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary" />
|
|
</div>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full items-center justify-center gap-1.5 rounded-round border border-solid border-border-default bg-surface-neutral-secondary px-2 py-1",
|
|
{ hidden: hideAppointment }
|
|
)}
|
|
>
|
|
<FeatherCalendarClock className="text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-icon-neutral-primary" />
|
|
{appointmentLabel ? (
|
|
<span className="whitespace-nowrap text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-primary">
|
|
{appointmentLabel}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const ProjectCard = Object.assign(ProjectCardRoot, {
|
|
PriorityIndicator,
|
|
PriorityBadge,
|
|
});
|