show or hide meta tags

src/components/content/carousels/CoursesCarousel.js

@@ -73,7 +73,7 @@ export default function CoursesCarousel() {
                     itemTemplate={(item) => 
                         !processedCourses.length ? 
                         <TemplateSkeleton key={Math.random()} /> : 
-                        <CourseTemplate key={item.id} course={item} />
+                        <CourseTemplate key={item.id} course={item} showMetaTags={false} />
                     }
                     responsiveOptions={responsiveOptions} />
             </div>

src/components/content/carousels/DocumentsCarousel.js

@@ -94,7 +94,7 @@ export default function DocumentsCarousel() {
                 }}
                 itemTemplate={(item) => 
                         processedDocuments.length > 0 ? 
-                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} /> : 
+                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} showMetaTags={false} /> : 
                         <TemplateSkeleton key={Math.random()} />
                 }
                 responsiveOptions={responsiveOptions} />

src/components/content/carousels/VideosCarousel.js

@@ -92,7 +92,7 @@ export default function VideosCarousel() {
                 itemTemplate={(item) => 
                     !processedVideos.length ? 
                     <TemplateSkeleton key={Math.random()} /> : 
-                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} />
+                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} showMetaTags={false} />
                 }
                 responsiveOptions={responsiveOptions}
             />

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

@@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function CourseTemplate({ course }) {
+export function CourseTemplate({ course, showMetaTags = true }) {
   const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
   const [zapAmount, setZapAmount] = useState(0);
   const [lessonCount, setLessonCount] = useState(0);
@@ -53,6 +53,13 @@ export function CourseTemplate({ course }) {
     }
   }, [course]);
 
+  const shouldShowMetaTags = (topic) => {
+    if (!showMetaTags) {
+      return !["lesson", "document", "video", "course"].includes(topic);
+    }
+    return true;
+  }
+
   if (!nAddress) return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
 
   if (zapsError) return <div>Error: {zapsError}</div>;
@@ -87,9 +94,11 @@ export function CourseTemplate({ course }) {
       <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-[65%]">
           {course && course.topics && course.topics.map((topic, index) => (
+            shouldShowMetaTags(topic) && (
               <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
                 {topic}
               </Tag>
+            )
           ))}
         </div>
         <div className="flex flex-col items-end">

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

@@ -14,7 +14,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function DocumentTemplate({ document, isLesson }) {
+export function DocumentTemplate({ document, isLesson, showMetaTags }) {
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document });
     const [nAddress, setNAddress] = useState(null);
     const [zapAmount, setZapAmount] = useState(0);
@@ -42,6 +42,13 @@ export function DocumentTemplate({ document, isLesson }) {
         }
     }, [zaps, document]);
 
+    const shouldShowMetaTags = (topic) => {
+        if (!showMetaTags) {
+            return !["lesson", "document", "video", "course"].includes(topic);
+        }
+        return true;
+    }
+
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
@@ -74,11 +81,13 @@ export function DocumentTemplate({ document, isLesson }) {
             <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-[65%]">
                     {document?.topics?.map((topic, index) => (
+                        shouldShowMetaTags(topic) && (
                             <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
                                 {topic}
                             </Tag>
+                        )
                     ))}
-                    {isLesson && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
+                    {isLesson && showMetaTags && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                 </div>
                 <div className="flex flex-col items-end">
                     <p className="font-bold text-gray-300">{document?.readTime || "5 min"} read</p>

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

@@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function VideoTemplate({ video, isLesson }) {
+export function VideoTemplate({ video, isLesson, showMetaTags }) {
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
     const [nAddress, setNAddress] = useState(null);
     const [zapAmount, setZapAmount] = useState(0);
@@ -43,6 +43,13 @@ export function VideoTemplate({ video, isLesson }) {
         }
     }, [zaps, video]);
 
+    const shouldShowMetaTags = (topic) => {
+        if (!showMetaTags) {
+            return !["lesson", "document", "video", "course"].includes(topic);
+        }
+        return true;
+    }
+
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
@@ -75,11 +82,13 @@ export function VideoTemplate({ video, isLesson }) {
             <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-[65%]">
                     {video?.topics?.map((topic, index) => (
-                        <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
+                        shouldShowMetaTags(topic) && (
+                            <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
                                 {topic}
                             </Tag>
+                        )
                     ))}
-                    {isLesson && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
+                    {isLesson && showMetaTags && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                 </div>
                 <div className="flex flex-col items-end">
                     <p className="font-bold text-gray-300">{video?.duration || "5 min"} watch</p>