Untitled

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

import Avatar from "./components/Avatar";
import Button from "./components/Button";
import SocialButton from "./components/SocialButton";

// Sample social media icons
const socialIcons = {
  linkedin: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <rect x="2" y="9" width="4" height="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="4" cy="4" r="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>`,
  twitter: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>`,
  github: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>`
};

function TeamProfileScreen() {
  useEffect(() => {
    figma.ui.onmessage = (msg) => {
      if (msg.type === "showToast") {
        figma.notify("Team profile screen created");
      }
      if (msg.type === "close") {
        figma.closePlugin();
      }
    };
  });

  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          spacing={32}
          padding={40}
          verticalAlignItems="center"
          horizontalAlignItems="center"
          fill="#FFFFFF"
          cornerRadius={16}
          stroke="#E1E4EA"
        >
          <Text fontSize={24} fontWeight="bold">Team Members</Text>
          
          {/* Profile 1 */}
          <AutoLayout
            direction="horizontal"
            spacing={24}
            verticalAlignItems="center"
            padding={16}
            fill="#F8F9FC"
            cornerRadius={12}
          >
            <Avatar 
              size="xl"
              style="full-image"
            />
            <AutoLayout direction="vertical" spacing={8}>
              <Text fontSize={18} fontWeight="bold">Sarah Johnson</Text>
              <Button 
                label="Product Designer"
                theme="primary"
                style="filled"
                size="medium"
              />
              <SocialButton 
                label="Connect on LinkedIn"
                icon={socialIcons.linkedin}
              />
            </AutoLayout>
          </AutoLayout>

          {/* Profile 2 */}
          <AutoLayout
            direction="horizontal"
            spacing={24}
            verticalAlignItems="center"
            padding={16}
            fill="#F8F9FC"
            cornerRadius={12}
          >
            <Avatar 
              size="xl"
              style="full-image"
            />
            <AutoLayout direction="vertical" spacing={8}>
              <Text fontSize={18} fontWeight="bold">Michael Chen</Text>
              <Button 
                label="Senior Developer"
                theme="error"
                style="filled"
                size="medium"
              />
              <SocialButton 
                label="Follow on GitHub"
                icon={socialIcons.github}
              />
            </AutoLayout>
          </AutoLayout>

          {/* Profile 3 */}
          <AutoLayout
            direction="horizontal"
            spacing={24}
            verticalAlignItems="center"
            padding={16}
            fill="#F8F9FC"
            cornerRadius={12}
          >
            <Avatar 
              size="xl"
              style="full-image"
            />
            <AutoLayout direction="vertical" spacing={8}>
              <Text fontSize={18} fontWeight="bold">Emma Williams</Text>
              <Button 
                label="Marketing Lead"
                theme="neutral"
                style="filled"
                size="medium"
              />
              <SocialButton 
                label="Follow on Twitter"
                icon={socialIcons.twitter}
              />
            </AutoLayout>
          </AutoLayout>
        </AutoLayout>
      );
      
      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };
    
    createComponent();
  });

  return <Text fontSize={24}>Team Profile Screen</Text>;
}

widget.register(TeamProfileScreen);