Add popover descriptions

2022-05-10 11:52:03 +03:00
parent 8fd7f8ecad
commit c07e70acc9
3 changed files with 141 additions and 27 deletions
--- a/components/Popover.tsx
+++ b/components/Popover.tsx
@@ -27,7 +27,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
  fontSize: 12,
  lineHeight: 1,
  color: "$text",
-  background: "$background",
+  backgroundColor: "$background",
  boxShadow:
    "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
  "@media (prefers-reduced-motion: no-preference)": {
@@ -44,7 +44,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
  ".dark &": {
    backgroundColor: "$mauve5",
    boxShadow:
-      "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
+      "0px 5px 38px -2px rgba(22, 23, 24, 1), 0px 10px 20px 0px rgba(22, 23, 24, 1)",
  },
 });

@@ -84,12 +84,15 @@ interface IPopover {
  onOpenChange?: (open: boolean) => void;
 }

-const Popover: React.FC<IPopover> = ({
+const Popover: React.FC<
+  IPopover & React.ComponentProps<typeof PopoverContent>
+> = ({
  children,
  content,
  open,
  defaultOpen = false,
  onOpenChange,
+  ...rest
 }) => (
  <PopoverRoot
    open={open}
@@ -97,8 +100,8 @@ const Popover: React.FC<IPopover> = ({
    onOpenChange={onOpenChange}
  >
    <PopoverTrigger asChild>{children}</PopoverTrigger>
-    <PopoverContent sideOffset={5}>
-      {content} <PopoverArrow />
+    <PopoverContent sideOffset={5} {...rest}>
+      {content} <PopoverArrow offset={5} className="arrow" />
    </PopoverContent>
  </PopoverRoot>
 );
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -45,11 +45,11 @@ const StyledContent = styled(TooltipPrimitive.Content, {
  },
  ".dark &": {
    boxShadow:
-      "0px 0px 10px 2px rgba(255,255,255,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+      "0px 0px 10px 2px rgba(0,0,0,.45), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
  },
  ".light &": {
    boxShadow:
-      "0px 0px 10px 2px rgba(0,0,0,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+      "0px 0px 10px 2px rgba(0,0,0,.25), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
  },
 });

@@ -64,12 +64,15 @@ interface ITooltip {
  onOpenChange?: (open: boolean) => void;
 }

-const Tooltip: React.FC<ITooltip> = ({
+const Tooltip: React.FC<
+  React.ComponentProps<typeof StyledContent> & ITooltip
+> = ({
  children,
  content,
  open,
  defaultOpen = false,
  onOpenChange,
+  ...rest
 }) => {
  return (
    <TooltipPrimitive.Root
@@ -78,8 +81,8 @@ const Tooltip: React.FC<ITooltip> = ({
      onOpenChange={onOpenChange}
    >
      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <StyledContent side="bottom" align="center">
-        {content}
+      <StyledContent side="bottom" align="center" {...rest}>
+        <div dangerouslySetInnerHTML={{ __html: content }} />
        <StyledArrow offset={5} width={11} height={5} />
      </StyledContent>
    </TooltipPrimitive.Root>
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -13,6 +13,7 @@ import Popover from "../../components/Popover";
 import state from "../../state";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
+import { styled } from "../../stitches.config";

 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
  ssr: false,
@@ -22,70 +23,177 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
  ssr: false,
 });

+const OptimizationText = () => (
+  <span>
+    Specify which optimization level to use for compiling. For example -O0 means
+    “no optimization”: this level compiles the fastest and generates the most
+    debuggable code. -O2 means moderate level of optimization which enables most
+    optimizations. Read more about the options from{" "}
+    <a
+      className="link"
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://clang.llvm.org/docs/CommandGuide/clang.html#cmdoption-o0"
+    >
+      clang documentation
+    </a>
+    .
+  </span>
+);
+
+const StyledOptimizationText = styled(OptimizationText, {
+  color: "$mauve12 !important",
+  fontSize: "200px",
+  "span a.link": {
+    color: "red",
+  },
+});
+
 const CompilerSettings = () => {
  const snap = useSnapshot(state);
  return (
    <Flex css={{ minWidth: 200, flexDirection: "column", gap: "$5" }}>
      <Box>
-        <Label>Optimization level</Label>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
+        >
+          Optimization level{" "}
+          <Popover
+            css={{
+              maxWidth: "240px",
+              lineHeight: "1.3",
+              a: {
+                color: "$purple11",
+              },
+              ".dark &": {
+                backgroundColor: "$black !important",
+
+                ".arrow": {
+                  fill: "$colors$black",
+                },
+              },
+            }}
+            content={<StyledOptimizationText />}
+          >
+            <Flex
+              css={{
+                position: "relative",
+                top: "-1px",
+                ml: "$1",
+                backgroundColor: "$mauve8",
+                borderRadius: "$full",
+                cursor: "pointer",
+                width: "16px",
+                height: "16px",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ?
+            </Flex>
+          </Popover>
+        </Label>
        <ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
          <Button
            css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O0"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O0")}
+            outline={snap.compileOptions.optimizationLevel !== "-O0"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O0")}
          >
            -O0
          </Button>
          <Button
            css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O1"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O1")}
+            outline={snap.compileOptions.optimizationLevel !== "-O1"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O1")}
          >
            -O1
          </Button>
          <Button
            css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O2"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O2")}
+            outline={snap.compileOptions.optimizationLevel !== "-O2"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O2")}
          >
            -O2
          </Button>
          <Button
            css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O3"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O3")}
+            outline={snap.compileOptions.optimizationLevel !== "-O3"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O3")}
          >
            -O3
          </Button>
          <Button
            css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-O4"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-O4")}
+            outline={snap.compileOptions.optimizationLevel !== "-O4"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-O4")}
          >
            -O4
          </Button>
          <Button
            css={{ fontFamily: "$monospace" }}
-            outline={snap.compileOptions.optimisationLevel !== "-Os"}
-            onClick={() => (state.compileOptions.optimisationLevel = "-Os")}
+            outline={snap.compileOptions.optimizationLevel !== "-Os"}
+            onClick={() => (state.compileOptions.optimizationLevel = "-Os")}
          >
            -Os
          </Button>
        </ButtonGroup>
      </Box>
-      <Flex css={{ flexDirection: "column" }}>
-        <Label>Clean code</Label>
+      <Box css={{ flexDirection: "column" }}>
+        <Label
+          style={{
+            flexDirection: "row",
+            display: "flex",
+          }}
+        >
+          Clean code{" "}
+          <Popover
+            css={{
+              maxWidth: "240px",
+              lineHeight: "1.3",
+              a: {
+                color: "$purple11",
+              },
+              ".dark &": {
+                backgroundColor: "$black !important",
+
+                ".arrow": {
+                  fill: "$colors$black",
+                },
+              },
+            }}
+            content="Cleaner removes unwanted compiler-provided exports and functions from a wasm binary to make it (more) suitable for being used as a Hook"
+          >
+            <Flex
+              css={{
+                position: "relative",
+                top: "-1px",
+                mx: "$1",
+                backgroundColor: "$mauve8",
+                borderRadius: "$full",
+                cursor: "pointer",
+                width: "16px",
+                height: "16px",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              ?
+            </Flex>
+          </Popover>
+        </Label>
        <Switch
          css={{ mt: "$2" }}
          checked={snap.compileOptions.strip}
          onCheckedChange={(checked) => {
-            console.log(checked);
            state.compileOptions.strip = checked;
          }}
        >
          <SwitchThumb />
        </Switch>
-      </Flex>
+      </Box>
    </Flex>
  );
 };