✨ Add Toast component for Svelte & React

Author: Frontendland

README.md

@@ -149,4 +149,5 @@ import { Accordion } from 'webcoreui/react'
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
 - [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)

src/components/Toast/Toast.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ToastProps } from './toast'
+    import Alert from '../Alert/Alert.svelte'
     import './toast.scss'
 
     export let className: ToastProps['className'] = ''
@@ -8,4 +9,11 @@
         'w-toast',
         className
     ].filter(Boolean).join(' ')
-</script>
+</script>
+
+<Alert {...$$restProps} className={classes}>
+    {#if $$slots.icon}
+        <slot name="icon" />
+    {/if}
+    <slot />
+</Alert>

src/components/Toast/Toast.tsx

@@ -1,17 +1,31 @@
 import React from 'react'
 import type { ToastProps } from './toast'
+import Alert from '../Alert/Alert.tsx'
 
 import './toast.scss'
 
+type ReactToastProps = {
+    children: React.ReactNode
+    icon?: string
+} & ToastProps
+
 const Toast = ({
-    className
-}: ToastProps) => {
+    icon,
+    className,
+    children,
+    ...rest
+}: ReactToastProps) => {
     const classes = [
         'w-toast',
         className
     ].filter(Boolean).join(' ')
 
-    return <div>Toast</div>
+    return (
+        <Alert {...rest} className={classes} icon={icon}>
+            {children}
+        </Alert>
+
+    )
 }
 
-export default Toast
+export default Toast