refactor: update FeedItemHeader to accept individual props and adjust usage in feed item components

Author: medyo

src/features/feed/components/FeedItemHeader.tsx

@@ -1,27 +1,35 @@
 import { CardLink } from 'src/components/Elements'
 import { Attributes } from 'src/lib/analytics'
-import { FeedItem as FeedItemType } from 'src/types'
 import { FeedItemImage } from './FeedItemImage'
 
 type FeedItemHeaderProps = {
-  item: FeedItemType
+  title: string
+  image: string
+  url: string
+  source: string
   fallbackImage?: string | React.ReactNode
 }
 
-export const FeedItemHeader = ({ item, fallbackImage }: FeedItemHeaderProps) => {
+export const FeedItemHeader = ({
+  title,
+  url,
+  source,
+  image,
+  fallbackImage,
+}: FeedItemHeaderProps) => {
   return (
     <div className="rowTitle">
       <CardLink
-        link={item.url}
+        link={url}
         className="titleWithCover"
         analyticsAttributes={{
           [Attributes.TRIGERED_FROM]: 'card',
-          [Attributes.TITLE]: item.title,
-          [Attributes.LINK]: item.url,
-          [Attributes.SOURCE]: item.source,
+          [Attributes.TITLE]: title,
+          [Attributes.LINK]: url,
+          [Attributes.SOURCE]: source,
         }}>
-        <FeedItemImage imageUrl={item.image} fallbackImage={fallbackImage} />
-        <span className="subTitle">{item.title}</span>
+        <FeedItemImage imageUrl={image} fallbackImage={fallbackImage} />
+        <span className="subTitle">{title}</span>
       </CardLink>
     </div>
   )

src/features/feed/components/feedItems/ArticleFeedItem.tsx

@@ -19,7 +19,7 @@ export const ArticleFeedItem = (props: BaseItemPropsType<ArticleFeedItemData>) =
         key={index}
         cardItem={
           <>
-            <FeedItemHeader item={item} />
+            <FeedItemHeader {...item} />
             {listingMode === 'compact' && (
               <div className="rowDetails">
                 <span className="rowItem capitalize">

src/features/feed/components/feedItems/ProductFeedItem.tsx

@@ -18,7 +18,7 @@ export const ProductFeedItem = (props: BaseItemPropsType<ProductHuntFeedItemData
         key={index}
         cardItem={
           <>
-            <FeedItemHeader item={item} />
+            <FeedItemHeader {...item} source="producthunt" />
             <div className="rowDetails">
               <span className="rowItem">{item.tagline}</span>
             </div>

src/features/feed/components/feedItems/RepoFeedItem.tsx

@@ -23,7 +23,8 @@ export const RepoFeedItem = (props: BaseItemPropsType<GithubFeedItemData>) => {
         cardItem={
           <>
             <FeedItemHeader
-              item={item}
+              {...item}
+              source="github"
               fallbackImage={
                 <div className="rowCover repo">
                   <SiGithub size={40} />