Enable public website sharing.

components/common/Button.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import Icon from './Icon';
 import styles from './Button.module.css';
@@ -10,10 +11,15 @@ export default function Button({
   variant,
   children,
   className,
+  tooltip,
+  tooltipId,
   ...props
 }) {
   return (
     <button
+      data-tip={tooltip}
+      data-effect="solid"
+      data-for={tooltipId}
       type={type}
       className={classNames(styles.button, className, {
         [styles.large]: size === 'large',
@@ -26,6 +32,7 @@ export default function Button({
     >
       {icon && <Icon icon={icon} size={size} />}
       {children}
+      {tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>}
     </button>
   );
 }

components/common/Button.module.css

@@ -10,6 +10,7 @@
   outline: none;
   cursor: pointer;
   white-space: nowrap;
+  position: relative;
 }
 
 .button:hover {

components/common/Checkbox.js

@@ -0,0 +1,27 @@
+import React, { useRef } from 'react';
+import Icon from 'components/common/Icon';
+import Check from 'assets/check.svg';
+import styles from './Checkbox.module.css';
+
+export default function Checkbox({ name, value, label, onChange }) {
+  const ref = useRef();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.checkbox} onClick={() => ref.current.click()}>
+        {value && <Icon icon={<Check />} size="small" />}
+      </div>
+      <label className={styles.label} htmlFor={name}>
+        {label}
+      </label>
+      <input
+        ref={ref}
+        className={styles.input}
+        type="checkbox"
+        name={name}
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  );
+}

components/common/Checkbox.module.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+}
+
+.label {
+  margin-left: 10px;
+}
+
+.input {
+  position: absolute;
+  height: 0;
+  width: 0;
+  bottom: -1px;
+  right: -1px;
+}