Untitled

const { widget } = figma;
const { useEffect, AutoLayout } = widget;
import Button from "./components/Button";

function ClearApplyButtons() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout 
          spacing={12}
          horizontalAlignItems="center"
          verticalAlignItems="center"
          width={400}
          padding={16}
        >
          {/* Clear all button */}
          <Button
            label="Clear all"
            style="outline"
            state="default"
            size="large"
            showText={true}
            stroke="#E1E4EA"
            fill="#FFFFFF"
            width={180}
            cornerRadius={8}
          />

          {/* Apply button */}
          <Button
            label="Apply"
            style="filled"
            state="default"
            size="large"
            showText={true}
            fill="#18191B"
            width={180}
            cornerRadius={8}
          />
        </AutoLayout>
      );

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

  return <Text>Clear and Apply Buttons</Text>;
}

widget.register(ClearApplyButtons);