fix(landing): ui feedbacks (#149)

* feat: resources hover state * chore: rename Install to Clipboard * feat: feedback on copy * fix: sections not stretching
codesandbox · Nov 16, 2021 · 49bfe6f · 49bfe6f
1 parent f80e403
commit 49bfe6f
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 79 deletions.
diff --git a/website/landing/components/Api/Api.tsx b/website/landing/components/Api/Api.tsx
@@ -48,6 +48,7 @@ export const Api: React.FC = () => {
         flexDirection: "column",
         gap: "100px",
         padding: "200px 16px 100px",
+        width: "100%",
       }}
     >
       <Box

diff --git a/website/landing/components/Banner/Banner.tsx b/website/landing/components/Banner/Banner.tsx
@@ -1,6 +1,6 @@
 import content from "../../website.config.json";
 import { Box, Resources, SandpackLogo, Text } from "../common";
-import { Install } from "../common/Install";
+import { Clipboard } from "../common";
 
 export const Banner: React.FC = () => {
   const { banner } = content;
@@ -47,7 +47,7 @@ export const Banner: React.FC = () => {
           dangerouslySetInnerHTML={{ __html: banner.title }}
         />
       </Box>
-      <Install />
+      <Clipboard />
       <Resources />
     </Box>
   );

diff --git a/website/landing/components/Hero/Hero.tsx b/website/landing/components/Hero/Hero.tsx
@@ -1,6 +1,6 @@
 import {
   Box,
-  Install,
+  Clipboard,
   Resources,
   SandpackLogo,
   SandpackPreview,
@@ -20,6 +20,7 @@ export const Hero: React.FC = () => {
         minHeight: "100vh",
         padding: "100px 16px 0",
         overflow: "hidden",
+        width: "100%",
 
         "@bp2": {
           background: "$surface",
@@ -78,7 +79,7 @@ export const Hero: React.FC = () => {
           </Text>
         </Box>
       </Box>
-      <Install />
+      <Clipboard />
       <Resources />
       <Box css={{ display: "flex", justifyContent: "center" }}>
         <SandpackPreview />

diff --git a/website/landing/components/common/Clipboard.tsx b/website/landing/components/common/Clipboard.tsx
@@ -0,0 +1,166 @@
+import content from "../../website.config.json";
+
+import { Box, Button, Text } from ".";
+import { styled } from "../../stitches.config";
+import { useCallback, useEffect, useState } from "react";
+
+const command = content.commands.install;
+
+const ClipboardToast = styled("div", {
+  $$toastHeight: "48px",
+  alignItems: "center",
+  borderRadius: "72px",
+  background: "$primary",
+  display: "flex",
+  color: "$lightTextPrimary",
+  gap: "10px",
+  height: "$$toastHeight",
+  left: "50%",
+  opacity: "0",
+  padding: "0 16px",
+  pointerEvents: "none",
+  position: "absolute",
+  top: 0,
+  transform: "translateY(100vh) translateX(-50%)",
+  transition: "opacity .5s ease, transform .5s ease",
+  zIndex: "-1",
+
+  p: {
+    fontWeight: "$normal",
+    fontSize: "18px",
+    lineHeight: "22px",
+    letterSpacing: "-0.025em",
+    margin: 0,
+  },
+
+  "@bp3": {
+    $$toastHeight: "64px",
+  },
+
+  variants: {
+    visible: {
+      true: {
+        opacity: "1",
+        transform:
+          "translateY(calc(100vh - 2 * $$toastHeight)) translateX(-50%)",
+        zIndex: "10",
+      },
+    },
+  },
+});
+
+export const Clipboard: React.FC = () => {
+  const [toastVisible, setToastVisible] = useState(false);
+
+  const copyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(command);
+    setToastVisible(true);
+  }, []);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setToastVisible(false);
+    }, 3000);
+
+    return () => clearTimeout(timeout);
+  }, [toastVisible]);
+
+  return (
+    <>
+      {/* TODO: implement toast notification system */}
+      <ClipboardToast visible={toastVisible}>
+        <Box
+          css={{
+            display: "flex",
+            height: "16px",
+            width: "16px",
+
+            "@bp3": {
+              height: "24px",
+              width: "24px",
+            },
+          }}
+        >
+          <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z"
+              fill="currentColor"
+            />
+          </svg>
+        </Box>
+        <p>Copied to clipboard</p>
+      </ClipboardToast>
+      <Button
+        css={{
+          alignItems: "center",
+          color: "$darkTextPrimary",
+          cursor: "pointer",
+          display: "flex",
+          gap: "12px",
+          transition: "color .2s ease", // TODO: verify transition
+          willChange: "color",
+
+          "&:hover, &:hover path": {
+            color: "$primary",
+          },
+        }}
+        onClick={copyToClipboard}
+      >
+        <Text
+          css={{
+            fontWeight: "$normal",
+            fontSize: "16px",
+            lineHeight: "19px",
+            textAlign: "center",
+            letterSpacing: "-0.05em",
+
+            "@bp1": {
+              fontSize: "18px",
+              lineHeight: "22px",
+            },
+
+            "@bp2": {
+              fontSize: "24px",
+              lineHeight: "29px",
+            },
+          }}
+        >
+          {command}
+        </Text>
+        <Box
+          aria-label="Copy to cliboard"
+          css={{
+            color: "$darkTextPrimary",
+            flexShrink: "0",
+            height: "12px",
+            width: "12px",
+
+            "@bp2": {
+              height: "16px",
+              width: "16px",
+            },
+          }}
+          onClick={copyToClipboard}
+        >
+          <svg fill="none" height="100%" viewBox="0 0 12 13" width="100%">
+            <g clipPath="url(#a)">
+              <path
+                d="M8.21 1.344H2.317c-.54 0-.983.463-.983 1.03v7.212h.983V2.374H8.21v-1.03Zm1.474 2.06H4.281c-.54 0-.983.464-.983 1.03v7.213c0 .566.442 1.03.983 1.03h5.403c.54 0 .983-.464.983-1.03V4.435c0-.567-.442-1.03-.983-1.03Zm0 8.243H4.281V4.435h5.403v7.212Z"
+                fill="currentColor"
+              />
+            </g>
+            <defs>
+              <clipPath id="a">
+                <path
+                  d="M0 0h12v12H0z"
+                  fill="currentColor"
+                  transform="translate(0 .676)"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </Box>
+      </Button>
+    </>
+  );
+};
diff --git a/website/landing/components/common/Install.tsx b/website/landing/components/common/Install.tsx
diff --git a/website/landing/components/common/Resources.tsx b/website/landing/components/common/Resources.tsx
@@ -1,6 +1,17 @@
 import content from "../../website.config.json";
 
 import { List, Text } from ".";
+import { styled } from "../../stitches.config";
+
+const ResourceLink = styled("a", {
+  color: "inherit",
+  transition: "color .2s ease", // TODO: verify transition
+  willChange: "color",
+
+  "&:hover": {
+    color: "$primary",
+  },
+});
 
 export const Resources: React.FC = () => {
   return (
@@ -12,7 +23,7 @@ export const Resources: React.FC = () => {
     >
       {content.resources.map((r) => (
         <li key={r.name}>
-          <a href={r.url}>
+          <ResourceLink href={r.url}>
             <Text
               css={{
                 fontWeight: "$semiBold",
@@ -34,7 +45,7 @@ export const Resources: React.FC = () => {
             >
               {r.name}
             </Text>
-          </a>
+          </ResourceLink>
         </li>
       ))}
     </List>

diff --git a/website/landing/components/common/index.ts b/website/landing/components/common/index.ts
@@ -1,7 +1,7 @@
 export { Box } from "./Box";
 export { Button } from "./Button";
 export { CodeBlock } from "./CodeBlock";
-export { Install } from "./Install";
+export { Clipboard } from "./Clipboard";
 export { List } from "./List";
 export { Resources } from "./Resources";
 export { SandpackLogo } from "./SandpackLogo";