Untitled

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

// Import required components
import Button from "./components/Button";
import Avatar from "./components/Avatar";
import CalendarCell from "./components/CalendarCell";
import DatePickerListItem from "./components/DatePickerListItem";

function SelectTimeWidget() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          width={440}
          padding={24}
          fill="#FFFFFF"
          spacing={24}
        >
          {/* Header with back and close buttons */}
          <AutoLayout 
            width="fill-parent"
            verticalAlignItems="center"
            horizontalAlignItems="start"
            spacing="auto"
          >
            {/* Back button */}
            <Button
              style="ghost"
              theme="neutral"
              leftIcon='<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 19L8 12L15 5" stroke="currentColor" stroke-width="2"/></svg>'
              showText={false}
            />
            
            <Text
              fontSize={32}
              fontFamily="Inter"
              fontWeight="bold"
            >
              Select time
            </Text>

            {/* Close button */}
            <Button
              style="ghost"
              theme="neutral"
              leftIcon='<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2"/></svg>'
              showText={false}
            />
          </AutoLayout>

          {/* Staff selector */}
          <AutoLayout
            verticalAlignItems="center"
            spacing={8}
            fill="#F8F9FC"
            padding={8}
            cornerRadius={999}
          >
            <Avatar
              size="xs"
              style="text"
            />
            <Text
              fontSize={16}
              fontWeight="medium"
            >
              Emily
            </Text>
            <SVG
              src='<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2"/></svg>'
              width={16}
              height={16}
            />
            
            {/* Calendar button */}
            <AutoLayout 
              verticalAlignItems="center" 
              horizontalAlignItems="end"
              spacing={8}
              fill="#F8F9FC"
              padding={8}
              cornerRadius={999}
            >
              <Button
                style="ghost"
                theme="neutral"
                rightIcon='<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2"/></svg>'
                showText={false}
              />
            </AutoLayout>
          </AutoLayout>

          {/* Month header */}
          <Text
            fontSize={18}
            fontWeight="semibold"
            fill="#000000"
          >
            September 2024
          </Text>

          {/* Calendar days */}
          <AutoLayout
            spacing={16}
            horizontalAlignItems="center"
          >
            {[
              {day: 18, label: 'Wed', state: 'active'},
              {day: 19, label: 'Thu', state: 'default'},
              {day: 20, label: 'Fri', state: 'default'},
              {day: 21, label: 'Sat', state: 'default'},
              {day: 22, label: 'Sun', state: 'disabled'},
            ].map((item) => (
              <AutoLayout
                direction="vertical"
                spacing={8}
                horizontalAlignItems="center"
              >
                <CalendarCell 
                  dayNumber={item.day}
                  state={item.state as any}
                  width={64}
                  height={64}
                />
                <Text
                  fontSize={14}
                  fill={item.state === 'disabled' ? '#CACFD8' : '#000000'}
                >
                  {item.label}
                </Text>
              </AutoLayout>
            ))}
          </AutoLayout>

          {/* Time slots */}
          <AutoLayout
            direction="vertical"
            spacing={12}
            width="fill-parent"
          >
            {['11:00 AM', '11:30 AM', '2:00 PM', '3:30 PM'].map((time) => (
              <DatePickerListItem
                state="default"
                title={time}
                width="fill-parent"
              />
            ))}
          </AutoLayout>

          {/* Footer text */}
          <AutoLayout
            spacing={4}
          >
            <Text
              fontSize={14}
              fill="#71767F"
            >
              Can't find a suitable time?
            </Text>
            <Text
              fontSize={14}
              fill="#7C3AED"
              textDecoration="underline"
            >
              Join the waitlist.
            </Text>
          </AutoLayout>

        </AutoLayout>
      );

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

    createComponent();
  }, []);

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

widget.register(SelectTimeWidget);