From 72bc77136c15f8e57fdfeb0ce0ae8d39fcc4dc42 Mon Sep 17 00:00:00 2001
From: Kara <kara.wilson.2005.08@gmail.com>
Date: Mon, 15 Jul 2024 20:47:21 -0400
Subject: [PATCH] Fix(Button): Add Button Styles

---
 components/Button.tsx     | 12 ++++++++++--
 styles/Button.module.scss | 19 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 styles/Button.module.scss

diff --git a/components/Button.tsx b/components/Button.tsx
index e581907..5c1202b 100644
--- a/components/Button.tsx
+++ b/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>
   );
diff --git a/styles/Button.module.scss b/styles/Button.module.scss
new file mode 100644
index 0000000..f0a5507
--- /dev/null
+++ b/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;
+}