From d42f9e348261fd1738e7977db89b06007ec8da10 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 17 Jan 2022 23:08:44 +0100
Subject: feat: add a setting to disable animations and transitions

Some users may not know the reduced motion settings, so I provide an
option directly on the website to disable animations.
---
 .../Settings/ReduceMotion/ReduceMotion.tsx         | 35 ++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/Settings/ReduceMotion/ReduceMotion.tsx

(limited to 'src/components/Settings/ReduceMotion/ReduceMotion.tsx')

diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
new file mode 100644
index 0000000..01f8b67
--- /dev/null
+++ b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
@@ -0,0 +1,35 @@
+import { Toggle } from '@components/Form';
+import { t } from '@lingui/macro';
+import { LocalStorage } from '@services/local-storage';
+import { useEffect, useState } from 'react';
+
+const ReduceMotion = () => {
+  const [isDeactivated, setIsDeactivated] = useState<boolean>(false);
+
+  useEffect(() => {
+    const initialState = LocalStorage.get('reduced-motion');
+    if (initialState) setIsDeactivated(initialState === 'true' ? true : false);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
+    LocalStorage.set('reduced-motion', `${isDeactivated}`);
+  }, [isDeactivated]);
+
+  const updateState = () => {
+    setIsDeactivated(!isDeactivated);
+  };
+
+  return (
+    <Toggle
+      id="reduced-motion"
+      label={t`Animations:`}
+      leftChoice={t`On`}
+      rightChoice={t`Off`}
+      value={isDeactivated}
+      changeHandler={updateState}
+    />
+  );
+};
+
+export default ReduceMotion;
-- 
cgit v1.2.3