[C] rename folders

components/calculators/Interactive/index.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { FormEvent, FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import { InteractiveCalculatorProps } from "@/types/calculators";
+import MathInput from "@/components/form/Input/patterns/MathInput";
+import Equation from "@/components/atomic/Equation";
+import Calculator from "@/components/calculators/lib";
+import * as Styled from "./styles";
+
+const InteractiveCalculator: FunctionComponent<InteractiveCalculatorProps> = ({
+  equation,
+  id,
+  value = {},
+  onChangeCallback,
+}) => {
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation();
+
+  const { fields = {}, result, latex } = Calculator(equation, value, language);
+
+  const handleChange = (event: FormEvent<HTMLInputElement>, key: string) => {
+    onChangeCallback &&
+      onChangeCallback({
+        ...value,
+        [key]: parseFloat((event.target as HTMLInputElement).value),
+      });
+  };
+
+  return (
+    <Styled.MathContainer>
+      <Styled.Inputs id={id}>
+        {Object.keys(fields).map((key: string) => {
+          const { label, precision } = fields[key];
+          return (
+            <Styled.InputRow key={key}>
+              <label htmlFor={key}>
+                <Equation latex={label} />
+              </label>
+              <MathInput
+                value={value[key] ?? ""}
+                onChange={(e) => handleChange(e, key)}
+                id={key}
+                step={10 ** -precision}
+              />
+            </Styled.InputRow>
+          );
+        })}
+      </Styled.Inputs>
+      <Equation latex={latex} />
+      <Styled.LiveRegion htmlFor={id}>
+        {t(`calculators.output.${equation}`, { result })}
+      </Styled.LiveRegion>
+    </Styled.MathContainer>
+  );
+};
+
+InteractiveCalculator.displayName = "Calculator.Interactive";
+
+export default InteractiveCalculator;

components/calculators/Interactive/styles.ts

@@ -0,0 +1,33 @@
+"use client";
+import styled from "styled-components";
+
+export const MathContainer = styled.div`
+  --math-gap: 0.5em;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: 1fr 1fr;
+  gap: var(--math-gap);
+  justify-items: left;
+  min-width: 50%;
+`;
+
+export const Inputs = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--math-gap);
+`;
+
+export const InputRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const LiveRegion = styled.output`
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;

components/calculators/Static/index.tsx

@@ -0,0 +1,19 @@
+import { FunctionComponent } from "react";
+import { CalculatorValues, Equation } from "@/types/calculators";
+import Calculator from "@/components/calculators/lib";
+import EquationRenderer from "@/components/atomic/Equation";
+import { fallbackLng } from "@/lib/i18n/settings";
+
+const StaticCalculator: FunctionComponent<{
+  equation: Equation;
+  value: CalculatorValues;
+  locale?: string;
+}> = ({ equation, value, locale = fallbackLng }) => {
+  const { latex } = Calculator(equation, value, locale);
+
+  return <EquationRenderer latex={latex} />;
+};
+
+StaticCalculator.displayName = "Calculator.Static";
+
+export default StaticCalculator;