feat: site icon component

RSSNext · Apr 16, 2024 · bbdc15a · bbdc15a
1 parent 5448994
commit bbdc15a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
@@ -1,4 +1,5 @@
 import dayjs from '@renderer/lib/dayjs'
+import { SiteIcon } from '../site-icon'
 
 export function ArticleItem({
   entry,
@@ -7,10 +8,7 @@ export function ArticleItem({
 }) {
   return (
     <div className='flex my-5 px-2 py-3'>
-      <img
-        src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
-        className="w-5 h-5 mr-2 rounded-sm shrink-0"
-      />
+      <SiteIcon url={entry.feed.site_url} />
       <div className="line-clamp-5 text-sm flex-1 -mt-0.5 leading-tight">
         <div className="text-zinc-500 text-[13px]">
           {dayjs

diff --git a/src/renderer/src/components/entry-column/social-media-item.tsx b/src/renderer/src/components/entry-column/social-media-item.tsx
@@ -1,4 +1,5 @@
 import dayjs from '@renderer/lib/dayjs'
+import { SiteIcon } from '@renderer/components/site-icon'
 
 export function SocialMediaItem({
   entry,
@@ -7,10 +8,7 @@ export function SocialMediaItem({
 }) {
   return (
     <div className='flex my-5 px-2 py-3'>
-      <img
-        src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
-        className="w-5 h-5 mr-2 rounded-sm shrink-0"
-      />
+      <SiteIcon url={entry.feed.site_url} />
       <div>
         <div className="line-clamp-5 text-sm flex-1 -mt-0.5">
           <div className='space-x-1'>

diff --git a/src/renderer/src/components/feed-column/list.tsx b/src/renderer/src/components/feed-column/list.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { levels } from '@renderer/lib/constants'
 import { ActivedList } from '@renderer/lib/types'
 import { cn } from '@renderer/lib/utils'
+import { SiteIcon } from '../site-icon'
 
 export function FeedList({
   type,
@@ -120,10 +121,7 @@ function FeedCategory({
                 }}
               >
                 <div className='flex items-center min-w-0'>
-                  <img
-                    src={`https://icons.duckduckgo.com/ip3/${new URL(feed.site_url).host}.ico`}
-                    className="w-4 h-4 mr-2 rounded-sm"
-                  />
+                  <SiteIcon url={feed.site_url} className="w-4 h-4" />
                   <div className='truncate'>{feed.title}</div>
                 </div>
                 {!!feed.unread && <div className='text-xs text-zinc-500 ml-2'>{feed.unread}</div>}

diff --git a/src/renderer/src/components/site-icon.tsx b/src/renderer/src/components/site-icon.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@renderer/lib/utils";
+
+export function SiteIcon({
+  url,
+  className,
+}: {
+  url: string,
+  className?: string,
+}) {
+  return (
+    <img
+      src={`https://icons.duckduckgo.com/ip3/${new URL(url).host}.ico`}
+      className={cn("w-5 h-5 mr-2 rounded-sm shrink-0", className)}
+    />
+  )
+}