refactor: update ArticleItem component to use FeedItem type and improve structure

Author: medyo

src/features/cards/components/aiCard/ArticleItem.tsx

@@ -1,13 +1,12 @@
-import { BiCommentDetail } from 'react-icons/bi'
 import { GoDotFill } from 'react-icons/go'
 import { MdAccessTime } from 'react-icons/md'
 import { CardItemWithActions, CardLink } from 'src/components/Elements'
 import { Attributes } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
-import { Article, BaseItemPropsType } from 'src/types'
+import { BaseItemPropsType, FeedItem } from 'src/types'
 import { format } from 'timeago.js'
 
-const ArticleItem = (props: BaseItemPropsType<Article>) => {
+export const ArticleItem = (props: BaseItemPropsType<FeedItem>) => {
   const { item, index, analyticsTag } = props
   const { listingMode } = useUserPreferences()
 
@@ -19,23 +18,22 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
       key={index}
       cardItem={
         <>
-          <p className="rowTitle">
+          <div className="rowTitle">
             <CardLink
               link={item.url}
               className="titleWithCover"
               analyticsAttributes={{
-                [Attributes.POINTS]: item.reactions,
                 [Attributes.TRIGERED_FROM]: 'card',
                 [Attributes.TITLE]: item.title,
                 [Attributes.LINK]: item.url,
                 [Attributes.SOURCE]: analyticsTag,
               }}>
-              {item.image_url && listingMode === 'normal' && (
-                <img src={item.image_url} className="rowCover" alt="" />
+              {item.image && listingMode === 'normal' && (
+                <img src={item.image} className="rowCover" alt="" />
               )}
               <span className="subTitle">{item.title}</span>
             </CardLink>
-          </p>
+          </div>
           {listingMode === 'compact' && (
             <div className="rowDetails">
               <span className="rowItem capitalize">
@@ -48,12 +46,8 @@ const ArticleItem = (props: BaseItemPropsType<Article>) => {
               <span className="rowItem capitalize">
                 <GoDotFill className="rowItemIcon" /> {item.source}
               </span>
-              <span className="rowItem" title={new Date(item.published_at).toUTCString()}>
-                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.published_at))}
-              </span>
-              <span className="rowItem">
-                <BiCommentDetail className={'rowTitleIcon'} />
-                {item.comments} comments
+              <span className="rowItem" title={new Date(item.date).toUTCString()}>
+                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.date))}
               </span>
             </div>
           )}