Untitled

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

// Import required components
import Avatar from "./components/Avatar";
import Status from "./components/Status";

function NotificationCenter() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          padding={16}
          spacing={24}
          width={400}
          fill="#FFFFFF"
        >
          {/* Header */}
          <AutoLayout
            width="fill-parent"
            verticalAlignItems="center"
            spacing={16}
          >
            <Text
              fontSize={32}
              fontWeight="bold"
              fill="#1E1D2B"
            >
              Notifications
            </Text>
            
            {/* Notification badge */}
            <AutoLayout
              padding={{left: 8, right: 8, top: 4, bottom: 4}}
              fill="#FB3748"
              cornerRadius={999}
            >
              <Text
                fontSize={14}
                fontWeight="bold"
                fill="#FFFFFF"
              >
                2
              </Text>
            </AutoLayout>
          </AutoLayout>

          {/* Section Header */}
          <Text
            fontSize={24}
            fontWeight="medium"
            fill="#71767F"
          >
            Today
          </Text>

          {/* Notification List */}
          <AutoLayout
            direction="vertical"
            spacing={16}
            width="fill-parent"
          >
            {/* Notification Item 1 */}
            <AutoLayout spacing={12} verticalAlignItems="center">
              <Avatar
                size="m"
                style="solid-bg"
              />
              <Text
                fontSize={16}
                width={300}
                fill="#1E1D2B"
              >
                What if your next Crush is online right now?
              </Text>
              <Status type="notification" />
            </AutoLayout>

            {/* Notification Item 2 */}
            <AutoLayout spacing={12} verticalAlignItems="center">
              <Avatar
                size="m"
                style="solid-bg"
              />
              <Text
                fontSize={16}
                width={300}
                fill="#1E1D2B"
              >
                Choose who you want to meet! Certified profiles, online at the same time, new profiles...
              </Text>
              <Status type="notification" />
            </AutoLayout>

            {/* Notification Item 3 */}
            <AutoLayout spacing={12} verticalAlignItems="center">
              <Avatar
                size="m"
                style="solid-bg"
              />
              <Text
                fontSize={16}
                width={300}
                fill="#1E1D2B"
              >
                🎯 Target: Certified profiles! No need to compromise to make great connections
              </Text>
              <Status type="notification" />
            </AutoLayout>
          </AutoLayout>
        </AutoLayout>
      );
      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };
    createComponent();
  });

  return <Text>Notification Center</Text>;
}

widget.register(NotificationCenter);