Untitled

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

function TimeSelectionWidget() {
  const timeSlots = ['11:00 AM', '11:30 AM', '2:00 PM', '3:30 PM'];

  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          padding={24}
          width={400}
          spacing={16}
          horizontalAlignItems="center"
          fill={"#FFFFFF"}
        >
          {timeSlots.map((time) => (
            <AutoLayout
              key={time}
              width="fill-parent"
              height={72}
              padding={{ left: 24, right: 24, top: 20, bottom: 20 }}
              verticalAlignItems="center"
              fill="#FFFFFF"
              stroke="#E1E4EA"
              strokeWidth={1}
              cornerRadius={16}
              hoverStyle={{
                fill: "#F8F9FC"
              }}
            >
              <Text
                width="fill-parent"
                fontSize={24}
                fontFamily="Inter"
                fontWeight={500}
                fill="#000000"
              >
                {time}
              </Text>
            </AutoLayout>
          ))}
        </AutoLayout>
      );
      
      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };
    createComponent();
  });

  return <Text>Time Selection Widget</Text>;
}

widget.register(TimeSelectionWidget);