Created Card Component

Author: f3an

src/app/components/Card/Card.tsx

@@ -0,0 +1,49 @@
+import { Box } from '@mui/material'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { News } from '../../../types'
+import { StyledBoxCard, StyledTypography } from '../../styles/styledComponents'
+import { PublishDate } from './PublishDate'
+import Arrow from '../../assets/Arrow.svg'
+import { CardDescription } from './CardDescription'
+
+export const Card: React.FC<Props> = ({ newsData }) => {
+ return (
+ <Link to={`/news/${newsData.title}`} style={{ textDecoration: 'none', color: '#363636' }}>
+ <StyledBoxCard>
+ <img
+ src={newsData.urlToImage}
+ style={{
+ height: '217px',
+ width: '400px',
+ borderTopLeftRadius: '5px',
+ borderTopRightRadius: '5px',
+ }}
+ />
+ <Box
+ sx={{
+ height: '270px',
+ padding: '25px',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'start',
+ justifyItems: 'start',
+ }}
+ >
+ <PublishDate publishedAt={newsData.publishedAt} />
+ <CardDescription newsData={newsData} />
+
+ <StyledTypography
+ sx={{ marginTop: 'auto', alignSelf: 'start', fontWeight: 700, lineHeight: '24px' }}
+ >
+ Read More <img src={Arrow} alt='Arrow' />
+ </StyledTypography>
+ </Box>
+ </StyledBoxCard>
+ </Link>
+ )
+}
+
+type Props = {
+ newsData: News
+}

src/app/components/Card/CardDescription.tsx

@@ -0,0 +1,38 @@
+import { Box } from '@mui/system'
+import React from 'react'
+import { News } from '../../../types'
+import { StyledTypography } from '../../styles/styledComponents'
+
+export const CardDescription: React.FC<Props> = ({ newsData }) => {
+ return (
+ <Box>
+ <StyledTypography
+ sx={{ fontSize: '24px', fontWeight: '400', lineHeight: '29px', marginY: '20px' }}
+ >
+ {getTitle(newsData)}
+ </StyledTypography>
+
+ <StyledTypography sx={{ marginBottom: '20px', fontWeight: 400, lineHeight: '24px' }}>
+ {getDescription(newsData)}
+ </StyledTypography>
+ </Box>
+ )
+}
+
+const getTitle = (newsData: News) => {
+ if (newsData.title.length > 37) {
+ return `${newsData.title.split('-')[0].slice(0, 37)}...`
+ }
+ return newsData.title
+}
+
+const getDescription = (newsData: News) => {
+ if (newsData.description && newsData.description.length > 139) {
+ return `${newsData.description.slice(0, 139)}...`
+ }
+ return newsData.description
+}
+
+type Props = {
+ newsData: News
+}

src/app/components/Card/PublishDate.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { StyledTypography } from '../../styles/styledComponents'
+import CalendarIcon from '../../assets/CalendarIcon.svg'
+
+export const PublishDate: React.FC<Props> = ({ publishedAt }) => {
+ const fromatedPuglishDate = getFormatedDate(publishedAt)
+
+ return (
+ <StyledTypography sx={{ fontSize: '14px', fontWeight: '400' }}>
+ <img src={CalendarIcon} width='14px' /> {fromatedPuglishDate}
+ </StyledTypography>
+ )
+}
+
+const getOrdinalNum = (n: number) => {
+ return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '')
+}
+
+const getFormatedDate = (publishedAt: string) => {
+ const monthNames = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ]
+
+ const puglishDate = new Date(Date.parse(publishedAt))
+ return `${monthNames[puglishDate.getMonth()]} ${getOrdinalNum(
+ puglishDate.getDate(),
+ )}, ${puglishDate.getFullYear()}`
+}
+
+type Props = {
+ publishedAt: string
+}