Add copy to clipboard functionality + refinements

Author: emilkowalski

components/ContextMenu/ContextMenu.js

@@ -2,20 +2,23 @@ import { styled } from "stitches.config";
 import { keyframes } from "@stitches/react";
 import * as ContextMenu from "@radix-ui/react-context-menu";
 
-export default ({ children }) => (
-    <ContextMenu.Root>
-        <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
-        <Content>
-            <Item onSelect={() => console.log("cut")}>CSS</Item>
-            <Item onSelect={() => console.log("cut")}>SCSS</Item>
-            <Item onSelect={() => console.log("copy")}>Stitches</Item>
-            <Item onSelect={() => console.log("paste")}>Styled Components</Item>
-            <Separator />
-            <Item onSelect={() => console.log("paste")}>JSX</Item>
-            <Item onSelect={() => console.log("paste")}>HTML</Item>
-        </Content>
-    </ContextMenu.Root>
-);
+export default ({ children, stitchesStyling }) => {
+    const copyToClipboard = async (value) => {
+        await navigator.clipboard.writeText(location.href);
+        console.log("Page URL copied to clipboard");
+    };
+    return (
+        <ContextMenu.Root>
+            <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+            <Content>
+                <Item onSelect={() => copyToClipboard(stitchesStyling)}>CSS</Item>
+                <Item onSelect={() => console.log("cut")}>SCSS</Item>
+                <Item onSelect={() => console.log("copy")}>Stitches</Item>
+                <Item onSelect={() => console.log("paste")}>Styled Components</Item>
+            </Content>
+        </ContextMenu.Root>
+    );
+};
 
 const reveal = keyframes({
     "0%": { transform: "scale(0.9)", opacity: 0 },

components/Grid/Grid.js

@@ -5,11 +5,12 @@ import { styled } from "stitches.config";
 import snippets from "@components/Snippets";
 
 const Grid = ({ children }) => {
+    console.log(snippets);
     return (
         <Wrapper>
-            {snippets.map((Snippet) => (
-                <GridItem>
-                    <Snippet>Hover me</Snippet>
+            {snippets.map(({ component: Component, stitches }) => (
+                <GridItem stitchesStyling={stitches}>
+                    <Component />
                 </GridItem>
             ))}
         </Wrapper>

components/Grid/components/GridItem.js

@@ -2,9 +2,9 @@ import { styled } from "stitches.config";
 
 import ContextMenu from "@components/ContextMenu";
 
-const GridItem = ({ children }) => {
+const GridItem = ({ children, stitchesStyling }) => {
     return (
-        <ContextMenu>
+        <ContextMenu stitchesStyling={stitchesStyling}>
             <Wrapper>{children}</Wrapper>
         </ContextMenu>
     );

components/Snippets/UnderlineLeftRight.js

@@ -4,6 +4,8 @@ const UnderlineLeftRight = () => {
     return <Wrapper>Hover me</Wrapper>;
 };
 
+export default UnderlineLeftRight;
+
 const Wrapper = styled("a", {
     display: "inline-block",
     position: "relative",
@@ -28,4 +30,27 @@ const Wrapper = styled("a", {
     },
 });
 
-export default UnderlineLeftRight;
+export const stitchesStyling = `
+const Wrapper = styled("a", {
+    display: "inline-block",
+    position: "relative",
+    cursor: "pointer",
+
+    "&:after": {
+        content: "",
+        position: "absolute",
+        width: "100%",
+        transform: "scaleX(0)",
+        height: "1px",
+        top: "110%",
+        left: "0",
+        backgroundColor: "hsl(193, 95%, 71%)",
+        transformOrigin: "bottom right",
+        transition: "transform .4s cubic-bezier(.86,0,.07,1)",
+    },
+
+    "&:hover::after": {
+        transform: "scaleX(1)",
+        transformOrigin: "bottom left",
+    },
+});`;

components/Snippets/index.js

@@ -1,5 +1,5 @@
-import UnderlineLeftRight from "./UnderlineLeftRight";
+import UnderlineLeftRight, { stitchesStyling } from "./UnderlineLeftRight";
 
-const allSnippets = [UnderlineLeftRight];
+const allSnippets = [{ component: UnderlineLeftRight, stitches: stitchesStyling }];
 
 export default allSnippets;