feat: add machine data

app/components/Toaster.tsx

@@ -0,0 +1,47 @@
+import { useToaster } from 'react-hot-toast/headless'
+
+export default function Toaster() {
+	const { toasts, handlers } = useToaster()
+	const { startPause, endPause, calculateOffset, updateHeight } = handlers
+
+	return (
+		<div
+			className='fixed bottom-0 right-0 p-4 w-80 h-1/2 overflow-hidden'
+			onMouseEnter={startPause}
+			onMouseLeave={endPause}
+		>
+			{toasts.slice(0, 6).map(toast => {
+				const offset = calculateOffset(toast, {
+					reverseOrder: false,
+					gutter: -8
+				})
+
+				// eslint-disable-next-line @typescript-eslint/ban-types
+				const reference = (element: HTMLDivElement | null) => {
+					if (element && typeof toast.height !== 'number') {
+						const { height } = element.getBoundingClientRect()
+						updateHeight(toast.id, -height)
+					}
+				}
+
+				return (
+					<div
+						key={toast.id}
+						ref={reference}
+						className='fixed bottom-4 right-4 p-4 bg-gray-800 rounded-lg text-white transition-all duration-300'
+						{...toast.ariaProps}
+						style={{
+							transform: `translateY(${offset}px) translateX(${toast.visible ? 0 : 200}%)`
+						}}
+					>
+						{typeof toast.message === 'function' ? (
+							toast.message(toast)
+						) : (
+							toast.message
+						)}
+					</div>
+				)
+			})}
+		</div>
+	)
+}