Cleanup

packages/features/auth/src/components/oauth-provider-logo-image.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+
+import { AtSignIcon, PhoneIcon } from 'lucide-react';
+
+const DEFAULT_IMAGE_SIZE = 18;
+
+export const OauthProviderLogoImage: React.FC<{
+  providerId: string;
+  width?: number;
+  height?: number;
+}> = ({ providerId, width, height }) => {
+  const image = getOAuthProviderLogos()[providerId];
+
+  if (typeof image === `string`) {
+    return (
+      <Image
+        decoding={'async'}
+        loading={'lazy'}
+        src={image}
+        alt={`${providerId} logo`}
+        width={width ?? DEFAULT_IMAGE_SIZE}
+        height={height ?? DEFAULT_IMAGE_SIZE}
+      />
+    );
+  }
+
+  return <>{image}</>;
+};
+
+function getOAuthProviderLogos(): Record<string, string | React.ReactNode> {
+  return {
+    password: <AtSignIcon className={'s-[18px]'} />,
+    phone: <PhoneIcon className={'s-[18px]'} />,
+    google: '/assets/images/google.webp',
+    facebook: '/assets/images/facebook.webp',
+    twitter: '/assets/images/twitter.webp',
+    github: '/assets/images/github.webp',
+    microsoft: '/assets/images/microsoft.webp',
+    apple: '/assets/images/apple.webp',
+  };
+}