feat: entry share component

RSSNext · May 16, 2024 · 95ad3a7 · 95ad3a7
1 parent 5eb0716
commit 95ad3a7
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 48 deletions.
diff --git a/src/renderer/src/components/entry-content.tsx b/src/renderer/src/components/entry-content.tsx
diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
@@ -0,0 +1,51 @@
+import { parseHtml } from "@renderer/lib/parse-html"
+import { ActivedEntry } from "@renderer/lib/types"
+import { useEffect, useState } from "react"
+import { m } from "framer-motion"
+import { EntryShare } from "./share"
+
+export function EntryContent({ entry }: { entry: ActivedEntry }) {
+  const [content, setContent] = useState<JSX.Element>()
+
+  useEffect(() => {
+    if (entry?.content) {
+      parseHtml(entry?.content).then((parsed) => {
+        setContent(parsed.content)
+      })
+    }
+  }, [entry?.content])
+
+  return (
+    <>
+      <EntryShare url={entry?.url} />
+      <m.div
+        className="px-5 py-5 overflow-y-auto h-full"
+        initial={{ opacity: 0.01, y: 100 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0.01, y: -100 }}
+        key={entry?.id}
+      >
+        <div>
+          <a
+            href={entry?.url}
+            target="_blank"
+            className="block hover:bg-zinc-100 max-w-[598px] mx-auto p-6 rounded-md transition-colors cursor-pointer"
+          >
+            <div className="text-3xl font-bold select-text break-words">
+              {entry?.title}
+            </div>
+            <div className="mt-2 text-[13px] text-zinc-500 font-medium">
+              {entry?.feeds?.title}
+            </div>
+            <div className="text-[13px] text-zinc-500">
+              {entry?.publishedAt && new Date(entry?.publishedAt).toUTCString()}
+            </div>
+          </a>
+          <div className="max-w-[550px] mx-auto mt-10 mb-32 prose text-[15px] prose-zinc select-text cursor-auto">
+            {content}
+          </div>
+        </div>
+      </m.div>
+    </>
+  )
+}
diff --git a/src/renderer/src/components/entry-content/share.tsx b/src/renderer/src/components/entry-content/share.tsx
@@ -0,0 +1,40 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
+import { useCallback } from "react"
+import { useToast } from "@renderer/components/ui/use-toast"
+
+export function EntryShare({ url }: { url?: string }) {
+  if (!url) return null
+
+  const { toast } = useToast()
+
+  const copyLink = useCallback(() => {
+    navigator.clipboard.writeText(url)
+    toast({
+      duration: 1000,
+      description: "Link copied to clipboard.",
+    })
+  }, [url])
+
+  return (
+    <div className="px-5 h-14 flex items-center text-lg justify-end text-zinc-500 gap-5">
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger className="flex items-center my-2">
+            <i
+              className="i-mingcute-link-line cursor-pointer no-drag-region"
+              onClick={() => copyLink()}
+            />
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Copy Link</TooltipContent>
+        </Tooltip>
+        <i className="i-mingcute-world-2-line cursor-pointer no-drag-region" />
+        <i className="i-mingcute-share-2-line cursor-pointer no-drag-region" />
+      </TooltipProvider>
+    </div>
+  )
+}
diff --git a/src/renderer/src/pages/(main)/index.tsx b/src/renderer/src/pages/(main)/index.tsx
@@ -38,7 +38,7 @@ export function Component() {
       <AnimatePresence>
         {!(activedList && wideMode.includes(activedList.view)) &&
           activedEntry && (
-            <div className="flex-1 pt-10">
+            <div className="flex-1">
               <EntryContent entry={activedEntry} />
             </div>
           )}