Toast component and use for copy-as-curl

src-web/components/core/Toast.tsx

@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import { useKey } from 'react-use';
+import { Heading } from './Heading';
+import { IconButton } from './IconButton';
+
+export interface ToastProps {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  className?: string;
+  timeout: number;
+}
+
+export function Toast({ children, className, open, onClose, title, timeout }: ToastProps) {
+  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+
+  useKey(
+    'Escape',
+    () => {
+      if (!open) return;
+      onClose();
+    },
+    {},
+    [open],
+  );
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, right: '-10%' }}
+      animate={{ opacity: 100, right: 0 }}
+      exit={{ opacity: 0, right: '-100%' }}
+      transition={{ duration: 0.2 }}
+      className={classNames(
+        className,
+        'pointer-events-auto',
+        'relative bg-gray-50 dark:bg-gray-100 pointer-events-auto',
+        'rounded-lg',
+        'border border-highlightSecondary dark:border-highlight shadow-xl',
+        'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
+        'w-[22rem] max-h-[80vh]',
+        'm-2 grid grid-cols-[1fr_auto]',
+        'text-gray-700',
+      )}
+    >
+      <div className="px-3 py-2">
+        {title && (
+          <Heading size={3} id={titleId}>
+            {title}
+          </Heading>
+        )}
+
+        <div className="flex items-center gap-2">{children}</div>
+      </div>
+
+      <IconButton
+        color="custom"
+        className="opacity-50"
+        title="Dismiss"
+        icon="x"
+        onClick={onClose}
+      />
+      <div className="w-full absolute bottom-0 left-0 right-0">
+        <motion.div
+          className="bg-highlight h-0.5"
+          initial={{ width: '100%' }}
+          animate={{ width: '0%', opacity: 0.2 }}
+          transition={{ duration: timeout / 1000, ease: 'linear' }}
+        />
+      </div>
+    </motion.div>
+  );
+}