Fix social links icons

Author: neuodev

components/SocialLinks.tsx

@@ -18,12 +18,15 @@ const SocialLinks: React.FC<{}> = () => {
         >
           <Button
             onClick={() => window.open(s.value)}
-            className="group border-transparent group-hover:border-indigo-500 h-16 w-16 transition-colors duration-200 relative overflow-hidden bg-slide mr-2"
+            className="group border-transparent group-hover:border-indigo-500 transition-colors duration-200 relative overflow-hidden bg-slide"
             sx={{
-              borderRadius: "999px",
+              width: "4rem",
+              height: "4rem",
+              borderRadius: "50%",
+              mr: "8px",
             }}
           >
-            <SocialIcon id={s.id} className="fill-indigo-500 w-10 h-10" />
+            <SocialIcon id={s.id} size="large" className="fill-indigo-500" />
           </Button>
         </Tooltip>
       ))}

components/icons/index.tsx

@@ -55,14 +55,15 @@ export const SOCIAL_ICONS = {
 
 export type SocialIconId = keyof typeof SOCIAL_ICONS;
 
-export const SocialIcon: React.FC<{ id: string; className?: string }> = ({
-  id,
-  className,
-}) => {
+export const SocialIcon: React.FC<{
+  id: string;
+  className?: string;
+  size?: "small" | "medium" | "large";
+}> = ({ id, className, size }) => {
   if (!id) throw new Error("ContactId is required");
   let Icon = SOCIAL_ICONS[id as SocialIconId];
   if (!Icon) throw new Error(`'${id}' doesn't have any icon`);
-  return <Icon className={className} color="primary" />;
+  return <Icon className={className} fontSize={size} color="primary" />;
 };
 export const DEV_TOOLS: {
   [key: string]: (props: SVGProps<SVGSVGElement>) => JSX.Element;