Untitled

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

function VenueTypeSelector() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          spacing={16}
          width={400}
        >
          {/* Title */}
          <Text
            fontSize={16}
            fontFamily="Inter"
            fontWeight="medium"
            fill="#1E1D2B"
          >
            Venue type
          </Text>

          {/* Toggle Buttons Group */}
          <AutoLayout
            spacing={12}
            horizontalAlignItems="start"
          >
            {/* Everyone Button - Selected */}
            <Button
              label="Everyone"
              style="filled"
              state="default"
              size="medium"
              showText={true}
              fill="#6C5CE7" // Purple color for selected state
              cornerRadius={24}
              padding={{ top: 8, bottom: 8, left: 16, right: 16 }}
            />

            {/* Female only Button */}
            <Button
              label="Female only"
              style="outline"
              state="default"
              size="medium"
              showText={true}
              stroke="#E1E4EA"
              fill="#FFFFFF"
              cornerRadius={24}
              padding={{ top: 8, bottom: 8, left: 16, right: 16 }}
            />

            {/* Male only Button */}
            <Button
              label="Male only"
              style="outline"
              state="default"
              size="medium"
              showText={true}
              stroke="#E1E4EA"
              fill="#FFFFFF"
              cornerRadius={24}
              padding={{ top: 8, bottom: 8, left: 16, right: 16 }}
            />
          </AutoLayout>
        </AutoLayout>
      );

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

  return <Text>Venue Type Selector</Text>;
}

widget.register(VenueTypeSelector);