Fix(Button): Add Button Styles

components/Button.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import Link from 'next/link';
 
+enum ButtonType {
+  NAVBAR = '',
+  LIGHT = 'light-btn',
+  SOCIAL = 'social-btn',
+}
+
 interface Props {
   onClick?: () => void;
   href?: string;
   className?: string;
+  type: ButtonType;
 }
 
 interface LabelProps extends Props {
@@ -21,13 +28,14 @@ const Button: React.FC<LabelProps | ChildrenProps> = ({
   onClick,
   href,
   className,
+  type,
 }) => {
   return href ? (
     <Link href={href}>
-      <span className={`${className}`}>{label || children}</span>
+      <span className={`${className} ${type}`}>{label || children}</span>
     </Link>
   ) : (
-    <button onClick={onClick} className={`${className}`}>
+    <button onClick={onClick} className={`${className} ${type}`}>
       {label || children}
     </button>
   );

styles/Button.module.scss

@@ -0,0 +1,19 @@
+.socialMedia {
+  @apply flex gap-4;
+  @apply justify-center;
+  > img {
+    @apply bg-socials;
+    @apply rounded-lg;
+    @apply w-10 h-10;
+    @apply p-2;
+    @apply shadow-md;
+    @apply hover:shadow-lg;
+  }
+}
+
+.lightBtn {
+  @apply bg-color-2;
+  @apply rounded-lg border-2 border-black;
+  @apply p-2;
+  @apply font-bold;
+}