Untitled
unknown
plain_text
6 months ago
6.5 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"; type LayoutDirection = 'horizontal' | 'vertical'; type StepStatus = 'Incomplete' | 'Active' | 'Complete'; interface Step { id: string; title: string; description?: string; status: StepStatus; } function ProgressIndicator() { useEffect(() => { const createComponent = async () => { try { // Sample steps data const steps: Step[] = [ { id: '1', title: 'Account Details', description: 'Setup your basic account', status: 'Complete' }, { id: '2', title: 'Personal Information', description: 'Tell us about yourself', status: 'Active' }, { id: '3', title: 'Business Profile', description: 'Setup your business details', status: 'Incomplete' }, { id: '4', title: 'Payment Information', description: 'Add payment method', status: 'Incomplete' } ]; const node = await figma.createNodeFromJSXAsync( <AutoLayout direction="vertical" spacing={48} padding={32} > {/* Horizontal Layout */} <AutoLayout direction="vertical" spacing={8} width={800} > <Label label="Horizontal Layout" state="default" /> <HorizontalStepper steps={steps} /> </AutoLayout> {/* Vertical Layout */} <AutoLayout direction="vertical" spacing={8} width={400} > <Label label="Vertical Layout" state="default" /> <VerticalStepper steps={steps} /> </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>; } // Horizontal Stepper Component function HorizontalStepper({ steps }: { steps: Step[] }) { return ( <AutoLayout width="fill-parent" padding={24} fill="#FFFFFF" stroke="#E1E4EA" cornerRadius={12} spacing={0} > <AutoLayout width="fill-parent" verticalAlignItems="center" spacing={0} > {steps.map((step, index) => ( <AutoLayout key={step.id} width={`${100 / steps.length}%`} verticalAlignItems="center" horizontalAlignItems="center" > <AutoLayout direction="vertical" spacing={12} verticalAlignItems="center" width="fill-parent" > <ProgressStep type="Numbered" state={step.status} size="md" stepNumber={parseInt(step.id)} title={step.title} description={step.description} /> <AutoLayout direction="vertical" spacing={4} width="fill-parent" horizontalAlignItems="center" > <Text fontFamily="Inter" fontSize={14} fontWeight="bold" fill="#1E1D2B" > {step.title} </Text> {step.description && ( <HintText text={step.description} state="default" /> )} </AutoLayout> </AutoLayout> {index < steps.length - 1 && ( <AutoLayout width={40} height={2} fill={step.status === 'Complete' ? "#1D9BF0" : "#E1E4EA"} /> )} </AutoLayout> ))} </AutoLayout> </AutoLayout> ); } // Vertical Stepper Component function VerticalStepper({ steps }: { steps: Step[] }) { return ( <AutoLayout direction="vertical" width="fill-parent" padding={24} fill="#FFFFFF" stroke="#E1E4EA" cornerRadius={12} spacing={0} > {steps.map((step, index) => ( <AutoLayout key={step.id} direction="vertical" width="fill-parent" spacing={0} > <AutoLayout spacing={16} width="fill-parent" verticalAlignItems="start" > <AutoLayout direction="vertical" spacing={0} verticalAlignItems="center" > <ProgressStep type="LineText" state={step.status} size="md" stepNumber={parseInt(step.id)} title={step.title} description={step.description} /> {index < steps.length - 1 && ( <AutoLayout width={2} height={40} fill={step.status === 'Complete' ? "#1D9BF0" : "#E1E4EA"} /> )} </AutoLayout> <AutoLayout direction="vertical" spacing={4} width="fill-parent" > <Text fontFamily="Inter" fontSize={14} fontWeight="bold" fill="#1E1D2B" > {step.title} </Text> {step.description && ( <HintText text={step.description} state="default" /> )} </AutoLayout> </AutoLayout> </AutoLayout> ))} </AutoLayout> ); } widget.register(ProgressIndicator);
Editor is loading...
Leave a Comment