bolgs bug fixed

src/app/blog/Card13.tsx

@@ -14,7 +14,7 @@ const Card13: FC<Card13Props> = ({ className = "", post }) => {
 
 
   return (
-    <div className={`nc-Card13 relative flex ${className}`} data-nc-id="Card13">
+    <div className={`nc-Card13 relative flex justify-between ${className}`} data-nc-id="Card13">
       <div className="flex flex-col h-full py-2">
         <h2 className={`nc-card-title block font-semibold text-base`}>
           <Link href={`blog/${post?.slug}`} className="line-clamp-2" title={post?.title}>

src/app/blog/[...slug]/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import React, { useEffect, useState } from "react";
 import { DEMO_POSTS } from "@/data/posts";
@@ -14,7 +14,7 @@ import Image from "next/image";
 import travelhero2Image from "@/images/travelhero2.png";
 import Link from "next/link";
 import { Route } from "@/routers/types";
-import { BiLike , BiDislike } from "react-icons/bi";
+import { BiLike, BiDislike } from "react-icons/bi";
 import Survey from "./Survey";
 import axiosInstance from "@/components/api/axios";
 
@@ -25,21 +25,14 @@ const Page = ({
   params: { stepIndex: string };
   searchParams?: { [key: string]: string | string[] | undefined };
 }) => {
+  const [blog, setBlog] = useState();
 
-  const [ blog , setBlog] = useState()
-
-  useEffect(()=>{
-
-    axiosInstance.get(`/api/blogs/${params.slug[0]}/`)
-    .then((response)=>{
+  useEffect(() => {
+    axiosInstance.get(`/api/blogs/${params.slug[0]}/`).then((response) => {
       setBlog(response.data);
-      
-    })
-    
-  })
+    });
+  });
   const renderHeader = () => {
-
-
     return (
       <header className="container rounded-xl">
         <div className="max-w-screen-md mx-auto space-y-5">
@@ -94,36 +87,32 @@ const Page = ({
       <div
         id="single-entry-content"
         className="prose dark:prose-invert prose-sm !max-w-screen-md sm:prose lg:prose-lg mx-auto dark:prose-dark"
-      ><div dangerouslySetInnerHTML={{ __html: blog?.content }} />
+      >
+        <div dangerouslySetInnerHTML={{ __html: blog?.content }} />
       </div>
     );
   };
 
   const renderTags = () => {
-    return (
-      <div className="max-w-screen-md mx-auto flex flex-wrap">
-        <a
-          className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100  md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
-          href="##"
-        >
-          Garden
-        </a>
-        <a
-          className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100  md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
-          href="##"
-        >
-          Jewelry
-        </a>
-        <a
-          className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100  md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
-          href="##"
-        >
-          Tools
-        </a>
-      </div>
-    );
-  };
+    console.log(blog?.tags[0].name);
 
+    return(
+      
+      (<div className="max-w-screen-md mx-auto flex flex-wrap">
+      {blog?.tags.map((item) => (
+      
+      
+          <a
+            className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100  md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
+            href={item.slug}
+          >
+            {item.name}
+          </a>
+      
+    ))}
+        </div>)
+)
+  };
 
   const renderCommentForm = () => {
     return (
@@ -214,7 +203,7 @@ const Page = ({
         {renderContent()}
         {renderTags()}
         <div className="max-w-screen-md mx-auto border-b border-t border-neutral-100 dark:border-neutral-700"></div>
-        <Survey/>
+        <Survey />
         {/* {renderCommentForm()} */}
         {/* {renderCommentLists()} */}
       </div>

src/app/forgot-password/page.tsx

@@ -10,6 +10,7 @@ import { useUserContext } from "@/components/contexts/userContext";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { PhoneNumberUtil, PhoneNumberFormat } from "google-libphonenumber"; // Import libphonenumber
+import { BiShow, BiHide } from "react-icons/bi";
 
 export interface PageSignUpProps {}
 
@@ -18,14 +19,20 @@ const PageSignUp: FC<PageSignUpProps> = () => {
   const { setForm, setMethod } = useUserContext();
   const phoneUtil = PhoneNumberUtil.getInstance();
 
-  const [name, setName] = useState('');
-  const [countryCode, setCountryCode] = useState('968');
-  const [phoneNumber, setPhoneNumber] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [loading , setLoading] = useState(false)
-
-  const [errors, setErrors] = useState<{ phoneNumber?: string; password?: string; confirmPassword?: string; countryCode? : string }>({});
+  const [name, setName] = useState("");
+  const [countryCode, setCountryCode] = useState("968");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [errors, setErrors] = useState<{
+    phoneNumber?: string;
+    password?: string;
+    confirmPassword?: string;
+    countryCode?: string;
+  }>({});
 
   const countryCodeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length <= 3) {
@@ -35,7 +42,10 @@ const PageSignUp: FC<PageSignUpProps> = () => {
 
   const validatePhoneNumber = () => {
     try {
-      const number = phoneUtil.parseAndKeepRawInput("+" + countryCode + phoneNumber, countryCode);
+      const number = phoneUtil.parseAndKeepRawInput(
+        "+" + countryCode + phoneNumber,
+        countryCode
+      );
       if (!phoneUtil.isValidNumber(number)) {
         return "Invalid phone number.";
       }
@@ -46,12 +56,17 @@ const PageSignUp: FC<PageSignUpProps> = () => {
   };
 
   const validateForm = () => {
-    const newErrors: { phoneNumber?: string; password?: string; confirmPassword?: string } = {};
+    const newErrors: {
+      phoneNumber?: string;
+      password?: string;
+      confirmPassword?: string;
+    } = {};
 
     const phoneError = validatePhoneNumber();
     if (phoneError) newErrors.phoneNumber = phoneError;
     if (!password) newErrors.password = "Password is required.";
-    if (password !== confirmPassword) newErrors.confirmPassword = "Passwords do not match.";
+    if (password !== confirmPassword)
+      newErrors.confirmPassword = "Passwords do not match.";
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0; // Return true if no errors
@@ -73,7 +88,7 @@ const PageSignUp: FC<PageSignUpProps> = () => {
   }, [errors]);
 
   const submitHandler = async () => {
-    setLoading(true)
+    setLoading(true);
     setErrors({}); // Clear previous errors
 
     if (!validateForm()) {
@@ -108,10 +123,9 @@ const PageSignUp: FC<PageSignUpProps> = () => {
         progress: undefined,
         theme: "light",
       });
-    }finally{
-      setLoading(false)
+    } finally {
+      setLoading(false);
     }
-
   };
 
   return (
@@ -121,13 +135,24 @@ const PageSignUp: FC<PageSignUpProps> = () => {
           Change Password
         </h2>
         <div className="max-w-md mx-auto space-y-6">
-          <form className="grid grid-cols-1 gap-6" onSubmit={(e) => e.preventDefault()}>
+          <form
+            className="grid grid-cols-1 gap-6"
+            onSubmit={(e) => e.preventDefault()}
+          >
             <label className="block">
               <span className="text-neutral-800 dark:text-neutral-200">
                 Phone Number
               </span>
-              <div className={`flex items-center mt-1 rounded-2xl ${errors.countryCode || errors.phoneNumber ? "border border-red-600" : "border border-neutral-200"} bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50`}>
-                <span className="px-2 mr-[-15px] text-neutral-800 dark:text-neutral-200">+</span>
+              <div
+                className={`flex items-center mt-1 rounded-2xl ${
+                  errors.countryCode || errors.phoneNumber
+                    ? "border border-red-600"
+                    : "border border-neutral-200"
+                } bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50`}
+              >
+                <span className="px-2 mr-[-15px] text-neutral-800 dark:text-neutral-200">
+                  +
+                </span>
                 <input
                   value={countryCode}
                   onChange={countryCodeHandler}
@@ -145,25 +170,59 @@ const PageSignUp: FC<PageSignUpProps> = () => {
                 />
               </div>
             </label>
-            <label className="block">
-              <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">Password</span>
+            <label className="block relative">
+              <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">
+                Password
+              </span>
               <Input
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                type="password"
+                type={`${showPassword ? "text" : "password"}`}
                 className={`mt-1 ${errors.password ? "border-red-600" : ""}`}
               />
+              {showPassword ? (
+                <BiShow
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={(e) => setShowPassword((prev) => !prev)}
+                />
+              ) : (
+                <BiHide
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={(e) => setShowPassword((prev) => !prev)}
+                />
+              )}
             </label>
-            <label className="block">
-              <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">Confirm Password</span>
+            <label className="block relative">
+              <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">
+                Confirm Password
+              </span>
               <Input
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
-                type="password"
-                className={`mt-1 ${errors.confirmPassword ? "border-red-600" : ""}`}
+                type={`${showConfirm ? "text" : "password"}`}
+                className={`mt-1 ${
+                  errors.confirmPassword ? "border-red-600" : ""
+                }`}
               />
+              {showConfirm ? (
+                <BiShow
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={(e) => setShowConfirm((prev) => !prev)}
+                />
+              ) : (
+                <BiHide
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={(e) => setShowConfirm((prev) => !prev)}
+                />
+              )}
             </label>
-            <ButtonPrimary loading={loading} onClick={submitHandler}>Continue</ButtonPrimary>
+            <ButtonPrimary loading={loading} onClick={submitHandler}>
+              Continue
+            </ButtonPrimary>
           </form>
         </div>
       </div>

src/app/login/page.tsx

@@ -9,7 +9,8 @@ import { useRouter } from "next/navigation";
 import { useUserContext } from "@/components/contexts/userContext";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import { PhoneNumberUtil } from 'google-libphonenumber';
+import { PhoneNumberUtil } from "google-libphonenumber";
+import { BiShow, BiHide } from "react-icons/bi";
 
 export interface PageLoginProps {}
 
@@ -23,6 +24,7 @@ const PageLogin: FC<PageLoginProps> = () => {
   const [countryCode, setCountryCode] = useState<string>("968");
   const [loading, setLoading] = useState<boolean>(false);
   const [errors, setErrors] = useState<{ phoneNumber?: string; password?: string }>({});
+  const [showPassword, setShowPassword] = useState(false); // New state for show/hide password
 
   // Redirect to home if the user is already logged in
   useEffect(() => {
@@ -149,12 +151,12 @@ const PageLogin: FC<PageLoginProps> = () => {
         <div className="max-w-md mx-auto space-y-6">
           <form className="grid grid-cols-1 gap-6" onSubmit={(e) => e.preventDefault()}>
             <label className="block">
-              <span className="text-neutral-800 dark:text-neutral-200">
-                Phone Number
-              </span>
-              <div className={`flex items-center mt-1 rounded-2xl ${
-                errors.phoneNumber ? "border border-red-600" : "border border-neutral-200"
-              }  bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50`}>
+              <span className="text-neutral-800 dark:text-neutral-200">Phone Number</span>
+              <div
+                className={`flex items-center mt-1 rounded-2xl ${
+                  errors.phoneNumber ? "border border-red-600" : "border border-neutral-200"
+                }  bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50`}
+              >
                 <span className="px-2 mr-[-15px] text-neutral-800 dark:text-neutral-200">+</span>
                 <input
                   value={countryCode}
@@ -174,7 +176,7 @@ const PageLogin: FC<PageLoginProps> = () => {
               </div>
             </label>
 
-            <label className="block">
+            <label className="block relative">
               <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">
                 Password
                 <Link href="/forgot-password" className="text-sm underline font-medium">
@@ -184,9 +186,22 @@ const PageLogin: FC<PageLoginProps> = () => {
               <Input
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                type="password"
-                className={`secure-input mt-1 ${errors.password ? "border-red-600" : "border-neutral-300"}`}
+                type={`${showPassword ? "text" : "password"}`}
+                className={`mt-1 ${errors.password ? "border-red-600" : "border-neutral-300"}`}
               />
+              {showPassword ? (
+                <BiShow
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                />
+              ) : (
+                <BiHide
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                />
+              )}
             </label>
 
             <ButtonPrimary onClick={submitHandler} loading={loading}>

src/app/signup/page.tsx

@@ -10,6 +10,7 @@ import useFormValidation from "@/hooks/FormValidation";
 import { useRouter } from "next/navigation";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { BiShow, BiHide } from "react-icons/bi";
 
 export interface PageSignUpProps {}
 
@@ -25,6 +26,8 @@ const PageSignUp: FC<PageSignUpProps> = () => {
   const [failed, setFailed] = useState<string>("");
 
   const { errors, validateForm } = useFormValidation();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const countryCodeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value.length <= 3) {
@@ -89,10 +92,7 @@ const PageSignUp: FC<PageSignUpProps> = () => {
           Signup
         </h2>
         <div className="max-w-md mx-auto space-y-6">
-          <form
-            className="grid grid-cols-1 gap-6"
-            onSubmit={(e) => e.preventDefault()}
-          >
+          <form className="grid grid-cols-1 gap-6" onSubmit={(e) => e.preventDefault()}>
             <label className="block">
               <span className="text-neutral-800 dark:text-neutral-200">Full Name</span>
               <Input
@@ -105,9 +105,11 @@ const PageSignUp: FC<PageSignUpProps> = () => {
             </label>
             <label className="block">
               <span className="text-neutral-800 dark:text-neutral-200">Phone Number</span>
-              <div className={`flex items-center mt-1 rounded-2xl ${
-                errors.countryCode || errors.phoneNumber ? "border border-red-600" : "border border-neutral-200"
-              } bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50`}>
+              <div
+                className={`flex items-center mt-1 rounded-2xl ${
+                  errors.countryCode || errors.phoneNumber ? "border border-red-600" : "border border-neutral-200"
+                } bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50`}
+              >
                 <span className="px-2 mr-[-15px] text-neutral-800 dark:text-neutral-200">+</span>
                 <input
                   value={countryCode}
@@ -126,30 +128,52 @@ const PageSignUp: FC<PageSignUpProps> = () => {
                 />
               </div>
             </label>
-            <label className="block">
+            <label className="block relative">
               <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">Password</span>
               <Input
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                type="password"
-                className={`secure-input mt-1 ${errors.password ? "border-red-600" : "border-neutral-300"}`}
+                type={showPassword ? "text" : "password"}
+                className={`mt-1 ${errors.password ? "border-red-600" : "border-neutral-300"}`}
               />
+              {showPassword ? (
+                <BiShow
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                />
+              ) : (
+                <BiHide
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                />
+              )}
             </label>
-            <label className="block">
+            <label className="block relative">
               <span className="flex justify-between items-center text-neutral-800 dark:text-neutral-200">Confirm Password</span>
               <Input
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
-                type="password"
-                className={`secure-input mt-1 ${errors.confirmPassword ? "border-red-600" : "border-neutral-300"}`}
+                type={showConfirmPassword ? "text" : "password"}
+                className={` mt-1 ${errors.confirmPassword ? "border-red-600" : "border-neutral-300"}`}
               />
+              {showConfirmPassword ? (
+                <BiShow
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={() => setShowConfirmPassword((prev) => !prev)}
+                />
+              ) : (
+                <BiHide
+                  size={20}
+                  className="box-content rounded-full hover:bg-slate-100 p-[5px] absolute top-9 right-4"
+                  onClick={() => setShowConfirmPassword((prev) => !prev)}
+                />
+              )}
             </label>
             {failed && <p className="text-xs text-red-600">{failed}</p>}
-            <ButtonPrimary
-              loading={loading}
-              onClick={submitHandler}
-              disabled={loading}
-            >
+            <ButtonPrimary loading={loading} onClick={submitHandler} disabled={loading}>
               Continue
             </ButtonPrimary>
           </form>