Added link, removed mock story

NASA-IMPACT · Aug 10, 2023 · 6662edb · 6662edb
1 parent 89a6b3d
commit 6662edb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 46 deletions.
diff --git a/app/scripts/components/common/blocks/embed.tsx b/app/scripts/components/common/blocks/embed.tsx
@@ -29,7 +29,7 @@ export default function Embed({ src, height = 800 }: EmbedProps) {
 
   return (
     <EmbedWrapper>
-      <BrowserFrame>
+      <BrowserFrame link={src}>
         <IframeWrapper src={src} height={height} />
       </BrowserFrame>
     </EmbedWrapper>

diff --git a/app/scripts/styles/browser-frame.tsx b/app/scripts/styles/browser-frame.tsx
@@ -1,15 +1,26 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
+import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
 
-function BrowserFrameComponent(props: { children: ReactNode }) {
-  const { children, ...rest } = props;
+function BrowserFrameComponent(props: { children: ReactNode; link?: string }) {
+  const { children, link, ...rest } = props;
   return (
     <div {...rest}>
       <div className='controls'>
-        <span />
-        <span />
-        <span />
+        <div className='buttons'>
+          <span />
+          <span />
+          <span />
+        </div>
+        {link && (
+          <div className='link'>
+            <a target='_blank' rel='noreferrer' href={link}>
+              Open in a new browser tab {' '}
+              <CollecticonExpandTopRight size='small' />
+            </a>
+          </div>
+        )}
       </div>
       <div>{children}</div>
     </div>
@@ -25,17 +36,28 @@ const BrowserFrame = styled(BrowserFrameComponent)`
   border-radius: ${themeVal('shape.rounded')};
 
   .controls {
+    width: 100%;
     display: flex;
-    gap: 0.5rem;
-    padding: 0.625rem 0.5rem;
+    align-items: center;
+    justify-content: space-between;
 
-    span {
-      display: block;
-      width: 0.75rem;
-      height: 0.75rem;
-      content: '';
-      border-radius: ${themeVal('shape.ellipsoid')};
-      background: ${themeVal('color.base-300')};
+    .buttons {
+      gap: 0.5rem;
+      padding: 0.625rem 0.5rem;
+      display: flex;
+      span {
+        display: block;
+        width: 0.75rem;
+        height: 0.75rem;
+        content: '';
+        border-radius: ${themeVal('shape.ellipsoid')};
+        background: ${themeVal('color.base-300')};
+      }
+    }
+
+    .link {
+      padding-right: .625rem;
+      font-size: 0.875rem;
     }
   }
 `;

diff --git a/mock/stories/fire-cover.png b/mock/stories/fire-cover.png
diff --git a/mock/stories/fires.stories.mdx b/mock/stories/fires.stories.mdx