[release 0.0.4] Merges staging on main

src/App.tsx

@@ -4,13 +4,15 @@ import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './routes/Routes';
 import { SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
+import { BackToTop } from '@/components/BackToTop';
 
 const App = () => {
   return (
     <Fragment>
       <Toaster />
       <BrowserRouter>
         <SessionProvider>
+          <BackToTop/>
           <Routes />
         </SessionProvider>
       </BrowserRouter>

src/components/BackToTop/BackToTop.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react"
+import { ArrowUp } from "lucide-react"
+
+
+const BackToTop =() => {
+
+    const [isVisible, setVisibility] = useState(false)
+
+    const scrollToTop = () => {
+        let root = document.getElementById('root')
+        if (!root) {return}
+
+        root.scrollTo({top:0, behavior:"smooth"})
+
+    }
+
+    document.getElementById("root")?.addEventListener('scroll', (e) => {
+        if (e.target === null) {return}
+        let CurrentScrollHeight = (e.target as HTMLElement).scrollTop 
+        let WindowHeight = window.innerHeight
+
+        if ( CurrentScrollHeight > WindowHeight / 2) {
+            setVisibility(true)
+        } else {
+            setVisibility(false)
+        }
+    })
+
+
+return (isVisible && (
+    <button 
+    className=" fixed ease-in-out hidden sm:flex justify-center items-center duration-300 
+    bg-red-600/75 focus:bg-red-700 hover:bg-red-700 z-[100] shadow-slate-600/75
+    right-6 bottom-6 rounded-full shadow-md
+    w-12 h-12 "
+    onClick={scrollToTop}
+    ><ArrowUp color="white" /></button>
+));
+}
+
+export { BackToTop };

src/components/BackToTop/index.ts

@@ -0,0 +1,3 @@
+import { BackToTop } from "./BackToTop";
+
+export { BackToTop };

src/components/Chip/Chip.tsx

@@ -5,23 +5,32 @@ import { cva } from 'class-variance-authority';
 const Chip = React.forwardRef<HTMLDivElement, IChipProps>((props, ref) => {
   const { label, className, variant = 'info', ...rest } = props;
 
-  const variants = cva('px-4 py-1.5 font-medium text-sm md:text-md rounded-2xl', {
-    variants: {
-      variant: {
-        warn: 'bg-light-yellow',
-        success: 'bg-light-green',
-        danger: 'bg-light-red',
-        alert: 'bg-light-orange',
-        info: 'bg-light-blue',
+  const variants = cva(
+    'px-4 py-1.5 font-medium text-sm md:text-md rounded-2xl',
+    {
+      variants: {
+        variant: {
+          warn: 'bg-light-yellow',
+          success: 'bg-light-green',
+          danger: 'bg-light-red',
+          alert: 'bg-light-orange',
+          info: 'bg-light-blue',
+          moreInfo: 'bg-gray-200 text-black-600',
+        },
       },
-    },
-    defaultVariants: {
-      variant: 'info',
-    },
-  });
+      defaultVariants: {
+        variant: 'info',
+      },
+    }
+  );
 
   return (
-    <span tabIndex={0} ref={ref} {...rest} className={variants({ className, variant })}>
+    <span
+      tabIndex={0}
+      ref={ref}
+      {...rest}
+      className={variants({ className, variant })}
+    >
       {label}
     </span>
   );

src/components/Chip/types.ts

@@ -1,4 +1,4 @@
-export type ChipVariant = 'info' | 'success' | 'warn' | 'danger';
+export type ChipVariant = 'info' | 'success' | 'warn' | 'danger' | 'moreInfo';
 
 export interface IChipProps extends React.ComponentPropsWithoutRef<'div'> {
   label: string;

src/components/Header/Header.tsx

@@ -28,7 +28,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
           {title}
         </Link>
       </div>
-      <div className="flex items-center">
+      <div className="flex items-center h-5">
         <div className="cursor-pointer ">{endAdornment}</div>
       </div>
     </div>