FIX #66 : select upto only 3 categories

frontend/src/components/category-pill.tsx

@@ -4,16 +4,24 @@ import { twMerge } from 'tailwind-merge';
 interface CategoryPillProps extends React.HTMLAttributes<HTMLSpanElement> {
   category: string;
   selected?: boolean;
+  disabled?: boolean;
 }
 
-export default function CategoryPill({ category, selected = false }: CategoryPillProps) {
+export default function CategoryPill({ category, disabled, selected = false }: CategoryPillProps) {
+  const disabledColor: string =
+    'opacity-50 bg-light-primary/10 dark:bg-dark-primary/10 dark:text-dark-primary/50 cursor-not-allowed';
+
   const [defaultColor, selectedColor]: [string, string] = getCategoryColors(category);
 
+  const getSelectedColor = (selected: boolean): string => {
+    return selected ? selectedColor : defaultColor;
+  };
+
   return (
     <span
       className={twMerge(
-        'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80',
-        selected ? selectedColor : defaultColor
+        'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80 ',
+        disabled ? disabledColor : getSelectedColor(selected)
       )}
     >
       {category}

frontend/src/pages/add-blog.tsx

@@ -34,12 +34,19 @@ function AddBlog() {
     isFeaturedPost: false,
   });
 
+  //checks the length of the categories array and if the category is already selected
+  const isValidCategory = (category: string): boolean => {
+    return formData.categories.length >= 3 && !formData.categories.includes(category);
+  };
+
   const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
 
   const handleCategoryClick = (category: string) => {
+    if (isValidCategory(category)) return;
+
     if (formData.categories.includes(category)) {
       setFormData({
         ...formData,
@@ -52,6 +59,7 @@ function AddBlog() {
       });
     }
   };
+
   const handleselector = () => {
     setFormData({
       ...formData,
@@ -232,14 +240,19 @@ function AddBlog() {
           </div>
           <div className="mb-4 flex flex-col">
             <label className="px-2 pb-1 font-medium text-light-secondary dark:text-dark-secondary md:mr-4 md:w-fit">
-              Categories <Asterisk />
+              Categories
+              <span className="text-xs tracking-wide text-dark-tertiary">
+                &nbsp;(max 3 categories)&nbsp;
+              </span>
+              <Asterisk />
             </label>
             <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
               {categories.map((category, index) => (
                 <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
                   <CategoryPill
                     category={category}
                     selected={formData.categories.includes(category)}
+                    disabled={isValidCategory(category)}
                   />
                 </span>
               ))}