chore: handle settings change

1 files changed, 28 insertions, 6 deletions

diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index 24b54ae..e3bb11a 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -2,19 +2,41 @@ import Toggle, {
   type ToggleChoices,
   type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { FC, useState } from 'react';
+import useAttributes from '@utils/hooks/use-attributes';
+import useLocalStorage from '@utils/hooks/use-local-storage';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
+export type MotionToggleProps = Pick<
+  ToggleProps,
+  'labelClassName' | 'value'
+> & {
+  /**
+   * The local storage key to save preference.
+   */
+  storageKey: string;
+};
 
 /**
  * MotionToggle component
  *
  * Render a Toggle component to set reduce motion.
  */
-const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => {
+const MotionToggle: FC<MotionToggleProps> = ({
+  storageKey,
+  value,
+  ...props
+}) => {
   const intl = useIntl();
-  const [isDeactivated, setIsDeactivated] = useState<boolean>(value);
+  const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>(
+    storageKey,
+    value
+  );
+  useAttributes({
+    attribute: 'reducedMotion',
+    value: `${isReduced}`,
+  });
+
   const reduceMotionLabel = intl.formatMessage({
     defaultMessage: 'Animations:',
     description: 'MotionToggle: reduce motion label',
@@ -42,8 +64,8 @@ const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => {
       label={reduceMotionLabel}
       labelSize="medium"
       choices={reduceMotionChoices}
-      value={isDeactivated}
-      setValue={setIsDeactivated}
+      value={isReduced}
+      setValue={setIsReduced}
       {...props}
     />
   );