add codes

src/views/Content/LoadingIcon.js

@@ -0,0 +1,42 @@
+export default function LoadingIcon() {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      style={{
+        maxWidth: "1.2em",
+        maxHeight: "1.2em",
+      }}
+    >
+      <circle fill="#209CEE" stroke="none" cx="6" cy="50" r="6">
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          type="translate"
+          values="0 15 ; 0 -15; 0 15"
+          repeatCount="indefinite"
+          begin="0.1"
+        />
+      </circle>
+      <circle fill="#209CEE" stroke="none" cx="30" cy="50" r="6">
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          type="translate"
+          values="0 10 ; 0 -10; 0 10"
+          repeatCount="indefinite"
+          begin="0.2"
+        />
+      </circle>
+      <circle fill="#209CEE" stroke="none" cx="54" cy="50" r="6">
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          type="translate"
+          values="0 5 ; 0 -5; 0 5"
+          repeatCount="indefinite"
+          begin="0.3"
+        />
+      </circle>
+    </svg>
+  );
+}

src/views/Content/index.js

@@ -0,0 +1,59 @@
+import { useMemo, useState } from "react";
+import LoadingIcon from "./LoadingIcon";
+import { OPT_STYLE_FUZZY, OPT_STYLE_LINE } from "../../config";
+import { useTranslate } from "../../hooks/Translate";
+
+export default function Content({ q, rule }) {
+  const [hover, setHover] = useState(false);
+  const { text, sameLang, loading, textStyle } = useTranslate(q, rule);
+
+  const handleMouseEnter = () => {
+    setHover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setHover(false);
+  };
+
+  const style = useMemo(() => {
+    switch (textStyle) {
+      case OPT_STYLE_LINE:
+        return {
+          opacity: hover ? 1 : 0.6,
+          textDecoration: "dashed underline 2px",
+          textUnderlineOffset: "0.3em",
+        };
+      case OPT_STYLE_FUZZY:
+        return {
+          filter: hover ? "none" : "blur(5px)",
+          transition: "filter 0.3s ease-in-out",
+        };
+      default:
+        return {};
+    }
+  }, [textStyle, hover]);
+
+  if (loading) {
+    return (
+      <>
+        {q.length > 40 ? <br /> : " "}
+        <LoadingIcon />
+      </>
+    );
+  }
+
+  if (text && !sameLang) {
+    return (
+      <>
+        {q.length > 40 ? <br /> : " "}
+        <span
+          style={style}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {text}
+        </span>
+      </>
+    );
+  }
+}