🚧 Extract SandboxOptionsMenu

Extracted menu to it's own component so that it can be used in both ShowcaseCard and FeaturedSandbox

Author: Saeris

packages/app/src/app/pages/Profile/FeaturedSandbox/FeaturedSandbox.tsx

@@ -1,18 +1,20 @@
-import React from "react"
-import { Container, HeroImage } from "./elements"
+import React from 'react';
+// import { SandboxOptionsMenu } from "../SandboxOptionsMenu";
+import { Container, HeroImage } from './elements';
 
 interface IFeaturedSandboxProps {
-  heroImage: string
+  heroImage: string;
 }
 
 export const FeaturedSandbox: React.FC<IFeaturedSandboxProps> = ({
-  heroImage
-}) => { // eslint-disable-line
-	// TODO:
-	// - Make Hero Image a Live Sandbox Preview?
+  heroImage,
+}) => {
+  // eslint-disable-line
+  // TODO:
+  // - Make Hero Image a Live Sandbox Preview?
   return (
     <Container>
       <HeroImage src={heroImage} />
     </Container>
-  )
-}
+  );
+};

packages/app/src/app/pages/Profile/SandboxOptionsMenu/SandboxOptionsMenu.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MdMoreHoriz from 'react-icons/md/more-horiz';
+import { MenuItem, Separator } from '@codesandbox/common/lib/components';
+import { Menu } from './elements';
+
+interface ISandboxOptionsMenuProps {}
+
+// eslint-disable-next-line
+export const SandboxOptionsMenu: React.FC<ISandboxOptionsMenuProps> = () => {
+  // TODO:
+  // - Add Handlers for each Menu Item
+
+  return (
+    <Menu label={<MdMoreHoriz />} aria-label="Sandbox Options">
+      <MenuItem>Pin Sandbox</MenuItem>
+      <Separator />
+      <MenuItem>Open Sandbox</MenuItem>
+      <Separator />
+      <MenuItem>Fork Sandbox</MenuItem>
+      <Separator />
+      <MenuItem disabled>Hide Sandbox</MenuItem>
+      <Separator />
+      <MenuItem danger>Move to Trash</MenuItem>
+    </Menu>
+  );
+};

packages/app/src/app/pages/Profile/SandboxOptionsMenu/elements.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Menu as BaseMenu } from '@codesandbox/common/lib/components';
+
+export const Menu = styled(BaseMenu)`
+  flex: 0 0 auto;
+
+  svg {
+    color: #757575;
+    font-size: 32px;
+
+    &:hover,
+    &:focus {
+      color: #fff;
+    }
+  }
+`;

packages/app/src/app/pages/Profile/SandboxOptionsMenu/index.ts

@@ -0,0 +1 @@
+export { SandboxOptionsMenu } from './SandboxOptionsMenu';

packages/app/src/app/pages/Profile/ShowcaseCard/ShowcaseCard.tsx

@@ -3,16 +3,15 @@ import { LightIcons } from '@codesandbox/template-icons';
 import GoHeart from 'react-icons/go/heart';
 import GoEye from 'react-icons/go/eye';
 import GoRepoForked from 'react-icons/go/repo-forked';
-import MdMoreHoriz from 'react-icons/md/more-horiz';
-import { Link, MenuItem, Separator } from '@codesandbox/common/lib/components';
+import { Link } from '@codesandbox/common/lib/components';
+import { SandboxOptionsMenu } from '../SandboxOptionsMenu';
 import { abbreviateNumber } from './abbreviateNumber';
 import {
   Container,
   Preview,
   SandboxInfo,
   TitleRow,
   Title,
-  Menu,
   Description,
   Statistics,
   Action,
@@ -48,7 +47,6 @@ export const ShowcaseCard: React.FC<IShowcaseCardProps> = ({
 }) => {
   // TODO:
   // - Add handler for Liking/Unliking the sandbox.
-  // - Add handles for all options menu buttons (Pin, Open, Fork, Hide, Trash)
   return (
     <Container>
       <Link to={`/s/${id}`}>
@@ -57,17 +55,7 @@ export const ShowcaseCard: React.FC<IShowcaseCardProps> = ({
       <SandboxInfo>
         <TitleRow>
           <Title>{title}</Title>
-          <Menu label={<MdMoreHoriz />} aria-label="Sandbox Options">
-            <MenuItem>Pin Sandbox</MenuItem>
-            <Separator />
-            <MenuItem>Open Sandbox</MenuItem>
-            <Separator />
-            <MenuItem>Fork Sandbox</MenuItem>
-            <Separator />
-            <MenuItem disabled>Hide Sandbox</MenuItem>
-            <Separator />
-            <MenuItem danger>Move to Trash</MenuItem>
-          </Menu>
+          <SandboxOptionsMenu />
         </TitleRow>
         <Description>{description}</Description>
         <Statistics>

packages/app/src/app/pages/Profile/ShowcaseCard/elements.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Button } from 'reakit/Button';
-import { Link, Menu as BaseMenu } from '@codesandbox/common/lib/components';
+import { Link } from '@codesandbox/common/lib/components';
 
 export const Container = styled.div`
   min-width: 303px;
@@ -30,20 +30,6 @@ export const Title = styled.h1`
   font-weight: 500;
 `;
 
-export const Menu = styled(BaseMenu)`
-  flex: 0 0 auto;
-
-  svg {
-    color: #757575;
-    font-size: 32px;
-
-    &:hover,
-    &:focus {
-      color: #fff;
-    }
-  }
-`;
-
 export const Description = styled.p`
   color: #999;
   font-family: Inter;