cleanup content menu bar, added free and paid categories as well

src/components/content/carousels/templates/CourseTemplate.js

@@ -82,8 +82,8 @@ export function CourseTemplate({ course }) {
           </div>
         </CardHeader>
       </div>
-      <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
+      <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
-        <div className="flex flex-wrap gap-2 max-w-[70%]">
+        <div className="flex flex-wrap gap-2 max-w-[65%]">
           {course && course.topics && course.topics.map((topic, index) => (
             <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
               {topic}

src/components/content/carousels/templates/DocumentTemplate.js

@@ -71,8 +71,8 @@ export function DocumentTemplate({ document, isLesson }) {
                     </div>
                 </CardHeader>
             </div>
-            <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
+            <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
-                <div className="flex flex-wrap gap-2 max-w-[70%]">
+                <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {isLesson && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                     {document?.topics?.map((topic, index) => (
                         <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">

src/components/content/carousels/templates/VideoTemplate.js

@@ -72,8 +72,8 @@ export function VideoTemplate({ video, isLesson }) {
                     </div>
                 </CardHeader>
             </div>
-            <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
+            <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
-                <div className="flex flex-wrap gap-2 max-w-[70%]">
+                <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {isLesson && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                     {video?.topics?.map((topic, index) => (
                         <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">

src/pages/content/index.js

@@ -12,8 +12,10 @@ import { useRouter } from 'next/router';
 
 const MenuTab = ({ items, selectedTopic, onTabChange }) => {
     const router = useRouter();
-    // spread the items except for 'document' 'video' and 'course'
+    // Reorder items to put 'Free' and 'Paid' after 'Courses', 'Videos', and 'Documents'
-    const allItems = ['All', ...items.filter(item => item !== 'document' && item !== 'video' && item !== 'course')];
+    const priorityItems = ['All', 'Courses', 'Videos', 'Documents', 'Free', 'Paid'];
+    const otherItems = items.filter(item => !priorityItems.includes(item) && item !== 'document' && item !== 'video' && item !== 'course');
+    const allItems = [...priorityItems, ...otherItems];
 
     const menuItems = allItems.map((item, index) => {
         let icon = 'pi pi-tag';
@@ -21,6 +23,8 @@ const MenuTab = ({ items, selectedTopic, onTabChange }) => {
         else if (item === 'Documents') icon = 'pi pi-file';
         else if (item === 'Videos') icon = 'pi pi-video';
         else if (item === 'Courses') icon = 'pi pi-desktop';
+        else if (item === 'Free') icon = 'pi pi-lock-open';
+        else if (item === 'Paid') icon = 'pi pi-lock';
 
         const queryParam = item === 'all' ? '' : `?tag=${item.toLowerCase()}`;
         const isActive = router.asPath === `/content${queryParam}`;
@@ -118,7 +122,7 @@ const ContentPage = () => {
         setAllContent(allContent);
 
         const uniqueTopics = new Set(allContent.map(item => item.topics).flat());
-        const priorityItems = ['All', 'Courses', 'Videos', 'Documents'];
+        const priorityItems = ['All', 'Courses', 'Videos', 'Documents', 'Free', 'Paid'];
         const otherTopics = Array.from(uniqueTopics).filter(topic => !priorityItems.includes(topic));
         const combinedTopics = [...priorityItems.slice(1), ...otherTopics];
         setAllTopics(combinedTopics);
@@ -130,10 +134,16 @@ const ContentPage = () => {
 
     const filterContent = (topic, content) => {
         let filtered = content;
+        console.log('topic', topic);
+        console.log('content', content);
         if (topic !== 'All') {
             const topicLower = topic.toLowerCase();
             if (['courses', 'videos', 'documents'].includes(topicLower)) {
                 filtered = content.filter(item => item.type === topicLower.slice(0, -1));
+            } else if (topicLower === 'free') {
+                filtered = content.filter(item => !item.price || Number(item.price) === 0);
+            } else if (topicLower === 'paid') {
+                filtered = content.filter(item => item.price && Number(item.price) > 0);
             } else {
                 filtered = content.filter(item => item.topics && item.topics.includes(topic.toLowerCase()));
             }
@@ -167,7 +177,7 @@ const ContentPage = () => {
                 <h1 className="text-3xl font-bold mb-4 ml-1">All Content</h1>
             </div>
             <MenuTab
-                items={['Courses', 'Videos', 'Documents', ...allTopics.filter(topic => !['Courses', 'Videos', 'Documents'].includes(topic))]}
+                items={allTopics}
                 selectedTopic={selectedTopic}
                 onTabChange={handleTopicChange}
                 className="max-w-[90%] mx-auto"