-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.js
142 lines (135 loc) · 4.14 KB
/
card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { Avatar } from "@mui/material";
import React from "react";
import ShortenText from "../utils/ShortenText";
import ToText from "../utils/ToText";
import AvatarImg from "./avatar";
import { Chip } from "@mui/material";
import colors from "../utils/colors.json";
import { styled } from "@mui/material/styles";
import kFormatter from "../utils/KFormerter";
const Cards = ({ data }) => {
const monthShortname = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const splitDate = data?.pubDate.split(" ");
const date = splitDate[0];
const splitMonth = date.split("-");
const finalDate =
monthShortname[Number(splitMonth[1] - 1)] +
" " +
splitMonth[2] +
"," +
" " +
splitMonth[0];
const currentTime = new Date();
const currentOffset = currentTime.getTimezoneOffset();
const ISTOffset = 330; // IST offset UTC +5:30
const ISTTime = new Date(
currentTime.getTime() + (ISTOffset + currentOffset) * 60000
);
const isOnline = ISTTime.getHours() >= 5 && ISTTime.getHours() <= 22;
const StyledChip = styled(Chip)(({ theme }) => ({
".MuiChip-label": {
color: "#FFFFFF",
textTransform: "uppercase",
fontFamily: '"Poppins", sans-serif',
fontSize: "10px",
},
}));
return (
<div className="col-lg-4">
<div className="card post-entry">
<div
className="thumbnail"
style={{
borderRadius: "7px",
backgroundImage: `url(${data?.postImage})`,
}}
>
<StyledChip
label={data?.tag}
size="small"
style={{
backgroundColor: colors[data?.tagOrder],
top: "0.9375rem",
right: "0.9375rem",
position: "absolute",
}}
/>
</div>
<div className="card-block">
<div className="content-height">
<h2 className="card-title mb-3">
<a href={data.link}>{data.title}</a>
</h2>
<p className="card-text">
{ShortenText(ToText(data.content), 0, 120) + "..."}
</p>
</div>
<div className="metafooter">
<div className="wrapfooter">
<span className="meta-footer-thumb">
<a href={data.profileLink}>
<div className="author-pic">
{isOnline ? (
<AvatarImg image={data?.avatar} />
) : (
<Avatar src={data.avatar} className="author-thumb" />
)}
{/* <img className="author-thumb" src={data.avatar} alt="Sab" /> */}
</div>
</a>
</span>
<span className="author-meta">
<span className="post-name">
<a href={data.profileLink}>{data.author}</a>
</span>
<br />
<span className="post-date">{finalDate}</span>
<span className="dot"></span>
<span className="post-read">{data.readingTime} min read</span>
</span>
<span className="post-read-more">
<span className="post-name">
<i
className="fa-regular fa-hands-clapping"
style={{
fontSize: "14px",
paddingRight: "10px",
color: "##757575",
}}
></i>
{kFormatter(data.clapCount)}
</span>
<br />
<span className="post-date">
<i
className="fa-regular fa-comment fa-flip-horizontal"
style={{
fontSize: "14px",
paddingLeft: "13px",
color: "##757575",
}}
></i>
{kFormatter(data.responseCount)}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
);
};
export default Cards;