helpcenter.tsx

import React, { useState } from 'react';
import { slice } from 'lodash';
import { ArrowRightOutlined } from '@ant-design/icons';
import {
  Button,
  Col,
  Divider,
  Row,
  Typography,
} from 'antd';
import HelpCenterFilter from './helpcenterfilter/HelpCenterFilter';
import HelpCenterCard from './helpcentercard/HelpCenterCard';

const IMAGE_SRC_VIDEO = 'https://source.unsplash.com/random';
const IMAGE_SRC_FILE = 'https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg';
const LENGTH = 30;
const DATA = [...Array(LENGTH).keys()];
const LIMIT = 5;


const HelpCenterList = () => {
  const { Title } = Typography;

  const [videoList] = useState(slice(DATA, 0, LIMIT));
  const [fileList] = useState(slice(DATA, 0, LIMIT));

  return (
    <>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <HelpCenterFilter />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <Row>
            <Col xs={2} sm={2} md={2} lg={2} xl={2}>
              <Title level={3} className="text-2xl text-blue-900">
                Videos
                <Divider className="bg-gray-200" type="vertical" />
              </Title>
            </Col>
            <Col xs={2} sm={2} md={2} lg={2} xl={2}>
              <Button type="link" className="text-blue-600">
                <span className="underline">See All</span>
                <ArrowRightOutlined className="text-lg text-blue-400" />
              </Button>
            </Col>
          </Row>
        </Col>
        <Divider />
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <Row gutter={[50, 50]}>
            {videoList.map((i) => (
              <>
                <Col xs={24} sm={24} md={24} lg={4} xl={4}>
                  <HelpCenterCard title="Ksec Video Test" src={IMAGE_SRC_VIDEO} type="video" />
                </Col>
              </>
            ))}
          </Row>
        </Col>
      </Row>
      <Row className="pt-10">
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <Row>
            <Col xs={2} sm={2} md={2} lg={2} xl={2}>
              <Title level={3} className="text-2xl text-blue-900">
                Articles
                <Divider className="bg-gray-200" type="vertical" />
              </Title>
            </Col>
            <Col xs={2} sm={2} md={2} lg={2} xl={2}>
              <Button type="link" className="text-blue-600">
                <span className="underline">See All</span>
                <ArrowRightOutlined className="text-lg text-blue-400" />
              </Button>
            </Col>
          </Row>
        </Col>
        <Divider />
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <Row gutter={[50, 50]}>
            {fileList.map((i) => (
              <>
                <Col xs={24} sm={24} md={24} lg={4} xl={4}>
                  <HelpCenterCard title="Ksec File Test" src={IMAGE_SRC_FILE} type="file" />
                </Col>
              </>
            ))}
          </Row>
        </Col>
      </Row>
    </>
  );
};

export default HelpCenterList;