feat: add warning toast

src/components/icons.tsx

@@ -100,3 +100,41 @@ const StyledSpinner = styled('i')`
 export const Spinner: React.FC = () => {
   return <StyledSpinner />;
 };
+
+const StyledWarning = styled('i')`
+  & {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 2px solid;
+    border-radius: 40px;
+    color: #f6d776;
+  }
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    border-radius: 3px;
+    width: 3px;
+    background: currentColor;
+    left: 11.5px;
+    color: #f6d776;
+  }
+  &::after {
+    top: 4px;
+    height: 14px;
+  }
+  &::before {
+    height: 3px;
+    bottom: 3px;
+    width: 3px;
+    border-radius: 9999px;
+  }
+`;
+export const Warning: React.FC = () => {
+  return <StyledWarning />;
+};

src/components/toast-icon.tsx

@@ -1,7 +1,7 @@
 import { keyframes, styled } from 'goober';
 import React from 'react';
 import { Toast } from '../core/types';
-import { Check, Close, Spinner } from './icons';
+import { Check, Close, Spinner, Warning } from './icons';
 
 interface ToastIconProps {
   icon?: Toast['icon'];
@@ -45,6 +45,9 @@ const ToastIcon: React.FC<ToastIconProps> = (props) => {
     if (type === 'loading') {
       return <Spinner />;
     }
+    if (type === 'warning') {
+      return <Warning />;
+    }
     return null;
   };
 

src/core/types.ts

@@ -1,6 +1,11 @@
 import React, { CSSProperties } from 'react';
 
-export type ToasterType = 'success' | 'error' | 'default' | 'loading';
+export type ToasterType =
+  | 'success'
+  | 'error'
+  | 'default'
+  | 'loading'
+  | 'warning';
 
 export type Toast = {
   id: string;

src/core/use-toast.ts

@@ -59,6 +59,7 @@ const toast = (opts: ToastArg) => createHandler('default')(opts);
 toast.error = createHandler('error');
 toast.success = createHandler('success');
 toast.loading = createHandler('loading');
+toast.warning = createHandler('warning');
 
 toast.promise = <T>(
   promise: Promise<T>,