🔧 chore: wip simple toast render

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>;

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>
+  );
+};