all content page, filtering and rendering content all works, just need search now

src/components/content/carousels/GenericCarousel.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Carousel } from 'primereact/carousel';
 import ResourceTemplate from '@/components/content/carousels/templates/ResourceTemplate';
+import CourseTemplate from '@/components/content/carousels/templates/CourseTemplate';
+import WorkshopTemplate from '@/components/content/carousels/templates/WorkshopTemplate';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
 
 const responsiveOptions = [
@@ -18,7 +20,7 @@ const responsiveOptions = [
     }
 ];
 
-export default function GenericCarousel({items}) {
+export default function GenericCarousel({items, selectedTopic}) {
     const [carousels, setCarousels] = useState([]);
 
     useEffect(() => {
@@ -33,9 +35,16 @@ export default function GenericCarousel({items}) {
                 itemsPerCarousel = 1;
             }
 
+            const filteredItems = selectedTopic === 'All' 
+                ? items 
+                : items.filter(item => 
+                    item.topics && 
+                    (item.topics.includes(selectedTopic) || item.type === selectedTopic.toLowerCase())
+                );
+
             const newCarousels = [];
-            for (let i = 0; i < items.length; i += itemsPerCarousel) {
-                newCarousels.push(items.slice(i, i + itemsPerCarousel));
+            for (let i = 0; i < filteredItems.length; i += itemsPerCarousel) {
+                newCarousels.push(filteredItems.slice(i, i + itemsPerCarousel));
             }
             setCarousels(newCarousels);
         };
@@ -46,19 +55,25 @@ export default function GenericCarousel({items}) {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, [items]);
-
+    }, [items, selectedTopic]);
     return (
         <>
             {carousels.map((carouselItems, index) => (
                 <Carousel 
                     key={index}
                     value={carouselItems}
-                    itemTemplate={(item) => 
-                        carouselItems.length > 0 ? 
-                        <ResourceTemplate key={item.id} resource={item} /> : 
-                        <TemplateSkeleton key={Math.random()} />
-                    }
+                    itemTemplate={(item) => {
+                        if (carouselItems.length > 0) {
+                            if (item.type === 'resource') {
+                                return <ResourceTemplate key={item.id} resource={item} />;
+                            } else if (item.type === 'workshop') {
+                                return <WorkshopTemplate key={item.id} workshop={item} />;
+                            } else if (item.type === 'course') {
+                                return <CourseTemplate key={item.id} course={item} />;
+                            }
+                        }
+                        return <TemplateSkeleton key={Math.random()} />;
+                    }}
                     responsiveOptions={responsiveOptions}
                     className="mb-4"
                     pt={{

src/pages/content.js

@@ -7,23 +7,47 @@ import { useCourses } from '@/hooks/nostr/useCourses';
 import { TabMenu } from 'primereact/tabmenu';
 import 'primeicons/primeicons.css';
 import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
 
-const MenuTab = ({ items, activeIndex, onTabChange }) => {
-    const menuItems = items.map((item, index) => ({
-        label: item,
-        icon: 'pi pi-tag',
-        command: () => onTabChange(index)
-    }));
+const MenuTab = ({ items, selectedTopic, onTabChange }) => {
+    const allItems = ['All', ...items];
+
+    const menuItems = allItems.map((item, index) => {
+        let icon = 'pi pi-tag';
+        if (item === 'All') icon = 'pi pi-eye';
+        else if (item === 'resource') icon = 'pi pi-file';
+        else if (item === 'workshop') icon = 'pi pi-video';
+        else if (item === 'course') icon = 'pi pi-desktop';
+
+        return {
+            label: (
+                <Button
+                    className={`${selectedTopic === item ? 'bg-primary text-white' : ''}`}
+                    onClick={() => onTabChange(item)}
+                    outlined={selectedTopic !== item}
+                    rounded
+                    size='small'
+                    label={item}
+                    icon={icon}
+                />
+            ),
+            command: () => onTabChange(item)
+        };
+    });
 
     return (
         <div className="w-full">
             <TabMenu
                 model={menuItems}
-                activeIndex={activeIndex}
-                onTabChange={(e) => onTabChange(e.index)}
+                activeIndex={allItems.indexOf(selectedTopic)}
+                onTabChange={(e) => onTabChange(allItems[e.index])}
                 pt={{
-                    menu: { className: 'bg-transparent border-none' },
-                    action: { className: 'bg-transparent border-none' }
+                    menu: { className: 'bg-transparent border-none ml-2 my-4' },
+                    action: ({ context, parent }) => ({
+                        className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
+                        style: { top: '2px' }
+                    }),
+                    menuitem: { className: 'mr-0' }
                 }}
             />
         </div>
@@ -42,6 +66,12 @@ const ContentPage = () => {
     const [allTopics, setAllTopics] = useState([]);
     const [activeIndex, setActiveIndex] = useState(0);
     const [searchQuery, setSearchQuery] = useState('');
+    const [selectedTopic, setSelectedTopic] = useState('All');
+    const [filteredContent, setFilteredContent] = useState([]);
+
+    useEffect(() => {
+        console.log(selectedTopic);
+    }, [selectedTopic]);
 
     useEffect(() => {
         if (resources && !resourcesLoading) {
@@ -65,29 +95,38 @@ const ContentPage = () => {
     }, [courses, coursesLoading]);
 
     useEffect(() => {
-        const allTopics = new Set([...processedResources, ...processedWorkshops, ...processedCourses].map(item => item.topics).flat());
-        setAllTopics(Array.from(allTopics));
+        const uniqueTopics = new Set([...processedResources, ...processedWorkshops, ...processedCourses].map(item => item.topics).flat());
+        const priorityItems = ['All', 'course', 'workshop', 'resource'];
+        const otherTopics = Array.from(uniqueTopics).filter(topic => !priorityItems.includes(topic));
+        setAllTopics([...priorityItems.slice(1), ...otherTopics]);
         setAllContent([...processedResources, ...processedWorkshops, ...processedCourses]);
     }, [processedResources, processedWorkshops, processedCourses]);
 
     useEffect(() => {
-        console.log(allTopics);
-    }, [allTopics]);
+        let filtered = allContent;
+        if (selectedTopic !== 'All') {
+            if (['course', 'workshop', 'resource'].includes(selectedTopic)) {
+                filtered = allContent.filter(item => item.type === selectedTopic);
+            } else {
+                filtered = allContent.filter(item => item.topics && item.topics.includes(selectedTopic));
+            }
+        }
+        setFilteredContent(filtered);
+    }, [selectedTopic, allContent]);
+
+    const handleTopicChange = (newTopic) => {
+        setSelectedTopic(newTopic);
+    };
 
     const renderCarousels = () => {
-        const carousels = [];
-        for (let i = 0; i < allContent.length; i += 3) {
-            const items = allContent.slice(i, i + 3);
-            carousels.push(
-                <GenericCarousel
-                    key={i}
-                    items={items}
-                    title={`Content Group ${i / 3 + 1}`}
-                    type="all"
-                />
-            );
-        }
-        return carousels;
+        return (
+            <GenericCarousel
+                items={filteredContent}
+                selectedTopic={selectedTopic}
+                title={`${selectedTopic} Content`}
+                type="all"
+            />
+        );
     };
 
     return (
@@ -99,12 +138,13 @@ const ContentPage = () => {
                     onChange={(e) => setSearchQuery(e.target.value)}
                     placeholder="Search"
                     icon="pi pi-search"
+                    className="w-full"
                 />
             </div>
             <MenuTab
                 items={allTopics}
-                activeIndex={activeIndex}
-                onTabChange={setActiveIndex}
+                selectedTopic={selectedTopic}
+                onTabChange={handleTopicChange}
                 className="max-w-[90%] mx-auto"
             />
             {renderCarousels()}

src/utils/nostr.js

@@ -42,6 +42,7 @@ export const parseEvent = (event) => {
         image: '',
         published_at: '',
         topics: [], // Added to hold all topics
+        type: 'resource', // Default type
     };
 
     // Iterate over the tags array to extract data
@@ -82,7 +83,11 @@ export const parseEvent = (event) => {
                 eventData.d = tag[1];
                 break;
             case 't':
-                tag[1] !== "plebdevs" && eventData.topics.push(tag[1]);
+                if (tag[1] === 'workshop') {
+                    eventData.type = 'workshop';
+                } else if (tag[1] !== "plebdevs") {
+                    eventData.topics.push(tag[1]);
+                }
                 break;
             case 'r':
                 eventData.additionalLinks.push(tag[1]);
@@ -114,7 +119,8 @@ export const parseCourseEvent = (event) => {
         created_at: event.created_at,
         topics: [],
         d: '',
-        tags: event.tags
+        tags: event.tags,
+        type: 'course',
     };
 
     // Iterate over the tags array to extract data