index.js

import React from 'react'
import { Course, Tag } from '../../../common'


import './free-courses.scss'

const mockData = [
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
    {
        tagText: '机器学习',
        tagType: 1,
        title: '16年度最火课程TOP10',
        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    },
]

const Bottom = (props) => (
    <div className='bottom'>
        <Tag className={props.className}>{props.tagText}</Tag>
        <span>{props.audience}人观看</span>
    </div>
)


const FreeCourse = (props) => {
    return (
        <ul className='free-courses'>
            {
                mockData.map((item, index) => (
                    <Course
                        data={item}
                        top={
                            <Tag className={'tag-starting top'}>即将开始</Tag>
                        }
                        bottom={
                            <Bottom audience={232} className={'tag-category'} tagText={item.tagText}></Bottom>
                        }
                        key={index}
                    >
                    </Course>
                ))
            }
        </ul>
    )
}

export default FreeCourse