From a9d2d5a3047bf14b10af3293da3ba6f4da2be927 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Mon, 14 Oct 2024 19:12:20 -0500 Subject: [PATCH] cleanup content menu bar, added free and paid categories as well --- .../carousels/templates/CourseTemplate.js | 4 ++-- .../carousels/templates/DocumentTemplate.js | 4 ++-- .../carousels/templates/VideoTemplate.js | 4 ++-- src/pages/content/index.js | 20 ++++++++++++++----- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js index d11e266..2d57143 100644 --- a/src/components/content/carousels/templates/CourseTemplate.js +++ b/src/components/content/carousels/templates/CourseTemplate.js @@ -82,8 +82,8 @@ export function CourseTemplate({ course }) { - -
+ +
{course && course.topics && course.topics.map((topic, index) => ( {topic} diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js index c7bf1c0..88ad1c7 100644 --- a/src/components/content/carousels/templates/DocumentTemplate.js +++ b/src/components/content/carousels/templates/DocumentTemplate.js @@ -71,8 +71,8 @@ export function DocumentTemplate({ document, isLesson }) {
- -
+ +
{isLesson && } {document?.topics?.map((topic, index) => ( diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js index b34fa7e..cf8fe04 100644 --- a/src/components/content/carousels/templates/VideoTemplate.js +++ b/src/components/content/carousels/templates/VideoTemplate.js @@ -72,8 +72,8 @@ export function VideoTemplate({ video, isLesson }) {
- -
+ +
{isLesson && } {video?.topics?.map((topic, index) => ( diff --git a/src/pages/content/index.js b/src/pages/content/index.js index fedd338..057c0a9 100644 --- a/src/pages/content/index.js +++ b/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' - const allItems = ['All', ...items.filter(item => item !== 'document' && item !== 'video' && item !== 'course')]; + // Reorder items to put 'Free' and 'Paid' after 'Courses', 'Videos', and 'Documents' + 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 = () => {

All Content

!['Courses', 'Videos', 'Documents'].includes(topic))]} + items={allTopics} selectedTopic={selectedTopic} onTabChange={handleTopicChange} className="max-w-[90%] mx-auto" @@ -177,4 +187,4 @@ const ContentPage = () => { ); }; -export default ContentPage; \ No newline at end of file +export default ContentPage;