may share story

enjoy/src/renderer/components/posts/index.ts

@@ -4,3 +4,4 @@ export * from "./post-card";
 export * from "./post-actions";
 export * from "./post-medium";
 export * from "./post-recording";
+export * from "./post-story";

enjoy/src/renderer/components/posts/post-card.tsx

@@ -1,10 +1,10 @@
-import { PostRecording, PostActions, PostMedium } from "@renderer/components";
 import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  Button,
-} from "@renderer/components/ui";
+  PostRecording,
+  PostActions,
+  PostMedium,
+  PostStory,
+} from "@renderer/components";
+import { Avatar, AvatarImage, AvatarFallback } from "@renderer/components/ui";
 import { formatDateTime } from "@renderer/lib/utils";
 import { t } from "i18next";
 import Markdown from "react-markdown";
@@ -55,6 +55,15 @@ export const PostCard = (props: { post: PostType }) => {
         </>
       )}
 
+      {post.targetType == "Story" && (
+        <>
+          <div className="text-xs text-muted-foreground">
+            {t("sharedStory")}
+          </div>
+          <PostStory story={post.target as StoryType} />
+        </>
+      )}
+
       <PostActions post={post} />
     </div>
   );

enjoy/src/renderer/components/posts/post-story.tsx

@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+
+export const PostStory = (props: { story: StoryType }) => {
+  const { story } = props;
+  return (
+    <Link className="block" to={`/stories/${story.id}`}>
+      <div className="rounded-lg flex items-start border">
+        <div className="aspect-square h-36 bg-muted">
+          <img
+            src={story.metadata?.image}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="px-4 py-2">
+          <div className="line-clamp-2 text-lg font-semibold mb-2">
+            {story.metadata?.title}
+          </div>
+          <div className="line-clamp-3 text-sm text-muted-foreground">
+            {story.metadata?.description}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};