From 84db77fdd38479a2762d38d9f7e7481807ce7028 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:33:11 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20Badge=20component?=
 =?UTF-8?q?=20=F0=9F=8E=A8=20Added=20color=20variations=20=F0=9F=94=97=20I?=
 =?UTF-8?q?ntegrated=20with=20Next.js=20Link=20=F0=9F=91=8D=20Ready=20for?=
 =?UTF-8?q?=20testing=20=F0=9F=93=9A=20Updated=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Badge.tsx | 75 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/shared/Badge.tsx

diff --git a/src/shared/Badge.tsx b/src/shared/Badge.tsx
new file mode 100644
index 0000000..6c65a81
--- /dev/null
+++ b/src/shared/Badge.tsx
@@ -0,0 +1,75 @@
+import { TwMainColor } from "@/data/types";
+import { Route } from "@/routers/types";
+import Link from "next/link";
+import React, { FC, ReactNode } from "react";
+
+export interface BadgeProps {
+  className?: string;
+  name: ReactNode;
+  color?: TwMainColor;
+  href?: Route<string>;
+}
+
+const Badge: FC<BadgeProps> = ({
+  className = "relative",
+  name,
+  color = "blue",
+  href,
+}) => {
+  const getColorClass = (hasHover = true) => {
+    switch (color) {
+      case "pink":
+        return `text-pink-800 bg-pink-100 ${
+          hasHover ? "hover:bg-pink-800" : ""
+        }`;
+      case "red":
+        return `text-red-800 bg-red-100 ${hasHover ? "hover:bg-red-800" : ""}`;
+      case "gray":
+        return `text-gray-800 bg-gray-100 ${
+          hasHover ? "hover:bg-gray-800" : ""
+        }`;
+      case "green":
+        return `text-green-800 bg-green-100 ${
+          hasHover ? "hover:bg-green-800" : ""
+        }`;
+      case "purple":
+        return `text-purple-800 bg-purple-100 ${
+          hasHover ? "hover:bg-purple-800" : ""
+        }`;
+      case "indigo":
+        return `text-indigo-800 bg-indigo-100 ${
+          hasHover ? "hover:bg-indigo-800" : ""
+        }`;
+      case "yellow":
+        return `text-yellow-800 bg-yellow-100 ${
+          hasHover ? "hover:bg-yellow-800" : ""
+        }`;
+      case "blue":
+        return `text-blue-800 bg-blue-100 ${
+          hasHover ? "hover:bg-blue-800" : ""
+        }`;
+      default:
+        return `text-pink-800 bg-pink-100 ${
+          hasHover ? "hover:bg-pink-800" : ""
+        }`;
+    }
+  };
+
+  const CLASSES =
+    "nc-Badge inline-flex px-2.5 py-1 rounded-full font-medium text-xs " +
+    className;
+  return !!href ? (
+    <Link
+      href={href || ""}
+      className={`transition-colors hover:text-white duration-300 ${CLASSES} ${getColorClass()}`}
+    >
+      {name}
+    </Link>
+  ) : (
+    <span className={`${CLASSES} ${getColorClass(false)} ${className}`}>
+      {name}
+    </span>
+  );
+};
+
+export default Badge;