From d3013719e69b71738f30f2f969e49fd0d90bb857 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 22 Feb 2024 11:45:55 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20wip=20simple=20toast=20?=
 =?UTF-8?q?render?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/Toast/SimpleToast.theme.ts         | 48 +++++++++++++++++++
 .../components/shared/Toast/SimpleToast.tsx   | 43 +++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts
 create mode 100644 packages/frontend/src/components/shared/Toast/SimpleToast.tsx

diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts b/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts
new file mode 100644
index 00000000..0d8ae24b
--- /dev/null
+++ b/packages/frontend/src/components/shared/Toast/SimpleToast.theme.ts
@@ -0,0 +1,48 @@
+import { VariantProps, tv } from 'tailwind-variants';
+
+export const simpleToastTheme = tv(
+  {
+    slots: {
+      wrapper: [
+        'flex',
+        'py-2',
+        'pl-2',
+        'pr-1.5',
+        'gap-2',
+        'rounded-full',
+        'mx-auto',
+        'mt-3',
+        'w-fit',
+        'overflow-hidden',
+        'bg-surface-high-contrast',
+        'shadow-sm',
+      ],
+      icon: ['flex', 'items-center', 'justify-center', 'w-5', 'h-5'],
+      title: ['text-sm', 'text-elements-on-high-contrast'],
+    },
+    variants: {
+      variant: {
+        success: {
+          icon: ['text-elements-success'],
+        },
+        error: {
+          icon: ['text-elements-danger'],
+        },
+        warning: {
+          icon: ['text-elements-warning'],
+        },
+        info: {
+          icon: ['text-elements-info'],
+        },
+        loading: {
+          icon: ['text-elements-info'],
+        },
+      },
+    },
+  },
+  {
+    responsiveVariants: true,
+  },
+);
+
+export type SimpleToastTheme = VariantProps<typeof simpleToastTheme>;
diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
new file mode 100644
index 00000000..e134d647
--- /dev/null
+++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import { ToastProps } from '@radix-ui/react-toast';
+import { simpleToastTheme, type SimpleToastTheme } from './SimpleToast.theme';
+import { CheckIcon, CheckRoundFilledIcon } from 'components/shared/CustomIcon';
+import { cloneIcon } from 'utils/cloneIcon';
+
+export interface SimpleToastProps extends ToastProps {
+  title: string;
+  variant?: SimpleToastTheme['variant'];
+}
+
+export const SimpleToast = ({
+  className,
+  title,
+  variant = 'success',
+  ...props
+}: SimpleToastProps) => {
+  const {
+    wrapper: wrapperCls,
+    icon: iconCls,
+    title: titleCls,
+  } = simpleToastTheme({ variant });
+
+  const Icon = useMemo(() => {
+    if (variant === 'success') return <CheckRoundFilledIcon />;
+    if (variant === 'error') return <CheckIcon />;
+    if (variant === 'warning') return <CheckIcon />;
+    if (variant === 'info') return <CheckIcon />;
+    return <CheckIcon />; // variant === 'loading'
+  }, [variant]);
+
+  return (
+    <ToastPrimitive.Root {...props} asChild>
+      <div className={wrapperCls({ class: className })}>
+        {cloneIcon(Icon, { className: iconCls() })}
+        <ToastPrimitive.Title asChild>
+          <p className={titleCls()}>{title}</p>
+        </ToastPrimitive.Title>
+      </div>
+    </ToastPrimitive.Root>
+  );
+};