From 81bd68380ec73ff765a5c89708705f4b39c5f477 Mon Sep 17 00:00:00 2001
From: Apoorv Mishra <apoorvmishra101092@gmail.com>
Date: Mon, 24 Jul 2023 20:59:32 +0530
Subject: [PATCH] feat: preview arbitrary url

---
 app/components/HoverPreview/Components.tsx    |  4 +++
 app/components/HoverPreview/HoverPreview.tsx  | 12 +++++--
 .../HoverPreview/HoverPreviewLink.tsx         | 31 +++++++++++++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 app/components/HoverPreview/HoverPreviewLink.tsx

diff --git a/app/components/HoverPreview/Components.tsx b/app/components/HoverPreview/Components.tsx
index c42856487..4856c64a1 100644
--- a/app/components/HoverPreview/Components.tsx
+++ b/app/components/HoverPreview/Components.tsx
@@ -27,6 +27,10 @@ export const Info: React.FC = ({ children }) => (
   </StyledText>
 );
 
+export const Description: React.FC = styled(StyledText)`
+  margin-top: 0.5em;
+`;
+
 export const DescriptionContainer = styled.div`
   margin-top: 0.5em;
 `;
diff --git a/app/components/HoverPreview/HoverPreview.tsx b/app/components/HoverPreview/HoverPreview.tsx
index fbed9ec93..da68fed4c 100644
--- a/app/components/HoverPreview/HoverPreview.tsx
+++ b/app/components/HoverPreview/HoverPreview.tsx
@@ -13,6 +13,7 @@ import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
 import HoverPreviewDocument from "./HoverPreviewDocument";
+import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
 
 const DELAY_OPEN = 300;
@@ -167,7 +168,14 @@ function HoverPreviewInternal({ element, onClose }: Props) {
                       description={data.description}
                       info={data.meta.info}
                     />
-                  ) : null}
+                  ) : (
+                    <HoverPreviewLink
+                      url={data.url}
+                      thumbnailUrl={data.thumbnailUrl}
+                      title={data.title}
+                      description={data.description}
+                    />
+                  )}
                 </CardContent>
               </Card>
               <Pointer offset={leftOffset + elemBounds.width / 2} />
@@ -196,7 +204,7 @@ const Animate = styled(m.div)`
 
 const CardContent = styled.div`
   overflow: hidden;
-  max-height: 20em;
+  max-height: 20.5em;
   user-select: none;
 `;
 
diff --git a/app/components/HoverPreview/HoverPreviewLink.tsx b/app/components/HoverPreview/HoverPreviewLink.tsx
new file mode 100644
index 000000000..d8db1fe42
--- /dev/null
+++ b/app/components/HoverPreview/HoverPreviewLink.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import Img from "@shared/editor/components/Img";
+import Flex from "~/components/Flex";
+import { Preview, Title, Description } from "./Components";
+
+type Props = {
+  /** Link url */
+  url: string;
+  /** Title for the preview card */
+  title: string;
+  /** Url for thumbnail served by the link provider*/
+  thumbnailUrl: string;
+  /** Some description about the link provider */
+  description: string;
+};
+
+function HoverPreviewLink({ url, thumbnailUrl, title, description }: Props) {
+  return (
+    <Preview to={url}>
+      <Flex gap={12} column>
+        <Img src={thumbnailUrl} alt={""} />
+        <Flex column>
+          <Title>{title}</Title>
+          <Description>{description}</Description>
+        </Flex>
+      </Flex>
+    </Preview>
+  );
+}
+
+export default HoverPreviewLink;