feat(LinkPreview): add support visit link from preview

filecoin-project · Aug 5, 2021 · 563403d · 563403d
1 parent 62d4dd8
commit 563403d
Showing 1 changed file with 44 additions and 29 deletions.
diff --git a/components/core/ObjectPreview/LinkObjectPreview.js b/components/core/ObjectPreview/LinkObjectPreview.js
@@ -1,59 +1,74 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
-import * as Constants from "~/common/constants";
-import * as Typography from "~/components/system/components/Typography";
+import * as SVG from "~/common/svg";
 
 import { P3 } from "~/components/system/components/Typography";
 import { css } from "@emotion/react";
-import { Logo } from "~/common/logo";
 
 import ObjectPreviewPrimitive from "~/components/core/ObjectPreview/ObjectPreviewPrimitive";
+import LinkPlaceholder from "~/components/core/ObjectPreview/placeholders/Link";
 
 const STYLES_SOURCE_LOGO = css`
-  height: 14px;
-  width: 14px;
+  height: 12px;
+  width: 12px;
   border-radius: 4px;
 `;
 
-const STYLES_EMPTY_CONTAINER = css`
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+const STYLES_PLACEHOLDER_CONTAINER = css`
   height: 100%;
-  width: 100%;
+  ${Styles.CONTAINER_CENTERED}
 `;
 
-export default function LinkObjectPreview({ file, ...props }) {
+const STYLES_TAG_CONTAINER = (theme) => css`
+  color: ${theme.semantic.textGrayLight};
+  svg {
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  :hover svg {
+    opacity: 1;
+  }
+  ${Styles.HORIZONTAL_CONTAINER_CENTERED}
+`;
+
+export default function LinkObjectPreview({ file, ratio, ...props }) {
   const {
     data: { link },
   } = file;
 
   const tag = (
-    <div css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ transform: "translateY(3px)" }}>
-      {link.logo && (
-        <img
-          src={link.logo}
-          alt="Link source logo"
-          style={{ marginRight: 4 }}
-          css={STYLES_SOURCE_LOGO}
-        />
-      )}
-      <P3 as="small" color="textGray" nbrOflines={1}>
-        {link.source}
-      </P3>
-    </div>
+    <a
+      css={Styles.LINK}
+      href={file.url}
+      target="_blank"
+      rel="noreferrer"
+      style={{ position: "relative", zIndex: 2 }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div css={STYLES_TAG_CONTAINER}>
+        {link.logo && (
+          <img
+            src={link.logo}
+            alt="Link source logo"
+            style={{ marginRight: 4 }}
+            css={STYLES_SOURCE_LOGO}
+          />
+        )}
+        <P3 as="small" color="textGray" nbrOflines={1}>
+          {link.source}
+        </P3>
+        <SVG.ExternalLink height={12} width={12} style={{ marginLeft: 4 }} />
+      </div>
+    </a>
   );
 
   return (
     <ObjectPreviewPrimitive file={file} tag={tag} {...props}>
       {link.image ? (
         <img src={link.image} alt="Link preview" css={Styles.IMAGE_FILL} />
       ) : (
-        <div css={STYLES_EMPTY_CONTAINER}>
-          <Logo style={{ height: 24, marginBottom: 8, color: Constants.system.grayLight2 }} />
-          <Typography.P2 color="grayLight2">No image found</Typography.P2>
+        <div css={STYLES_PLACEHOLDER_CONTAINER}>
+          <LinkPlaceholder ratio={ratio} />
         </div>
       )}
     </ObjectPreviewPrimitive>