Untitled

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

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

function ProfileWidget() {
  // Profile menu items data
  const menuItems = [
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='currentColor'/></svg>", label: "Favourites" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z' fill='currentColor'/></svg>", label: "Vouchers" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z' fill='currentColor'/></svg>", label: "Gift cards" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z' fill='currentColor'/></svg>", label: "Memberships" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z' fill='currentColor'/></svg>", label: "Forms" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z' fill='currentColor'/></svg>", label: "Orders" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z' fill='currentColor'/></svg>", label: "Payment methods" },
    { icon: "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.63-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z' fill='currentColor'/></svg>", label: "Settings" }
  ];

  useEffect(() => {
    const createProfile = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          padding={16}
          width={400}
          fill="#FFFFFF"
          spacing={16}
        >
          {/* Header */}
          <Text
            fontSize={24}
            fontWeight="bold"
            fill="#000000"
          >
            Profile
          </Text>

          {/* Profile Card */}
          <AutoLayout
            width="fill-parent"
            padding={16}
            cornerRadius={16}
            fill="#FFFFFF"
            stroke="#E1E4EA"
            spacing={12}
            verticalAlignItems="center"
          >
            <Avatar
              size="xl"
              style="text"
            />
            <AutoLayout direction="vertical" spacing={4}>
              <Text
                fontSize={18}
                fontWeight="bold"
                fill="#000000"
              >
                John Smith
              </Text>
              <Text
                fontSize={14}
                fill="#71767F"
              >
                Edit profile
              </Text>
            </AutoLayout>
          </AutoLayout>

          {/* Menu Items */}
          {menuItems.map((item, index) => (
            <AutoLayout
              key={index}
              width="fill-parent"
              padding={{ vertical: 12, horizontal: 0 }}
              verticalAlignItems="center"
              stroke={{ type: 'solid', color: '#E1E4EA' }}
              strokeAlign="bottom"
            >
              <Button
                label={item.label}
                leftIcon={item.icon}
                rightIcon="<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z' fill='#71767F'/></svg>"
                style="ghost"
                theme="neutral"
                size="large"
                width="fill-parent"
              />
            </AutoLayout>
          ))}
        </AutoLayout>
      );

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

    createProfile();
  });

  return <Text>Profile Widget</Text>;
}

widget.register(ProfileWidget);