Untitled

const { widget } = figma;
const { useEffect, AutoLayout, Text } = widget;

// Import required components
import ProgressStep from "./components/ProgressStep";

function OnboardingProgressWidget() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          spacing={8}
          padding={16}
          width={400}
          fill="#FFFFFF"
          cornerRadius={12}
        >
          {/* Header Section */}
          <AutoLayout
            direction="horizontal"
            spacing={16}
            verticalAlignItems="center"
            width="fill-parent"
          >
            <Text
              fontSize={18}
              fontFamily="Inter"
              fontWeight="semibold"
              fill="#1E1D2B"
            >
              Complete your onboarding
            </Text>

            {/* Progress Percentage */}
            <Text
              fontSize={24}
              fontFamily="Inter"
              fontWeight="bold"
              fill="#7857EE"
            >
              14%
            </Text>
          </AutoLayout>

          {/* Progress Bar */}
          <AutoLayout
            width="fill-parent"
            height={4}
            fill="#F2F4F7"
            cornerRadius={2}
          >
            <AutoLayout
              width={56} // 14% of 400px
              height="fill-parent"
              fill="#7857EE"
              cornerRadius={2}
            />
          </AutoLayout>

          {/* "COMPLETED" Label */}
          <Text
            fontSize={12}
            fontFamily="Inter"
            fontWeight="medium"
            fill="#71767F"
          >
            COMPLETED
          </Text>
        </AutoLayout>
      );

      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };

    createComponent();
  }, []);

  return <Text>Onboarding Progress Widget</Text>;
}

widget.register(OnboardingProgressWidget);