refactor: restructure settings

refactor: migrate react components

apps/client/src/common/components/info/Info.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IoAlertCircle } from 'react-icons/io5';
+import { IoAlertCircle, IoWarning } from 'react-icons/io5';
 
 import { cx } from '../../utils/styleUtils';
 
@@ -7,14 +7,15 @@ import style from './Info.module.scss';
 
 interface InfoProps {
   className?: string;
+  type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info(props: PropsWithChildren<InfoProps>) {
-  const { className, children } = props;
-
+export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
   return (
-    <div className={cx([style.infoLabel, className])}>
-      <IoAlertCircle />
+    <div className={cx([style.infoLabel, style[type], className])}>
+      {type === 'info' && <IoAlertCircle />}
+      {type === 'warning' && <IoWarning />}
+      {type === 'error' && <IoWarning />}
       <div>{children}</div>
     </div>
   );