Untitled

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

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

function ProfileWidget() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          padding={24}
          width={400}
          spacing={16}
          fill="#1E1E1E"
          cornerRadius={16}
        >
          {/* Header Section */}
          <AutoLayout 
            width="fill-parent" 
            verticalAlignItems="center"
            spacing={16}
          >
            <Avatar
              size="l"
              style="full-image"
            />
            
            <AutoLayout 
              direction="vertical" 
              spacing={4}
              width="fill-parent"
            >
              <Text
                fill="#FFFFFF"
                fontSize={24}
                fontWeight={600}
              >
                Damilare
              </Text>
              <Text
                fill="#94A3B8"
                fontSize={16}
              >
                @damilareoo
              </Text>
            </AutoLayout>

            {/* Message Icon */}
            <Frame
              width={40}
              height={40}
              fill="#FFFFFF"
              cornerRadius={12}
            >
              <SVG
                src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="#1E1E1E"/>
                </svg>`}
                width={24}
                height={24}
                x={8}
                y={8}
              />
            </Frame>
          </AutoLayout>

          {/* Title */}
          <Text
            fill="#FFFFFF"
            fontSize={32}
            fontWeight={600}
            width="fill-parent"
          >
            Finances / Dark Mode
          </Text>

          {/* Tags */}
          <AutoLayout
            spacing={8}
            width="fill-parent"
            wrap={true}
          >
            {['minimal', 'ui', 'dashboard', 'saas', 'more...'].map((tag) => (
              <AutoLayout
                padding={{vertical: 8, horizontal: 16}}
                cornerRadius={100}
                fill={{type: 'solid', color: {r: 1, g: 1, b: 1, a: 0.1}}}
              >
                <Text
                  fontSize={16}
                  fill="#FFFFFF"
                >
                  {tag === 'more...' ? tag : `# ${tag}`}
                </Text>
              </AutoLayout>
            ))}
          </AutoLayout>

          {/* Action Buttons */}
          <AutoLayout
            width="fill-parent"
            spacing={24}
            verticalAlignItems="center"
          >
            {/* Like Button */}
            <SVG
              src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="#FFFFFF"/>
              </svg>`}
              width={24}
              height={24}
            />

            {/* Back Button */}
            <SVG
              src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="#FFFFFF"/>
              </svg>`}
              width={24}
              height={24}
            />

            {/* Download Button */}
            <SVG
              src={`<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M19 9H15V3H9V9H5L12 16L19 9ZM5 18V20H19V18H5Z" fill="#FFFFFF"/>
              </svg>`}
              width={24}
              height={24}
            />
          </AutoLayout>
        </AutoLayout>
      );

      // Add the node to the current page
      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };

    createComponent();
  });

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

widget.register(ProfileWidget);