feat: implement user impersonation feature (#976)

* feat: wip impersonate user

* feat: add ability to impersonate an user

* fix: remove console.log

* fix: unused import

front/src/modules/ui/input/toggle/components/Toggle.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+type ContainerProps = {
+  isOn: boolean;
+  color?: string;
+};
+
+const Container = styled.div<ContainerProps>`
+  align-items: center;
+  background-color: ${({ theme, isOn, color }) =>
+    isOn ? color ?? theme.color.blue : theme.background.quaternary};
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  height: 20px;
+  transition: background-color 0.3s ease;
+  width: 32px;
+`;
+
+const Circle = styled(motion.div)`
+  background-color: #fff;
+  border-radius: 50%;
+  height: 16px;
+  width: 16px;
+`;
+
+const circleVariants = {
+  on: { x: 14 },
+  off: { x: 2 },
+};
+
+export type ToggleProps = {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  color?: string;
+};
+
+export function Toggle({ value, onChange, color }: ToggleProps) {
+  const [isOn, setIsOn] = useState(value ?? false);
+
+  function handleChange() {
+    setIsOn(!isOn);
+
+    if (onChange) {
+      onChange(!isOn);
+    }
+  }
+
+  useEffect(() => {
+    if (value !== isOn) {
+      setIsOn(value ?? false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <Container onClick={handleChange} isOn={isOn} color={color}>
+      <Circle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
+    </Container>
+  );
+}