Merge pull request #42 from NekoAria/main

electh · Mar 24, 2024 · b23957d · b23957d
2 parents 3cb2503 + c4178be
commit b23957d
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 171 deletions.
diff --git a/src/components/Article/ArticleCard.jsx b/src/components/Article/ArticleCard.jsx
@@ -7,6 +7,32 @@ import { generateRelativeTime } from "../../utils/Date";
 import "./ArticleCard.css";
 import ImageWithLazyLoading from "./ImageWithLazyLoading";
 
+const FeedIcon = ({ url }) => (
+  <img
+    className="feed-icon"
+    src={`https://icons.duckduckgo.com/ip3/${new URL(url).hostname}.ico`}
+    alt="Icon"
+  />
+);
+
+const ArticleCardContent = ({ entry, showFeedIcon }) => (
+  <div>
+    <Typography.Text
+      className={entry.status === "unread" ? "title-unread" : "title-read"}
+    >
+      {entry.title}
+    </Typography.Text>
+    <Typography.Text className="article-info">
+      <br />
+      {showFeedIcon && <FeedIcon url={entry.feed.site_url} />}
+      {entry.feed.title}
+      <br />
+      {generateRelativeTime(entry.published_at)}
+    </Typography.Text>
+    {entry.starred && <IconStarFill className="icon-starred" />}
+  </div>
+);
+
 const ArticleCard = ({ entry, handleEntryClick }) => {
   const activeContent = useStore((state) => state.activeContent);
   const showFeedIcon = useStore((state) => state.showFeedIcon);
@@ -27,32 +53,6 @@ const ArticleCard = ({ entry, handleEntryClick }) => {
     </div>
   ) : null;
 
-  const FeedIcon = ({ url }) => (
-    <img
-      className="feed-icon"
-      src={`https://icons.duckduckgo.com/ip3/${new URL(url).hostname}.ico`}
-      alt="Icon"
-    />
-  );
-
-  const ArticleCardContent = ({ entry, showFeedIcon }) => (
-    <div>
-      <Typography.Text
-        className={entry.status === "unread" ? "title-unread" : "title-read"}
-      >
-        {entry.title}
-      </Typography.Text>
-      <Typography.Text className="article-info">
-        <br />
-        {showFeedIcon && <FeedIcon url={entry.feed.site_url} />}
-        {entry.feed.title}
-        <br />
-        {generateRelativeTime(entry.published_at)}
-      </Typography.Text>
-      {entry.starred && <IconStarFill className="icon-starred" />}
-    </div>
-  );
-
   return (
     <div className="article-card" key={entry.id}>
       <Card

diff --git a/src/components/Article/ArticleCardMini.jsx b/src/components/Article/ArticleCardMini.jsx
@@ -7,6 +7,51 @@ import { generateRelativeTime } from "../../utils/Date";
 import "./ArticleCard.css";
 import ImageWithLazyLoading from "./ImageWithLazyLoading";
 
+const FeedIcon = ({ url }) => (
+  <img
+    className="feed-icon-mini"
+    src={`https://icons.duckduckgo.com/ip3/${new URL(url).hostname}.ico`}
+    alt="Icon"
+  />
+);
+
+const ArticleMiniCardContent = ({ entry, showFeedIcon }) => (
+  <div
+    style={{
+      display: "flex",
+      paddingLeft: showFeedIcon ? "22px" : "0",
+    }}
+  >
+    <div style={{ marginRight: "10px", flex: 1 }}>
+      <Typography.Text
+        className={entry.status === "unread" ? "title-unread" : "title-read"}
+      >
+        {entry.title}
+      </Typography.Text>
+      <Typography.Text className="article-info">
+        <br />
+        {showFeedIcon && <FeedIcon url={entry.feed.site_url} />}
+        {entry.feed.title}
+        <br />
+        {generateRelativeTime(entry.published_at)}
+      </Typography.Text>
+      {entry.starred && <IconStarFill className="icon-starred" />}
+    </div>
+    {entry.imgSrc && (
+      <div className="thumbnail">
+        <ImageWithLazyLoading
+          width={"100px"}
+          height="100px"
+          alt={entry.id}
+          src={entry.imgSrc}
+          status={entry.status}
+          borderRadius="4px"
+        />
+      </div>
+    )}
+  </div>
+);
+
 const ArticleCardMini = ({ entry, handleEntryClick }) => {
   const activeContent = useStore((state) => state.activeContent);
   const showFeedIcon = useStore((state) => state.showFeedIcon);
@@ -15,51 +60,6 @@ const ArticleCardMini = ({ entry, handleEntryClick }) => {
 
   const entryClickHandler = () => handleEntryClick(entry);
 
-  const FeedIcon = ({ url }) => (
-    <img
-      className="feed-icon-mini"
-      src={`https://icons.duckduckgo.com/ip3/${new URL(url).hostname}.ico`}
-      alt="Icon"
-    />
-  );
-
-  const ArticleMiniCardContent = ({ entry, showFeedIcon }) => (
-    <div
-      style={{
-        display: "flex",
-        paddingLeft: showFeedIcon ? "22px" : "0",
-      }}
-    >
-      <div style={{ marginRight: "10px", flex: 1 }}>
-        <Typography.Text
-          className={entry.status === "unread" ? "title-unread" : "title-read"}
-        >
-          {entry.title}
-        </Typography.Text>
-        <Typography.Text className="article-info">
-          <br />
-          {showFeedIcon && <FeedIcon url={entry.feed.site_url} />}
-          {entry.feed.title}
-          <br />
-          {generateRelativeTime(entry.published_at)}
-        </Typography.Text>
-        {entry.starred && <IconStarFill className="icon-starred" />}
-      </div>
-      {entry.imgSrc && (
-        <div className="thumbnail">
-          <ImageWithLazyLoading
-            width={"100px"}
-            height="100px"
-            alt={entry.id}
-            src={entry.imgSrc}
-            status={entry.status}
-            borderRadius="4px"
-          />
-        </div>
-      )}
-    </div>
-  );
-
   return (
     <div className="article-card" key={entry.id}>
       <Card