Source: routes/VideoGallery.js

import React from 'react';

import GalleryComponent from '../components/GalleryComponent';
import { Container, Row, Col } from 'reactstrap';

import { useLoaderData } from 'react-router-dom'
/**
 * Renders the video resource pages, which are a gallery view of YouTube tutorials
 * @module VideoGallery
 */
export default function VideoGallery(){
    const videos = useLoaderData();
    return(
        <Container>
            <Row>
                {
                    createGalleryFromVideos(videos)
                }
            </Row>
        </Container>
    )
}

/**
 * Create a gallery of videos from an array containing additional metadata such as description and link
 * @param {VideoMetaData[]} videos List of videos to create tables from, each element also contains video metadata
 * @see VideoMetaData
 */
function createGalleryFromVideos(videos){
    return videos.map(videoInfo=>{
        return (
        <Col sm="4">
            <GalleryComponent imgRef={videoInfo.imgRef} title={videoInfo.title} subtitle={videoInfo.subtitle} description={videoInfo.desc} link={videoInfo.link}/>
        </Col>)
    })
}