wip

# Conflicts:
#	codecs/cpp.Dockerfile
#	codecs/imagequant/example.html
#	codecs/webp/dec/webp_dec.d.ts
#	codecs/webp/dec/webp_dec.js
#	codecs/webp/dec/webp_dec.wasm
#	codecs/webp/enc/webp_enc.d.ts
#	codecs/webp/enc/webp_enc.js
#	codecs/webp/enc/webp_enc.wasm
#	package-lock.json
#	package.json
#	src/codecs/tiny.webp
#	src_old/codecs/encoders.ts
#	src_old/codecs/processor-worker/tiny.avif
#	src_old/codecs/processor-worker/tiny.webp
#	src_old/codecs/tiny.webp
#	src_old/components/compress/index.tsx
#	src_old/lib/util.ts
#	src_old/sw/util.ts

src_old/components/checkbox/index.tsx

@@ -0,0 +1,21 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import { UncheckedIcon, CheckedIcon } from '../../lib/icons';
+
+interface Props extends JSX.HTMLAttributes {}
+interface State {}
+
+export default class Checkbox extends Component<Props, State> {
+  render(props: Props) {
+    return (
+      <div class={style.checkbox}>
+        {props.checked ? (
+          <CheckedIcon class={`${style.icon} ${style.checked}`} />
+        ) : (
+          <UncheckedIcon class={style.icon} />
+        )}
+        <input class={style.realCheckbox} type="checkbox" {...props} />
+      </div>
+    );
+  }
+}

src_old/components/checkbox/style.scss

@@ -0,0 +1,22 @@
+.checkbox {
+  display: inline-block;
+  position: relative;
+  --size: 17px;
+}
+
+.real-checkbox {
+  top: 0;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.icon {
+  display: block;
+  width: var(--size);
+  height: var(--size);
+}
+
+.checked {
+  fill: #34B9EB;
+}