feat: initial social login buttons implementation

src/components/SocialButton/SocialButton.module.scss

@@ -0,0 +1,16 @@
+.socialButtonContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+}
+
+.socialButtonContainer:hover {
+  transform: scale(1.05);
+  cursor: pointer;
+}
+
+.socialButtonContainer:active {
+  transform: scale(0.95);
+}

src/components/SocialButton/SocialButton.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+import styles from './SocialButton.module.scss';
+
+export type SocialButtonVariant = 'facebook' | 'google' | 'twitter';
+
+interface SocialButtonProps {
+  variant: SocialButtonVariant;
+  onClick: () => void;
+}
+
+const SocialButton = ({ variant, onClick }: SocialButtonProps) => {
+  const [icon, setIcon] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getIcon = async () => {
+      const iconSvg = await (import(`../../assets/icons/${variant}.svg`) as Promise<{ default: string }>);
+      setIcon(iconSvg.default);
+    };
+    getIcon();
+  }, [variant]);
+
+  return (
+    <div onClick={onClick} className={styles.socialButtonContainer}>
+      <img src={icon ?? ''} alt={`${variant} icon`} />
+    </div>
+  );
+};
+
+export default SocialButton;

src/components/SocialButtonsList/SocialButtonsList.module.scss

@@ -0,0 +1,9 @@
+.socialButtonsListContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  gap: 1rem;
+}

src/components/SocialButtonsList/SocialButtonsList.tsx

@@ -0,0 +1,24 @@
+import SocialButton, { SocialButtonVariant } from '../SocialButton/SocialButton';
+
+import styles from './SocialButtonsList.module.scss';
+
+type SocialButtonsListProps = {
+  buttonProps: {
+    [key in SocialButtonVariant]: {
+      onClick: () => void;
+    };
+  };
+};
+
+const SocialButtonsList = ({ buttonProps }: SocialButtonsListProps) => {
+  const variants: SocialButtonVariant[] = ['facebook', 'google', 'twitter'];
+  return (
+    <div className={styles.socialButtonsListContainer}>
+      {variants.map((variant) => (
+        <SocialButton key={variant} variant={variant} onClick={buttonProps[variant].onClick} />
+      ))}
+    </div>
+  );
+};
+
+export default SocialButtonsList;