Feat/dataset notion import (#392)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/base/checkbox/assets/check.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3L4.5 8.5L2 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/app/components/base/checkbox/index.module.css

@@ -0,0 +1,9 @@
+.wrapper {
+  border-color: #d0d5dd;
+}
+
+.checked {
+  background: #155eef url(./assets/check.svg) center center no-repeat;
+  background-size: 12px 12px;
+  border-color: #155eef;
+}

web/app/components/base/checkbox/index.tsx

@@ -0,0 +1,19 @@
+import cn from 'classnames'
+import s from './index.module.css'
+
+type CheckboxProps = {
+  checked?: boolean
+  onCheck?: () => void
+  className?: string
+}
+
+const Checkbox = ({ checked, onCheck, className }: CheckboxProps) => {
+  return (
+    <div
+      className={cn(s.wrapper, checked && s.checked, 'w-4 h-4 border rounded border-gray-300', className)}
+      onClick={onCheck}
+    />
+  )
+}
+
+export default Checkbox