feat: add FeedItemSource component for consistent feed item source rendering

Author: medyo

src/features/feed/components/FeedItemSource.tsx

@@ -0,0 +1,42 @@
+import { FaDev, FaMediumM, FaReddit } from 'react-icons/fa'
+import { GoDotFill } from 'react-icons/go'
+import { SiProducthunt } from 'react-icons/si'
+import HashNodeIcon from 'src/assets/icon_hashnode.png'
+const FeedItemKV: {
+  [key: string]: React.ReactNode
+} = {
+  producthunt: (
+    <>
+      <SiProducthunt color="#D65736" /> Product hunt
+    </>
+  ),
+  reddit: (
+    <>
+      <FaReddit color="#FF4500" /> Reddit
+    </>
+  ),
+  medium: (
+    <>
+      <FaMediumM className="blockHeaderWhite" /> Medium
+    </>
+  ),
+  devto: (
+    <>
+      <FaDev className="blockHeaderWhite" /> Dev.to
+    </>
+  ),
+  hashnode: (
+    <>
+      <img alt="hn" className="feedItemSource" src={HashNodeIcon} /> Hashnode
+    </>
+  ),
+}
+export const FeedItemSource = ({ source }: { source: string }) => {
+  return (
+    FeedItemKV[source] || (
+      <>
+        <GoDotFill className="rowItemIcon" /> {source}
+      </>
+    )
+  )
+}

src/features/feed/components/feed.css

@@ -20,6 +20,10 @@
     border: 1px solid var(--card-border-color);
     border-radius: 10px;
   }
+  .feedItemSource {
+    width: 12px;
+    height: 12px;
+  }
 
   .loading {
     display: flex;

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

@@ -1,10 +1,10 @@
-import { GoDotFill } from 'react-icons/go'
 import { MdAccessTime } from 'react-icons/md'
 import { CardItemWithActions } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 import { ArticleFeedItemData, BaseItemPropsType } from 'src/types'
 import { format } from 'timeago.js'
 import { FeedItemHeader } from '../FeedItemHeader'
+import { FeedItemSource } from '../FeedItemSource'
 
 export const ArticleFeedItem = (props: BaseItemPropsType<ArticleFeedItemData>) => {
   const { item, index, analyticsTag, className } = props
@@ -22,15 +22,15 @@ export const ArticleFeedItem = (props: BaseItemPropsType<ArticleFeedItemData>) =
             <FeedItemHeader {...item} />
             {listingMode === 'compact' && (
               <div className="rowDetails">
-                <span className="rowItem capitalize">
-                  <GoDotFill className="rowItemIcon" /> {item.source}
+                <span className="rowItem capitalize verticalAligned">
+                  <FeedItemSource source={item.source} />
                 </span>
               </div>
             )}
             {listingMode === 'normal' && (
               <div className="rowDetails">
-                <span className="rowItem capitalize">
-                  <GoDotFill className="rowItemIcon" /> {item.source}
+                <span className="rowItem capitalize verticalAligned">
+                  <FeedItemSource source={item.source} />
                 </span>
                 <span className="rowItem" title={new Date(item.date).toUTCString()}>
                   <MdAccessTime className="rowItemIcon" /> {format(new Date(item.date))}

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

@@ -4,6 +4,7 @@ import { CardItemWithActions } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
 import { BaseItemPropsType, ProductHuntFeedItemData } from 'src/types'
 import { FeedItemHeader } from '../FeedItemHeader'
+import { FeedItemSource } from '../FeedItemSource'
 
 export const ProductFeedItem = (props: BaseItemPropsType<ProductHuntFeedItemData>) => {
   const { item, index, analyticsTag, className } = props
@@ -32,7 +33,7 @@ export const ProductFeedItem = (props: BaseItemPropsType<ProductHuntFeedItemData
             {listingMode === 'normal' && (
               <div className="rowDetails">
                 <span className="rowItem verticalAligned">
-                  <SiProducthunt color="#D65736" /> Product Hunt
+                  <FeedItemSource source={'producthunt'} />
                 </span>
                 <span className="rowItem verticalAligned">
                   <VscTriangleUp className="rowItemIcon" /> {item.votes_count || 0} upvotes

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

@@ -4,6 +4,7 @@ import { CardItemWithActions, ColoredLanguagesBadge } from 'src/components/Eleme
 import { useUserPreferences } from 'src/stores/preferences'
 import { BaseItemPropsType, GithubFeedItemData } from 'src/types'
 import { FeedItemHeader } from '../FeedItemHeader'
+import { FeedItemSource } from '../FeedItemSource'
 
 function numberWithCommas(x: number | string) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
@@ -47,7 +48,7 @@ export const RepoFeedItem = (props: BaseItemPropsType<GithubFeedItemData>) => {
             {listingMode === 'normal' && (
               <div className="rowDetails">
                 <span className="rowItem verticalAligned">
-                  <SiGithub className="blockHeaderWhite" /> Github
+                  <FeedItemSource source={'github'} />
                 </span>
                 {item.stars && (
                   <span className="rowItem">