Untitled
unknown
plain_text
6 months ago
4.9 kB
2
Indexable
const { widget } = figma; const { useEffect, AutoLayout, Text } = widget; // Import required components import ProgressStep from "./components/ProgressStep"; import Label from "./components/Label"; import HintText from "./components/HintText"; // Define types for progress steps type StepLayout = 'horizontal' | 'vertical'; interface Step { id: number; title: string; description: string; state: 'Complete' | 'Active' | 'Incomplete'; } function ProgressIndicator() { useEffect(() => { const createComponent = async () => { try { // Sample steps data const steps: Step[] = [ { id: 1, title: "Personal Information", description: "Basic details and contact info", state: "Complete" }, { id: 2, title: "Company Details", description: "Your organization information", state: "Active" }, { id: 3, title: "Project Requirements", description: "Specific needs and timeline", state: "Incomplete" }, { id: 4, title: "Review & Submit", description: "Verify and complete submission", state: "Incomplete" } ]; const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" spacing={48} padding={32} width={800} > {/* Horizontal Layout */} <AutoLayout direction="vertical" spacing={8} width="fill-parent" > <Label label="Horizontal Progress" state="default" /> <AutoLayout direction="horizontal" spacing={0} width="fill-parent" verticalAlignItems="center" > {steps.map((step, index) => ( <AutoLayout key={step.id} width={`${100 / steps.length}%`} horizontalAlignItems="center" > <ProgressStep type="Numbered" state={step.state} size="md" stepNumber={step.id} title={step.title} description={step.description} /> {index < steps.length - 1 && ( <HintText text="―――――" state={step.state === "Complete" ? "success" : "default"} /> )} </AutoLayout> ))} </AutoLayout> </AutoLayout> {/* Vertical Layout */} <AutoLayout direction="vertical" spacing={8} width="fill-parent" > <Label label="Vertical Progress" state="default" /> <AutoLayout direction="vertical" spacing={0} width="fill-parent" > {steps.map((step, index) => ( <AutoLayout key={step.id} direction="vertical" spacing={4} padding={{ top: index === 0 ? 0 : 8, bottom: index === steps.length - 1 ? 0 : 8 }} > <ProgressStep type="LineText" state={step.state} size="md" stepNumber={step.id} title={step.title} description={step.description} /> {index < steps.length - 1 && ( <AutoLayout padding={{ left: 20 }} > <HintText text="|" state={step.state === "Complete" ? "success" : "default"} /> </AutoLayout> )} </AutoLayout> ))} </AutoLayout> </AutoLayout> </AutoLayout> ); figma.currentPage.appendChild(node); figma.viewport.scrollAndZoomIntoView([node]); } catch (error) { figma.notify(`Error creating progress indicator: ${error.message}`); } }; createComponent(); }); return <Text>Progress Indicator Component</Text>; } widget.register(ProgressIndicator);
Editor is loading...
Leave a Comment