feat: Add sortOrder and type properties to media items

Vets-Who-Code · May 25, 2024 · 18e99af · 18e99af
1 parent 234e417
commit 18e99af
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 39 deletions.
diff --git a/src/components/media-card/index.tsx b/src/components/media-card/index.tsx
@@ -0,0 +1,70 @@
+import React, { forwardRef } from "react";
+import clsx from "clsx";
+import Anchor from "@ui/anchor";
+import { IMedia } from "@utils/types";
+
+type TProps = Pick<
+    IMedia,
+    "title" | "path" | "type" | "date" | "image" | "views"
+> & {
+    className?: string;
+};
+
+const MediaCard = forwardRef<HTMLDivElement, TProps>(
+    ({ title, path, type, date, image, views, className }, ref) => {
+        console.log('Image Source:', image?.src); // Debugging log
+        return (
+            <div
+                className={clsx(
+                    "media-card tw-flex tw-flex-col tw-relative tw-overflow-hidden tw-transition-all tw-duration-300 tw-rounded tw-bg-white tw-shadow-xl tw-shadow-black/5 tw-group tw-w-[280px] lg:tw-w-[320px] tw-h-auto hover:tw-transform hover:tw-translate-y-[-5px] hover:tw-shadow-2xl",
+                    className
+                )}
+                ref={ref}
+            >
+                {image?.src ? (
+                    <figure className="tw-relative tw-overflow-hidden tw-w-full tw-h-[200px] lg:tw-h-[250px]">
+                        <img
+                            className="tw-w-full tw-h-full tw-transition-transform tw-duration-500 tw-object-cover group-hover:tw-scale-110"
+                            src={image.src}
+                            alt={image?.alt || title}
+                            width={image?.width || 500}
+                            height={image?.height || 250}
+                            loading={image?.loading || "lazy"}
+                        />
+                        <Anchor path={path} className="link-overlay">
+                            {title}
+                        </Anchor>
+                    </figure>
+                ) : (
+                    <div className="tw-bg-dark/40 tw-w-full tw-h-[200px] lg:tw-h-[250px]" />
+                )}
+
+                <div className="tw-py-6.1 tw-px-7.5 lg:tw-pt-5 lg:tw-pb-[5px] lg:tw-px-[38px] tw-flex-grow tw-flex tw-flex-col tw-justify-end">
+                    <Anchor
+                        path={`/${type}`}
+                        className="tw-font-medium tw-block tw-mb-1 -tw-tracking-tightest tw-uppercase tw-text-gray-700 hover:tw-text-gray-900"
+                    >
+                        {type}
+                    </Anchor>
+                    <h3 className="tw-text-xl tw-leading-normal lg:tw-text-[24px] lg:tw-leading-[1.42] tw-text-gray-800 tw-mb-0">
+                        <Anchor className="hover:tw-text-gray-900" path={path}>
+                            {title}
+                        </Anchor>
+                    </h3>
+                    <ul className="tw-flex tw-gap-7">
+                        <li className="tw-text-md tw-mt-3.8 tw-text-gray-600 tw-mb-0">
+                            <i className="far fa-calendar tw-mr-2.5" />
+                            {date}
+                        </li>
+                        <li className="tw-text-md tw-mt-3.8 tw-text-gray-600">
+                            <i className="far fa-eye tw-mr-2.5" />
+                            {views} views
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+);
+
+export default MediaCard;
diff --git a/src/components/media-grid/index.tsx b/src/components/media-grid/index.tsx
@@ -1,10 +1,19 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { IMedia } from "@utils/types";
+import React from 'react';
+import PropTypes from 'prop-types';
+import MediaCard from '@components/media-card'; // Adjust the import path as needed
 
 type MediaGridProps = {
     section: string;
-    data: IMedia[];
+    data: {
+        image: { src: string; alt?: string; width?: number; height?: number; loading?: string; };
+        title: string;
+        description: string;
+        type: string;
+        date: string;
+        path: string;
+        views: number;
+        slug: string;
+    }[];
 };
 
 const MediaGrid: React.FC<MediaGridProps> = ({ section, data }) => {
@@ -13,24 +22,19 @@ const MediaGrid: React.FC<MediaGridProps> = ({ section, data }) => {
     }
 
     return (
-        <div>
+        <div className="tw-mb-8">
             <h2 className="tw-text-2xl tw-font-bold tw-mb-4">{section}</h2>
-            <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4">
-                {data.map((item, index) => (
-                    <div key={index} className="tw-max-w-sm tw-rounded tw-overflow-hidden tw-shadow-lg">
-                        <img className="tw-w-full" src={item.image} alt={item.title} />
-                        <div className="tw-px-6 tw-py-4">
-                            <div className="tw-font-bold tw-text-xl tw-mb-2">{item.title}</div>
-                            <p className="tw-text-gray-700 tw-text-base">
-                                {item.description}
-                            </p>
-                        </div>
-                        <div className="tw-px-6 tw-pt-4 tw-pb-2">
-                            {item.tags.map((tag, index) => (
-                                <span key={index} className="tw-inline-block tw-bg-gray-200 tw-rounded-full tw-px-3 tw-py-1 tw-text-sm tw-font-semibold tw-text-gray-700 tw-mr-2 tw-mb-2">#{tag}</span>
-                            ))}
-                        </div>
-                    </div>
+            <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-6">
+                {data.map(item => (
+                    <MediaCard
+                        key={item.slug}
+                        image={item.image}
+                        path={item.path}
+                        title={item.title}
+                        type={item.type}
+                        date={item.date}
+                        views={item.views}
+                    />
                 ))}
             </div>
         </div>
@@ -40,14 +44,20 @@ const MediaGrid: React.FC<MediaGridProps> = ({ section, data }) => {
 MediaGrid.propTypes = {
     section: PropTypes.string.isRequired,
     data: PropTypes.arrayOf(PropTypes.shape({
-        image: PropTypes.string.isRequired,
+        image: PropTypes.shape({
+            src: PropTypes.string.isRequired,
+            alt: PropTypes.string,
+            width: PropTypes.number,
+            height: PropTypes.number,
+            loading: PropTypes.string,
+        }).isRequired,
         title: PropTypes.string.isRequired,
-        description: PropTypes.string,
-        tags: PropTypes.arrayOf(PropTypes.shape({
-            title: PropTypes.string.isRequired,
-            slug: PropTypes.string.isRequired,
-            path: PropTypes.string.isRequired,
-        })),
+        description: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        date: PropTypes.string.isRequired,
+        path: PropTypes.string.isRequired,
+        views: PropTypes.number.isRequired,
+        slug: PropTypes.string.isRequired,
     })).isRequired,
 };
 

diff --git a/src/data/media/media-one.md b/src/data/media/media-one.md
@@ -6,6 +6,8 @@ tags:
   - "tag1"
   - "tag2"
 date: "2023-05-01"
+sortOrder: 0
+type: "publication"
+slug: "media-one"
 ---
-
 Content for media item 1.
diff --git a/src/data/media/media-three.md b/src/data/media/media-three.md
@@ -0,0 +1,13 @@
+---
+title: "Media Title 5"
+image: "https://res.cloudinary.com/vetswhocode/image/upload/v1716598792/junior-senior-card_sjcshc.jpg"
+description: "Description for media "
+tags:
+  - "tag1"
+  - "tag2"
+date: "2023-05-01"
+sortOrder: 1
+type: "publication"
+slug: "media-one"
+---
+Content for media item 5.
diff --git a/src/data/media/media-two.md b/src/data/media/media-two.md
@@ -6,6 +6,8 @@ tags:
   - "tag3"
   - "tag4"
 date: "2023-06-15"
+sortOrder: 2
+type: "podcast"
 ---
 
 Content for media item 2.
diff --git a/src/lib/media.ts b/src/lib/media.ts
@@ -33,7 +33,7 @@ export function getMediaBySlug(
         media = {
             ...mediaData,
             content,
-            tags: mediaData.tags.map((tag) => ({
+            tags: mediaData.tags.map((tag: string) => ({
                 title: tag,
                 slug: slugify(tag),
                 path: `/media/tag/${slugify(tag)}`,
@@ -55,7 +55,7 @@ export function getMediaBySlug(
             if (field === "tags") {
                 return {
                     ...acc,
-                    tags: mediaData.tags.map((tag) => ({
+                    tags: mediaData.tags.map((tag: string) => ({
                         title: tag,
                         slug: slugify(tag),
                         path: `/media/tag/${slugify(tag)}`,

diff --git a/src/pages/media.tsx b/src/pages/media.tsx
@@ -17,6 +17,11 @@ type PageProps = NextPage<TProps> & {
 };
 
 const Media: PageProps = ({ data: { media } }) => {
+    const whatWeHaveBuilt = media.filter(item => item.tags.some(tag => tag.title === 'github'));
+    const publications = media.filter(item => item.type === 'publication');
+    const podcasts = media.filter(item => item.type === 'podcast');
+    const courses = media.filter(item => item.type === 'course');
+
     return (
         <>
             <SEO title="Media" />
@@ -25,12 +30,10 @@ const Media: PageProps = ({ data: { media } }) => {
                 currentPage="Media"
             />
             <div className="tw-container tw-mx-auto tw-my-8">
-                <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4">
-                    <MediaGrid section="What we have built" data={media} />
-                    <MediaGrid section="Publications" data={media} />
-                    <MediaGrid section="Podcasts" data={media} />
-                    <MediaGrid section="Courses" data={media} />
-                </div>
+                <MediaGrid section="What we have built" data={whatWeHaveBuilt} />
+                <MediaGrid section="Publications" data={publications} />
+                <MediaGrid section="Podcasts" data={podcasts} />
+                <MediaGrid section="Courses" data={courses} />
             </div>
         </>
     );
@@ -39,12 +42,35 @@ const Media: PageProps = ({ data: { media } }) => {
 Media.Layout = Layout01;
 
 export const getStaticProps: GetStaticProps = () => {
-    const { media } = getAllMedia(["title", "image", "description", "tags", "date", "content", "slug", "excerpt"]);
+    const { media } = getAllMedia([
+        "title", "image", "description", "tags", "date", "content", "slug", "excerpt", "sortOrder", "type"
+    ]);
+
+    if (!Array.isArray(media)) {
+        return {
+            props: {
+                data: {
+                    media: [],
+                },
+                layout: {
+                    headerShadow: true,
+                    headerFluid: false,
+                    footerMode: "light",
+                },
+            },
+        };
+    }
+
+    // Remove duplicates and sort data by sortOrder
+    const uniqueMedia = Array.from(new Set(media.map(item => item.slug)))
+        .map(slug => media.find(item => item.slug === slug))
+        .filter(item => item !== undefined) // Ensure item is not undefined
+        .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
 
     return {
         props: {
             data: {
-                media,
+                media: uniqueMedia,
             },
             layout: {
                 headerShadow: true,