[FE] Content-Panel: Blogs: General Improvements

app/content-panel/tags/page.tsx

@@ -104,7 +104,7 @@ const Tags = () => {
 
       <TagTable
         isLoading={isLoading}
-        tags={tags}
+        tags={data?.data || []}
         editingTagId={editingTagId}
         onEdit={triggerEdit}
         onDelete={handleDelete}

components/module-components/SearchAndFilter/filter.module.scss

@@ -4,8 +4,7 @@
   align-items: center;
 
   .dropdown {
-    width: 100px;
-    height: 50px;
+    background-color: red;
     display: flex;
     justify-content: center;
     text-align: left;

components/module-components/create-blogs/BlogListView.tsx

@@ -2,10 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Button from '../../reusable-components/button/Button';
 import ReusableTable from '../../reusable-components/reusable-table/ReusableTable';
-import Filter from '../SearchAndFilter/Filter';
-import Search from '../SearchAndFilter/Search';
+import BlogManagementControls from './BlogManagementControls';
 import ActionDropdown from '../../reusable-components/reusable-table/ActionDropdown';
 import style from './createBlogs.module.scss';
 import { useEditor } from '../../../app/context/EditorContext';
@@ -62,11 +60,10 @@ const BlogListView = () => {
     fetchData();
   }, [url]);
 
-  const headers: (keyof BlogPost)[] = ['title', 'author', 'tags'];
+  const headers: (keyof BlogPost)[] = ['title', 'author'];
   const displayNames = {
     title: 'Title',
     author: 'Author',
-    tags: 'Tags',
   };
 
   const handleView = (id: string) => {
@@ -96,20 +93,13 @@ const BlogListView = () => {
   return (
     <div className={style.mainContainer}>
       <div className={style.inputWrapper}>
-        <Search handleInputChange={() => {}} searchValue="Search" />
-        <div className={style.rightContainer}>
-          <Filter handleRoleChange={() => {}} />
-          <Button
-            onClick={() => {
-              router.push(`/content-panel/blogs/create`);
-            }}
-            href=""
-            type="button"
-            buttonText="Add Blog"
-            buttonClass={['primaryButton']}
-            moveIcon
-          />
-        </div>
+        <BlogManagementControls
+          onAddClick={() => {
+            router.push('/content-panel/blogs/new');
+          }}
+          searchTerm=""
+          setSearchTerm={() => {}}
+        />
       </div>
       <ReusableTable
         headers={headers}

components/module-components/create-blogs/BlogManagementControls.module.scss

@@ -0,0 +1,26 @@
+@import '../../../app/styles/utils/breakpoints.scss';
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+
+  @include breakpoint(small) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.searchInputWrapper {
+  text-wrap: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  @include breakpoint(small) {
+    width: 600px;
+    height: 100%;
+  }
+}

components/module-components/create-blogs/BlogManagementControls.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Button from '../../reusable-components/button/Button';
+import Input from '../../reusable-components/input/Input';
+import styles from './BlogManagementControls.module.scss';
+import ReusableDropdown from '../../reusable-components/reusable-dropdown/ReusableDropdown';
+
+interface TagManagementControlsProps {
+  onAddClick: () => void;
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+}
+
+const filterBy = [
+  {
+    id: 1,
+    label: 'Прикажи ги сите',
+    onClick: () => {},
+  },
+  {
+    id: 2,
+    label: 'Admin',
+    onClick: () => {},
+  },
+  {
+    id: 3,
+    label: 'Content Manager',
+    onClick: () => {},
+  },
+  {
+    id: 4,
+    label: 'Member',
+    onClick: () => {},
+  },
+];
+
+const TagManagementControls: React.FC<TagManagementControlsProps> = ({
+  onAddClick,
+  searchTerm,
+  setSearchTerm,
+}) => {
+  return (
+    <div className={styles.controls}>
+      <div className={styles.searchInputWrapper}>
+        <Input
+          type="text"
+          placeholder="Пребарувај статии..."
+          value={searchTerm}
+          onChange={setSearchTerm}
+        />
+        <ReusableDropdown
+          placeholder="Филтрирај"
+          icon={<i className="bi bi-caret-down-fill" />}
+          items={filterBy}
+        />
+      </div>
+      <Button
+        onClick={onAddClick}
+        type="button"
+        buttonText="Нова Статија"
+        buttonClass={['addButton']}
+      />
+    </div>
+  );
+};
+
+export default TagManagementControls;

components/module-components/create-blogs/createBlogs.module.scss

@@ -1,14 +1,23 @@
+@import '../../../app/styles/utils/breakpoints.scss';
+
 .mainContainer {
-  margin: 50px 0;
+  width: 100%;
+  max-width: 1200px;
+  padding: 20px;
+  margin: 0 auto;
+
+  @include breakpoint-down(small) {
+    padding: 10px;
+  }
 
   .inputWrapper {
-    margin: 50px 0;
-    display: flex;
     width: 100%;
+  }
+}
 
-    .rightContainer {
-      display: flex;
-      gap: 20px;
-    }
+.searchInputWrapper {
+  width: 100%;
+  @include breakpoint(small) {
+    width: 300px;
   }
 }

components/module-components/tags/TagManagementControls.tsx

@@ -19,12 +19,17 @@ const TagManagementControls: React.FC<TagManagementControlsProps> = ({
       <div className={styles.searchInputWrapper}>
         <Input
           type="text"
-          placeholder="Search tags..."
+          placeholder="Пребарувај тагови..."
           value={searchTerm}
           onChange={setSearchTerm}
         />
       </div>
-      <Button onClick={onAddClick} type="button" buttonText="Add Tag" buttonClass={['addButton']} />
+      <Button
+        onClick={onAddClick}
+        type="button"
+        buttonText="Додади таг"
+        buttonClass={['addButton']}
+      />
     </div>
   );
 };

components/reusable-components/reusable-dropdown/ReusableDropdown.module.scss

@@ -0,0 +1,65 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownButton {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+  font-size: var(--fs-button);
+  font-weight: 400;
+  background-color: #ffffff;
+  color: #333;
+  padding: 8px 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.dropdownButton:hover {
+  background-color: #f7f7f7;
+}
+
+.dropdownList {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  list-style: none;
+  margin: 5px 0 0;
+  padding: 5px 0;
+  width: 200px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+
+  @media screen and (max-width: 768px) {
+    left: -20px;
+  }
+}
+
+.dropdownItem {
+  padding: 0;
+}
+
+.dropdownItem:hover {
+  background-color: #f0f0f0;
+}
+
+.dropdownItemButton {
+  background: none;
+  border: none;
+  padding: 10px 15px;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.dropdownItemButton:hover {
+  background-color: #f0f0f0;
+}

components/reusable-components/reusable-dropdown/ReusableDropdown.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './ReusableDropdown.module.scss';
+
+type DropdownItem = {
+  id: number;
+  label: string;
+  onClick: () => void;
+};
+
+type DropdownProps = {
+  items: DropdownItem[];
+  placeholder?: string;
+  icon?: React.ReactNode;
+};
+
+const Dropdown: React.FC<DropdownProps> = ({ items, placeholder = 'Select an option', icon }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<DropdownItem | null>(null);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleItemClick = (item: DropdownItem) => {
+    setSelectedItem(item);
+    item.onClick();
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={styles.dropdown} ref={dropdownRef}>
+      <button type="button" onClick={toggleDropdown} className={styles.dropdownButton}>
+        {selectedItem ? selectedItem.label : placeholder}
+        {icon && <span className={styles.icon}>{icon}</span>}
+      </button>
+      {isOpen && (
+        <ul className={styles.dropdownList}>
+          {items.map((item) => (
+            <li key={item.id} className={styles.dropdownItem}>
+              <button
+                type="button"
+                className={styles.dropdownItemButton}
+                onClick={() => handleItemClick(item)}
+              >
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;