[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/Search.tsx

@@ -7,23 +7,22 @@ import style from './search.module.scss';
 interface SearchProps {
   handleInputChange: (value: string) => void;
   searchValue: string;
+  placeholder?: string;
 }
 
-const Search = ({ handleInputChange, searchValue }: SearchProps) => {
+const Search = ({ handleInputChange, searchValue, placeholder = 'Пребарувај...' }: SearchProps) => {
   const onChange = (value: string) => {
     handleInputChange(value);
   };
 
   return (
-    <div className={style.search}>
-      <Input
-        type="string"
-        placeholder="Search"
-        icon={<i className="bi bi-search" />}
-        value={searchValue}
-        onChange={onChange}
-      />
-    </div>
+    <Input
+      className={style.search}
+      type="string"
+      placeholder={placeholder}
+      value={searchValue}
+      onChange={onChange}
+    />
   );
 };
 

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

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

components/module-components/SearchAndFilter/search.module.scss

@@ -1,12 +1,3 @@
 .search {
   width: 100%;
 }
-
-.results {
-  margin-top: 20px;
-}
-
-.resultItem {
-  padding: 10px;
-  border-bottom: 1px solid #ccc;
-}

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';
@@ -34,6 +32,7 @@ interface BlogPost {
 }
 
 const BlogListView = () => {
+  const [searchTerm, setSearchTerm] = useState('');
   const { editorStateChange } = useEditor();
   const [data, setData] = useState<BlogPost[]>([]);
   const url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/blog-posts`;
@@ -62,11 +61,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 +94,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={searchTerm}
+          setSearchTerm={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,65 @@
+import React from 'react';
+import Button from '../../reusable-components/button/Button';
+import styles from './BlogManagementControls.module.scss';
+import ReusableDropdown from '../../reusable-components/reusable-dropdown/ReusableDropdown';
+import Search from '../SearchAndFilter/Search';
+
+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 BlogManagementControls: React.FC<TagManagementControlsProps> = ({
+  onAddClick,
+  searchTerm,
+  setSearchTerm,
+}) => {
+  return (
+    <div className={styles.controls}>
+      <div className={styles.searchInputWrapper}>
+        <Search
+          placeholder="Пребарај статии..."
+          handleInputChange={setSearchTerm}
+          searchValue={searchTerm}
+        />
+        <ReusableDropdown
+          placeholder="Филтрирај"
+          icon={<i className="bi bi-caret-down-fill" />}
+          items={filterBy}
+        />
+      </div>
+      <Button
+        onClick={onAddClick}
+        type="button"
+        buttonText="Нова Статија"
+        buttonClass={['addButton']}
+      />
+    </div>
+  );
+};
+
+export default BlogManagementControls;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '../../reusable-components/button/Button';
-import Input from '../../reusable-components/input/Input';
 import styles from './tagManagementControls.module.scss';
+import Search from '../SearchAndFilter/Search';
 
 interface TagManagementControlsProps {
   onAddClick: () => void;
@@ -17,14 +17,18 @@ const TagManagementControls: React.FC<TagManagementControlsProps> = ({
   return (
     <div className={styles.controls}>
       <div className={styles.searchInputWrapper}>
-        <Input
-          type="text"
-          placeholder="Search tags..."
-          value={searchTerm}
-          onChange={setSearchTerm}
+        <Search
+          placeholder="Пребарај тагови..."
+          handleInputChange={setSearchTerm}
+          searchValue={searchTerm}
         />
       </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;
+}