feat: display event data in posts (#6041)

Author: bigint

apps/web/src/components/Post/PostBody.tsx

@@ -7,6 +7,7 @@ import { memo } from "react";
 import Quote from "@/components/Shared/Embed/Quote";
 import Markup from "@/components/Shared/Markup";
 import Attachments from "@/components/Shared/Post/Attachments";
+import Event from "@/components/Shared/Post/Event";
 import Oembed from "@/components/Shared/Post/Oembed";
 import PostLink from "@/components/Shared/Post/PostLink";
 import Video from "@/components/Shared/Post/Video";
@@ -51,6 +52,7 @@ const PostBody = ({
   const showLive = metadata.__typename === "LivestreamMetadata";
   // Show attachments if it's there
   const showAttachments = filteredAttachments.length > 0 || filteredAsset;
+  const showEvent = metadata.__typename === "EventMetadata";
   // Show sharing link
   const showSharingLink = metadata.__typename === "LinkMetadata";
   const showOembed =
@@ -90,6 +92,7 @@ const PostBody = ({
       ) : null}
       {showOembed ? <Oembed url={urls[0]} /> : null}
       {showSharingLink ? <Oembed url={metadata.sharingLink} /> : null}
+      {showEvent ? <Event metadata={metadata} /> : null}
       {targetPost.quoteOf ? <Quote post={targetPost.quoteOf} /> : null}
     </div>
   );

apps/web/src/components/Shared/Post/Event.tsx

@@ -0,0 +1,42 @@
+import type { EventMetadataFragment } from "@hey/indexer";
+import dayjs from "dayjs";
+import { Card, H6 } from "@/components/Shared/UI";
+import stopEventPropagation from "@/helpers/stopEventPropagation";
+
+interface EventProps {
+  metadata: EventMetadataFragment;
+}
+
+const Event = ({ metadata }: EventProps) => {
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    stopEventPropagation(event);
+  };
+
+  return (
+    <Card className="mt-3 space-y-1 p-3" forceRounded>
+      {metadata.title ? <H6>{metadata.title}</H6> : null}
+      <div className="text-gray-500 text-sm dark:text-gray-400">
+        {dayjs(metadata.startsAt).format("MMM D, YYYY h:mm A")} -{" "}
+        {dayjs(metadata.endsAt).format("MMM D, YYYY h:mm A")}
+      </div>
+      {metadata.location?.physical ? (
+        <div className="text-gray-500 text-sm dark:text-gray-400">
+          {metadata.location.physical}
+        </div>
+      ) : null}
+      {metadata.location?.virtual ? (
+        <a
+          className="block text-indigo-500 text-sm"
+          href={metadata.location.virtual}
+          onClick={handleClick}
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          {metadata.location.virtual}
+        </a>
+      ) : null}
+    </Card>
+  );
+};
+
+export default Event;