From 574b8452d254ff40f681002dd05c503affa288a0 Mon Sep 17 00:00:00 2001
From: Irham Rahmat Saleh <138499395+Irhamrahmatsaleh@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:30:53 +0700
Subject: [PATCH] Update TagCard.tsx

---
 components/cards/TagCard.tsx | 82 +++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 38 deletions(-)

diff --git a/components/cards/TagCard.tsx b/components/cards/TagCard.tsx
index ea345e5..6e84555 100644
--- a/components/cards/TagCard.tsx
+++ b/components/cards/TagCard.tsx
@@ -18,59 +18,65 @@ interface Props {
   handleRemove?: () => void;
 }
 
-const TagCard = ({
+const TagCard: React.FC<Props> = ({
   _id,
   name,
   questions,
-  showCount,
-  compact,
-  remove,
-  isButton,
+  showCount = false,
+  compact = false,
+  remove = false,
+  isButton = false,
   handleRemove,
-}: Props) => {
+}) => {
   const iconClass = getDeviconClassName(name);
 
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-  };
+  const handlePreventDefault = (e: React.MouseEvent) => e.preventDefault();
 
-  const Content = (
-    <>
-      <Badge className="subtle-medium background-light800_dark300 text-light400_light500 flex flex-row gap-2 rounded-md border-none px-4 py-2 uppercase">
-        <div className="flex-center space-x-2">
-          <i className={`${iconClass} text-sm`}></i>
-          <span>{name}</span>
-        </div>
+  const RenderBadge = () => (
+    <Badge className="subtle-medium background-light800_dark300 text-light400_light500 flex flex-row gap-2 rounded-md border-none px-4 py-2 uppercase">
+      <div className="flex-center space-x-2">
+        <i className={`${iconClass} text-sm`}></i>
+        <span>{name}</span>
+      </div>
+      {remove && handleRemove && (
+        <Image
+          src="/icons/close.svg"
+          width={12}
+          height={12}
+          alt="close icon"
+          className="cursor-pointer object-contain invert-0 dark:invert"
+          onClick={handleRemove}
+        />
+      )}
+    </Badge>
+  );
 
-        {remove && (
-          <Image
-            src="/icons/close.svg"
-            width={12}
-            height={12}
-            alt="close icon"
-            className="cursor-pointer object-contain invert-0 dark:invert"
-            onClick={handleRemove}
-          />
-        )}
-      </Badge>
+  const RenderQuestionsCount = () =>
+    showCount && (
+      <p className="small-medium text-dark500_light700">{questions}</p>
+    );
 
-      {showCount && (
-        <p className="small-medium text-dark500_light700">{questions}</p>
-      )}
+  const RenderContent = () => (
+    <>
+      <RenderBadge />
+      {RenderQuestionsCount()}
     </>
   );
 
   if (compact) {
-    return isButton ? (
-      <button onClick={handleClick} className="flex justify-between gap-2">
-        {Content}
-      </button>
-    ) : (
-      <Link href={ROUTES.TAGS(_id)} className="flex justify-between gap-2">
-        {Content}
-      </Link>
+    const Container = isButton ? "button" : Link;
+    const containerProps = isButton
+      ? { onClick: handlePreventDefault }
+      : { href: ROUTES.TAGS(_id) };
+
+    return (
+      <Container {...containerProps} className="flex justify-between gap-2">
+        <RenderContent />
+      </Container>
     );
   }
+
+  return null; // Return a default value if `compact` is false and no additional cases are provided.
 };
 
 export default TagCard;