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/select/index.tsx

@@ -0,0 +1,25 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+
+interface Props extends JSX.HTMLAttributes {
+  large?: boolean;
+}
+interface State {}
+
+export default class Select extends Component<Props, State> {
+  render(props: Props) {
+    const { large, ...otherProps } = props;
+
+    return (
+      <div class={style.select}>
+        <select
+          class={`${style.builtinSelect} ${large ? style.large : ''}`}
+          {...otherProps}
+        />
+        <svg class={style.arrow} viewBox="0 0 10 5">
+          <path d="M0 0l5 5 5-5z" />
+        </svg>
+      </div>
+    );
+  }
+}

src_old/components/select/style.scss

@@ -0,0 +1,33 @@
+.select {
+  position: relative;
+}
+
+.builtin-select {
+  background: #2f2f2f;
+  border-radius: 4px;
+  font: inherit;
+  padding: 4px 25px 4px 10px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  color: #fff;
+  width: 100%;
+}
+
+.arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  fill: #fff;
+  width: 10px;
+}
+
+.large {
+  padding: 10px 35px 10px 10px;
+  background: #151515;
+
+  & .arrow {
+    right: 13px;
+  }
+}