Untitled

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

function NoAppointmentsWidget() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          width={480}
          height={400}
          fill="#FFFFFF"
          cornerRadius={16}
          padding={32}
          horizontalAlignItems="center"
          verticalAlignItems="center"
          spacing={16}
        >
          {/* Calendar Icon */}
          <Frame
            width={64}
            height={64}
            cornerRadius={16}
            fill={{
              type: "gradient",
              gradientType: "linear",
              gradientTransform: [[1, 0, 0], [0, 1, 0]],
              gradientStops: [
                { position: 0, color: { r: 0.6, g: 0.4, b: 1, a: 1 } },
                { position: 1, color: { r: 1, g: 1, b: 1, a: 1 } }
              ]
            }}
          />

          {/* Title Text */}
          <Text
            fontSize={24}
            fontWeight={600}
            fill="#18191B"
            fontFamily="Inter"
          >
            No appointments
          </Text>

          {/* Subtitle Text */}
          <Text
            fontSize={16}
            fontWeight={400}
            fill="#71767F"
            fontFamily="Inter"
            textAlign="center"
            width={320}
          >
            Your upcoming and past appointments will appear when you book
          </Text>

          {/* Search Button */}
          <Button
            label="Search salons"
            style="outline"
            theme="neutral"
            size="large"
            onClick={() => {}}
          />
        </AutoLayout>
      );
      
      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };
    
    createComponent();
  });

  return <Text>No Appointments Widget</Text>;
}

widget.register(NoAppointmentsWidget);