Rename grid files

Author: emilkowalski

components/ContextMenu/ContextMenu.js

@@ -2,17 +2,19 @@ import { styled, keyframes } from 'stitches.config';
 import { createToast } from 'vercel-toast';
 import * as RadixContextMenu from '@radix-ui/react-context-menu';
 
+const timeout = 3000;
+
 const ContextMenu = ({ children, stitchesStyling, cssStyling, scssStyling }) => {
   const copyToClipboard = async (styling) => {
     try {
       await navigator.clipboard.writeText(styling);
 
       createToast('Copied styles to clipboard', {
-        timeout: 3000
+        timeout
       });
     } catch {
       createToast('Failed to copy', {
-        timeout: 3000,
+        timeout,
         type: 'error'
       });
     }

components/Grid/index.js

@@ -10,10 +10,12 @@ import { styled } from 'stitches.config';
 const LinkPreview = ({ url, children }) => {
   const [isMounted, setIsMounted] = useState(false);
 
-  const width = 200;
-  const height = 128;
-  const quality = 50;
-  const layout = 'fixed';
+  const previewImage = {
+    width: 200,
+    height: 128,
+    quality: 50,
+    layout: 'fixed'
+  };
 
   const params = encode({
     url,
@@ -37,9 +39,9 @@ const LinkPreview = ({ url, children }) => {
             <Image
               alt={`Screenshot of ${url}`}
               src={screenshot}
-              width={width}
-              height={height}
-              layout={layout}
+              width={previewImage.width}
+              height={previewImage.height}
+              layout={previewImage.layout}
               priority={true}
             />
           </Hidden>
@@ -49,7 +51,14 @@ const LinkPreview = ({ url, children }) => {
         {children}
       </HoverCardTrigger>
       <HoverCardContent side="top" sideOffset={5}>
-        <StyledImage width={width} height={height} layout="fixed" quality={50} src={screenshot} />
+        <StyledImage
+          alt={`Screenshot of ${url}`}
+          src={screenshot}
+          width={previewImage.width}
+          height={previewImage.height}
+          layout={previewImage.layout}
+          priority={true}
+        />
       </HoverCardContent>
     </HoverCard.Root>
   );

components/LinkPreview/LinkPreview.js

@@ -1,10 +1,10 @@
 import { styled } from 'stitches.config';
 
 import snippets from 'components/Snippets';
-import GridItem from './components/GridItem';
 import ContextMenu from 'components/ContextMenu';
+import SnippetsGridItem from './SnippetsGridItem';
 
-const Grid = ({ children }) => {
+const SnippetsGrid = ({ children }) => {
   return (
     <Wrapper>
       {snippets.map(({ Component, cssStyling, scssStyling, stitchesStyling }) => (
@@ -13,9 +13,9 @@ const Grid = ({ children }) => {
           scssStyling={scssStyling}
           stitchesStyling={stitchesStyling}
           key={stitchesStyling}>
-          <GridItem>
+          <SnippetsGridItem>
             <Component />
-          </GridItem>
+          </SnippetsGridItem>
         </ContextMenu>
       ))}
     </Wrapper>
@@ -36,4 +36,4 @@ const Wrapper = styled('div', {
   }
 });
 
-export default Grid;
+export default SnippetsGrid;

components/Grid/Grid.js renamed to components/SnippetsGrid/SnippetsGrid.js

@@ -1,6 +1,6 @@
 import { styled } from 'stitches.config';
 
-const GridItem = ({ children, stitchesStyling }) => {
+const SnippetsGridItem = ({ children }) => {
   return <Wrapper>{children}</Wrapper>;
 };
 
@@ -13,4 +13,4 @@ const Wrapper = styled('div', {
   alignItems: 'center'
 });
 
-export default GridItem;
+export default SnippetsGridItem;

components/Grid/components/GridItem.js renamed to components/SnippetsGrid/SnippetsGridItem.js

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