feat: add html encoder / decoder

src/components/pages/encoders-decoders/html/Content.tsx

@@ -0,0 +1,46 @@
+import { decode, encode } from "html-entities";
+import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
+
+import { Main, MainItem, TextField } from "@/components/common";
+
+type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
+type OnTextFieldChange = NonNullable<ComponentPropsWithoutRef<typeof TextField>["onChange"]>;
+
+type Props = {
+  decoded: TextFieldValue;
+  encoded: TextFieldValue;
+  onDecodedChange: OnTextFieldChange;
+  onEncodedChange: OnTextFieldChange;
+};
+
+const StyledComponent = ({ decoded, encoded, onDecodedChange, onEncodedChange }: Props) => (
+  <Main title="HTML Encoder / Decoder">
+    <MainItem title="Decoded">
+      <TextField multiline rows={10} value={decoded} onChange={onDecodedChange} />
+    </MainItem>
+    <MainItem title="Encoded">
+      <TextField multiline rows={10} value={encoded} onChange={onEncodedChange} />
+    </MainItem>
+  </Main>
+);
+
+export const Component = memo(StyledComponent);
+
+const Container = () => {
+  const [decoded, setDecoded] = useState("<Hello World>");
+  const [encoded, setEncoded] = useState("&lt;Hello World&gt;");
+
+  const onDecodedChange: Props["onDecodedChange"] = useCallback(({ currentTarget: { value } }) => {
+    setDecoded(value);
+    setEncoded(encode(value));
+  }, []);
+
+  const onEncodedChange: Props["onEncodedChange"] = useCallback(({ currentTarget: { value } }) => {
+    setEncoded(value);
+    setDecoded(decode(value));
+  }, []);
+
+  return <Component {...{ decoded, encoded, onDecodedChange, onEncodedChange }} />;
+};
+
+export default Container;