update src/components/Blogss/design1/index.js

src/components/Blogss/design1/index.js

@@ -1,3 +1,5 @@
+import RelativeCircle from "../../RelativeCircle";
+
 const BlogDesign1 = ({
   blogTitle,
   blogExcerpt,
@@ -39,9 +41,11 @@ const BlogDesign1 = ({
               </p>
               <div class="relative">
                 <img class="w-7 rounded-full" src={commentIcon} alt="" />
-                <span class="w-6 h-6 text-center flex flex-col items-center justify-center font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white border-2 border-white dark:border-gray-800 rounded-full">
-                  {commentNum}
-                </span>
+                <RelativeCircle
+                  className={
+                    "font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white "
+                  }
+                />
               </div>
             </div>
           )}

src/components/RelativeCircle/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const RelativeCircle = ({ commentNum, className }) => {
+  return (
+    <span
+      class={`w-6 h-6 flex flex-col items-center justify-center text-center rounded-full border-2 ${className}`}
+    >
+      {commentNum}
+    </span>
+  );
+};
+
+export default RelativeCircle;
+
+RelativeCircle.defaultProps = {
+  commentNum: "26",
+  className: "",
+};