From 1cd60d84dd6728ac81d555bd2e3968a005d8bee7 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 22 Feb 2024 14:22:29 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20use=20framer-motion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/Toast/SimpleToast.tsx    | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
index 405cff0d..001ac32b 100644
--- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
+++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { ToastProps } from '@radix-ui/react-toast';
+import { motion } from 'framer-motion';
 import { simpleToastTheme, type SimpleToastTheme } from './SimpleToast.theme';
 import {
   LoadingIcon,
@@ -11,7 +12,6 @@ import {
 } from 'components/shared/CustomIcon';
 import { Button, ButtonBaseProps, ButtonTheme } from 'components/shared/Button';
 import { cloneIcon } from 'utils/cloneIcon';
-import { cn } from 'utils/classnames';
 
 interface CtaProps extends ButtonBaseProps, ButtonTheme {
   buttonLabel: string;
@@ -72,14 +72,22 @@ export const SimpleToast = ({
 
   return (
     <ToastPrimitive.Root {...props} asChild>
-      <div className={wrapperCls({ class: cn(className) })}>
+      <motion.li
+        animate={{
+          y: 'var(--radix-toast-swipe-move-y, 0)',
+          opacity: 1,
+        }}
+        className={wrapperCls({ class: className })}
+        exit={{ y: '100%', opacity: 0 }}
+        initial={{ y: '100%', opacity: 0 }}
+      >
         {cloneIcon(Icon, { className: iconCls() })}
         <ToastPrimitive.Title asChild>
           <p className={titleCls()}>{title}</p>
         </ToastPrimitive.Title>
         {renderCta}
         {renderCloseButton}
-      </div>
+      </motion.li>
     </ToastPrimitive.Root>
   );
 };