feat: preview arbitrary url

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;
 `;

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;
 `;
 

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;