Add media page with grid layout

.eslintrc.json

@@ -6,9 +6,11 @@
         "airbnb/hooks", 
         "prettier",
         "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "eslint-config-airbnb",
+        "eslint-config-next"
     ],
-    "plugins": ["react", "@typescript-eslint", "prettier"],
+    "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
     "env": {
       "browser": true,
       "es2021": true,
@@ -24,6 +26,8 @@
       "sourceType": "module"
     },
     "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-misused-promises": [
         "error",
         {

qodana.yaml

@@ -0,0 +1,29 @@
+#-------------------------------------------------------------------------------#
+#               Qodana analysis is configured by qodana.yaml file               #
+#             https://www.jetbrains.com/help/qodana/qodana-yaml.html            #
+#-------------------------------------------------------------------------------#
+version: "1.0"
+
+#Specify inspection profile for code analysis
+profile:
+  name: qodana.starter
+
+#Enable inspections
+#include:
+#  - name: <SomeEnabledInspectionId>
+
+#Disable inspections
+#exclude:
+#  - name: <SomeDisabledInspectionId>
+#    paths:
+#      - <path/where/not/run/inspection>
+
+#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
+#bootstrap: sh ./prepare-qodana.sh
+
+#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
+#plugins:
+#  - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
+
+#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
+linter: jetbrains/qodana-js:latest

src/components/media-card/index.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Anchor from "@ui/anchor";
+import { IMedia } from "@utils/types";
+
+type TProps = Pick<
+    IMedia,
+    "image" | "path" | "title" | "description" | "type" | "date"
+> & {
+    className?: string;
+};
+
+const MediaCard = forwardRef<HTMLDivElement, TProps>(
+    ({ className, image, path, title, description, type, date }, ref) => {
+        return (
+            <div className={clsx("media-card tw-group", className)} ref={ref}>
+                <div className="tw-relative tw-overflow-hidden tw-rounded tw-h-[250px]">
+                    {image?.src && (
+                        <figure className="tw-transition-transform tw-duration-1500 tw-h-full group-hover:tw-scale-110">
+                            <img
+                                className="tw-w-full tw-h-full tw-object-cover"
+                                src={image.src}
+                                alt={image?.alt || "Media"}
+                                width={image.width || 480}
+                                height={image.height || 250}
+                                loading={image.loading || "lazy"}
+                            />
+                        </figure>
+                    )}
+                    <Anchor className="link-overlay" path={path}>
+                        {title}
+                    </Anchor>
+                </div>
+
+                <div className="info tw-pt-[26px]">
+                    <div className="tw-text-base tw-font-medium tw-uppercase -tw-tracking-tightest tw-leading-[1.4] tw-mb-1.5">
+                        {type}
+                    </div>
+
+                    <h3 className="tw-mb-0 tw-leading-normal">
+                        <Anchor path={path}>{title}</Anchor>
+                    </h3>
+
+                    <p className="tw-mt-2 tw-text-sm tw-text-gray-500">{description}</p>
+
+                    <ul className="tw-flex tw-gap-7 tw-text-gray-300 tw-text-md">
+                        <li className="tw-mt-3.8 tw-mb-0">
+                            <i className="far fa-calendar tw-mr-2.5" />
+                            {date}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+);
+
+export default MediaCard;

src/components/media-grid/index.tsx

@@ -0,0 +1,64 @@
+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: {
+        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 }) => {
+    if (!Array.isArray(data)) {
+        return null; // or some fallback UI
+    }
+
+    return (
+        <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-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>
+    );
+};
+
+MediaGrid.propTypes = {
+    section: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(PropTypes.shape({
+        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.isRequired,
+        type: PropTypes.string.isRequired,
+        date: PropTypes.string.isRequired,
+        path: PropTypes.string.isRequired,
+        views: PropTypes.number.isRequired,
+        slug: PropTypes.string.isRequired,
+    })).isRequired,
+};
+
+export default MediaGrid;

src/components/ui/button/index.tsx

@@ -14,11 +14,11 @@ interface ButtonProps {
     /**
      * Optional. Default is `contained`.
      */
-    variant?: "contained" | "outlined" | "texted";
+    variant?: "contained" | "outlined" | "texted" | "media";
     /**
      * Optional. Default is `primary`.
      */
-    color?: "primary" | "light";
+    color?: "primary" | "light" | "media";
     /**
      * Optional. Default is `md`.
      */
@@ -164,6 +164,24 @@ const Button = ({
         lightHoverClass,
     ];
 
+    // Media Button
+    const mediaClass = "tw-bg-media tw-border-media tw-text-white";
+    const mediaHoverClass =
+        !disabled &&
+        !active &&
+        hover === "default" &&
+        "hover:tw-bg-media-dark hover:tw-border-media-dark hover:tw-text-white";
+    const mediaActiveClass =
+        !disabled &&
+        active &&
+        "tw-bg-media-dark tw-border-media-dark active:tw-bg-media-dark active:tw-border-media-dark";
+    const mediaBtn = color === "media" && [
+        mediaClass,
+        mediaHoverClass,
+        mediaActiveClass,
+        lightHoverClass,
+    ];
+
     // Buton Sizes
     const mdBtn =
         size === "md" &&
@@ -179,8 +197,8 @@ const Button = ({
     const classnames = clsx(
         variant !== "texted" && baseClass,
         variant !== "texted" && baseNotFullWidthClass,
-        variant === "contained" && [containedPrimaryBtn, containedLightBtn],
-        variant === "outlined" && [outlinedPrimaryBtn, outlinedLightBtn],
+        variant === "contained" && [containedPrimaryBtn, containedLightBtn, mediaBtn],
+        variant === "outlined" && [outlinedPrimaryBtn, outlinedLightBtn, mediaBtn],
         !iconButton && variant !== "texted" && [mdBtn, xsBtn],
         roundedBtn,
         ellipseBtn,

src/containers/media-full/index.tsx

@@ -0,0 +1,57 @@
+import { motion } from "framer-motion";
+import Section from "@ui/section";
+import MediaCard from "@components/media-card/index"; // Assuming there's a media-card component similar to blog-card
+import Pagination from "@components/pagination/pagination-01";
+import { IMedia } from "@utils/types";
+import { scrollUpVariants } from "@utils/variants";
+
+const AnimatedMediaCard = motion(MediaCard);
+
+type TProps = {
+    data: {
+        media: IMedia[];
+        pagiData?: {
+            currentPage: number;
+            numberOfPages: number;
+        };
+    };
+};
+
+const MediaArea = ({ data: { media, pagiData } }: TProps) => {
+    return (
+        <Section className="media-area" space="bottom">
+            <h2 className="tw-sr-only">Media Section</h2>
+            <div className="tw-container">
+                {media.length > 0 && (
+                    <div className="tw-grid md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-7.5">
+                        {media.map((item) => (
+                            <AnimatedMediaCard
+                                key={item.path}
+                                image={item.image}
+                                title={item.title}
+                                path={item.path}
+                                description={item.description}
+                                type={item.type}
+                                date={item.date}
+                                initial="offscreen"
+                                whileInView="onscreen"
+                                viewport={{ once: true, amount: 0.2 }}
+                                variants={scrollUpVariants}
+                            />
+                        ))}
+                    </div>
+                )}
+                {pagiData && pagiData.numberOfPages > 1 && (
+                    <Pagination
+                        className="tw-mt-[50px]"
+                        numberOfPages={pagiData.numberOfPages}
+                        currentPage={pagiData.currentPage}
+                        rootPage="media/media"
+                    />
+                )}
+            </div>
+        </Section>
+    );
+};
+
+export default MediaArea;

src/data/media.json

@@ -0,0 +1,64 @@
+{
+  "media": [
+    {
+      "section": "What we have built",
+      "items": [
+        {
+          "title": "Project 1",
+          "description": "Description of Project 1",
+          "link": "https://example.com/project1"
+        },
+        {
+          "title": "Project 2",
+          "description": "Description of Project 2",
+          "link": "https://example.com/project2"
+        }
+      ]
+    },
+    {
+      "section": "Publications",
+      "items": [
+        {
+          "title": "Publication 1",
+          "description": "Description of Publication 1",
+          "link": "https://example.com/publication1"
+        },
+        {
+          "title": "Publication 2",
+          "description": "Description of Publication 2",
+          "link": "https://example.com/publication2"
+        }
+      ]
+    },
+    {
+      "section": "Podcasts",
+      "items": [
+        {
+          "title": "Podcast 1",
+          "description": "Description of Podcast 1",
+          "link": "https://example.com/podcast1"
+        },
+        {
+          "title": "Podcast 2",
+          "description": "Description of Podcast 2",
+          "link": "https://example.com/podcast2"
+        }
+      ]
+    },
+    {
+      "section": "Courses",
+      "items": [
+        {
+          "title": "Course 1",
+          "description": "Description of Course 1",
+          "link": "https://example.com/course1"
+        },
+        {
+          "title": "Course 2",
+          "description": "Description of Course 2",
+          "link": "https://example.com/course2"
+        }
+      ]
+    }
+  ]
+}