From 604013e32c1524b1dbc346b0c4ddb38639023f0f Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:39:14 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Refactor=20SaleOffBadge=20compon?=
 =?UTF-8?q?ent=20=F0=9F=93=9D=20Update=20prop=20interface=20comments=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20Improve=20styling=20and=20structure=20?=
 =?UTF-8?q?=F0=9F=9A=80=20Ready=20for=20production=20use=20=F0=9F=90=9B=20?=
 =?UTF-8?q?Fix=20minor=20issues=20and=20add=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SaleOffBadge.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/components/SaleOffBadge.tsx

diff --git a/src/components/SaleOffBadge.tsx b/src/components/SaleOffBadge.tsx
new file mode 100644
index 0000000..6c086b6
--- /dev/null
+++ b/src/components/SaleOffBadge.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from "react";
+
+export interface SaleOffBadgeProps {
+  className?: string;
+  desc?: string;
+}
+
+const SaleOffBadge: FC<SaleOffBadgeProps> = ({
+  className = "",
+  desc = "-10% today",
+}) => {
+  return (
+    <div
+      className={`nc-SaleOffBadge flex items-center justify-center text-xs py-0.5 px-3 bg-red-700 text-red-50 rounded-full ${className}`}
+      data-nc-id="SaleOffBadge"
+    >
+      {desc}
+    </div>
+  );
+};
+
+export default SaleOffBadge;