Untitled

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

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

// Social media icons
const socialIcons = {
  google: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm.14 19.018c-3.868 0-7-3.14-7-7.018 0-3.878 3.132-7.018 7-7.018 1.89 0 3.47.697 4.682 1.829l-1.974 1.978c-.54-.519-1.484-1.122-2.708-1.122-2.31 0-4.187 1.9-4.187 4.333 0 2.432 1.877 4.333 4.187 4.333 2.694 0 3.7-1.939 3.86-2.94H12.14v-2.591h6.458c.064.343.097.686.097 1.012 0 3.961-2.663 6.204-6.555 6.204z" fill="currentColor"/>
  </svg>`,
  github: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" fill="currentColor"/>
  </svg>`,
  apple: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M17.05 12.536c-.031-3.018 2.46-4.473 2.573-4.543-1.403-2.051-3.584-2.332-4.36-2.363-1.853-.189-3.621 1.094-4.56 1.094-.957 0-2.422-1.068-3.98-1.041-2.044.031-3.93 1.189-4.981 3.022-2.125 3.689-.544 9.148 1.526 12.137 1.012 1.461 2.213 3.104 3.792 3.047 1.525-.062 2.099-.986 3.94-.986 1.827 0 2.346.986 3.94.953 1.628-.031 2.658-1.48 3.65-2.949 1.153-1.682 1.624-3.314 1.65-3.398-.035-.016-3.163-1.213-3.194-4.815z" fill="currentColor"/>
    <path d="M14.118 3.773c.839-1.019 1.406-2.435 1.251-3.845-1.209.049-2.675.807-3.541 1.821-.777.902-1.458 2.342-1.276 3.726 1.349.104 2.726-.687 3.566-1.702z" fill="currentColor"/>
  </svg>`
};

function LoginScreen() {
  useEffect(() => {
    figma.ui.onmessage = (msg) => {
      if (msg.type === "showToast") {
        figma.notify("Login initiated");
      }
      if (msg.type === "close") {
        figma.closePlugin();
      }
    };
  });

  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          spacing={32}
          padding={48}
          verticalAlignItems="center"
          horizontalAlignItems="center"
          fill="#FFFFFF"
          cornerRadius={24}
          stroke="#E1E4EA"
          width={480}
        >
          {/* Header Section */}
          <AutoLayout
            direction="vertical"
            spacing={16}
            verticalAlignItems="center"
          >
            <Avatar 
              size="xxl"
              style="solid-bg"
            />
            <AutoLayout direction="vertical" spacing={8} verticalAlignItems="center">
              <Text fontSize={24} fontWeight="bold">Welcome Back!</Text>
              <Text fontSize={16} fill="#666">Sign in to continue</Text>
            </AutoLayout>
          </AutoLayout>

          {/* Primary Login Button */}
          <Button
            label="Sign in with Email"
            theme="primary"
            style="filled"
            size="large"
            onClick={() => figma.notify("Email login clicked")}
          />

          {/* Divider */}
          <AutoLayout
            direction="horizontal"
            spacing={16}
            verticalAlignItems="center"
            width="fill-parent"
          >
            <AutoLayout height={1} fill="#E1E4EA" width="fill-parent" />
            <Text fontSize={14} fill="#666">or continue with</Text>
            <AutoLayout height={1} fill="#E1E4EA" width="fill-parent" />
          </AutoLayout>

          {/* Social Login Options */}
          <AutoLayout
            direction="vertical"
            spacing={12}
            width="fill-parent"
          >
            <SocialButton
              label="Continue with Google"
              icon={socialIcons.google}
              onClick={() => figma.notify("Google login initiated")}
            />
            <SocialButton
              label="Continue with GitHub"
              icon={socialIcons.github}
              onClick={() => figma.notify("GitHub login initiated")}
            />
            <SocialButton
              label="Continue with Apple"
              icon={socialIcons.apple}
              onClick={() => figma.notify("Apple login initiated")}
            />
          </AutoLayout>

          {/* Footer Section */}
          <AutoLayout direction="horizontal" spacing={8} verticalAlignItems="center">
            <Text fontSize={14} fill="#666">Don't have an account?</Text>
            <Button
              label="Sign up"
              theme="neutral"
              style="ghost"
              size="small"
              onClick={() => figma.notify("Sign up clicked")}
            />
          </AutoLayout>
        </AutoLayout>
      );
      
      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };
    
    createComponent();
  });

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

widget.register(LoginScreen);