index.tsx 1.35 KB
Newer Older
Ken's avatar
Ken committed
1
import moment from "moment";
Ken's avatar
Ken committed
2
import { INewspaper } from "pages/interface";
Ken's avatar
Ken committed
3 4 5 6
import React from "react";

type Props = {
  data: INewspaper;
Ken's avatar
Ken committed
7 8 9 10 11 12 13
  firstNews?: boolean;
};

const randomTags = () => {
  const tags = ["success", "info", "secondary", "warning"];
  const idx = Math.floor(Math.random() * tags.length);
  return tags[idx];
Ken's avatar
Ken committed
14 15 16
};

const Newspaper = (props: Props) => {
Ken's avatar
Ken committed
17 18
  const { data, firstNews = false } = props;
  const { image, title, createdAt, categorylinkNavigation, description } = data;
Ken's avatar
Ken committed
19
  const { label } = categorylinkNavigation;
Ken's avatar
Ken committed
20 21

  return (
Ken's avatar
Ken committed
22
    <div className={`newspaper ${firstNews ? "newspaper-first" : ""}`}>
Ken's avatar
Ken committed
23 24 25
      <div className="newspaper-img">
        <img src={image} alt={title} />
      </div>
Ken's avatar
Ken committed
26

Ken's avatar
Ken committed
27
      <div className="newspaper-content">
Ken's avatar
Ken committed
28 29 30 31 32 33 34
        <div className="">
          <p>{title}</p>
          {firstNews && (
            <div className="newspaper-content__desc">{description}</div>
          )}
        </div>

Ken's avatar
Ken committed
35
        <div className="newspaper-content__footer">
Ken's avatar
Ken committed
36 37 38 39 40
          <div
            className={`newspaper-category newspaper-category__${randomTags()}`}
          >
            {label}
          </div>
Ken's avatar
Ken committed
41 42 43 44 45

          <div className="newspaper-time">
            <span>
              {moment(createdAt, "DD/MM/YYYY hh:mm").format("DD/MM/YYYY")}
            </span>
Ken's avatar
Ken committed
46 47 48 49 50 51 52 53
          </div>
        </div>
      </div>
    </div>
  );
};

export default Newspaper;