46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import ChevronRightIcon from "@/assets/report/chevron-right.svg?react";
|
|
import { Pill } from "@/components/atoms/Pill";
|
|
import { Surface } from "@/components/atoms/Surface";
|
|
import { UI_PRIMARY_GRADIENT_CLASS } from "@/components/atoms/uiTokens";
|
|
import type { WorkflowStep } from "@/features/plan/types/marketingPlan";
|
|
|
|
type ContentStrategyWorkflowTabProps = {
|
|
steps: WorkflowStep[];
|
|
};
|
|
|
|
export function ContentStrategyWorkflowTab({ steps }: ContentStrategyWorkflowTabProps) {
|
|
return (
|
|
<div className="flex md:flex-row flex-col gap-4 items-stretch animate-fade-in-up">
|
|
{steps.map((step, i) => (
|
|
<div key={step.step} className="flex md:flex-row flex-col items-center gap-4 flex-1 min-w-0">
|
|
<Surface className="flex-1 w-full">
|
|
<div
|
|
className={`w-10 h-10 rounded-full text-white title-14 flex items-center justify-center mb-3 ${UI_PRIMARY_GRADIENT_CLASS}`}
|
|
>
|
|
{step.step}
|
|
</div>
|
|
<h4 className="title-14 text-navy-900 mb-1 break-keep">{step.name}</h4>
|
|
<p className="body-14 text-neutral-70 mb-3 break-keep">{step.description}</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Pill size="sm" weight="none" className="bg-lavender-100 text-violet-700 font-normal">
|
|
{step.owner}
|
|
</Pill>
|
|
<Pill size="sm" weight="none" className="bg-neutral-10 text-neutral-70 font-normal">
|
|
{step.duration}
|
|
</Pill>
|
|
</div>
|
|
</Surface>
|
|
{i < steps.length - 1 ? (
|
|
<ChevronRightIcon
|
|
width={20}
|
|
height={20}
|
|
className="text-neutral-40 shrink-0 hidden md:block"
|
|
aria-hidden
|
|
/>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|