Update demo wrapper, add action button

Author: Adam Plesnik

src/components/ActionButton.tsx

@@ -0,0 +1,57 @@
+import { LucideIcon } from 'lucide-react'
+import { MouseEvent, MouseEventHandler, useState } from 'react'
+
+const ActionButton = ({
+  clickAction,
+  Icon,
+  IconOnClick = undefined,
+  tooltip = '',
+}: ReplayButtonProps) => {
+  const [clicked, setClicked] = useState(false)
+  function handleClick(e: MouseEvent) {
+    clickAction(e)
+    setClicked(true)
+    setTimeout(() => setClicked(false), 2000)
+  }
+  return (
+    <div
+      onClick={(e) => {
+        handleClick(e)
+      }}
+      title={tooltip}
+      className="group cursor-pointer p-1"
+    >
+      <div
+        className={
+          'ease-custom relative flex size-6 items-center justify-center rounded-full bg-gradient-to-tr from-slate-400 to-indigo-500 text-zinc-100 opacity-80 ' +
+          'overflow-hidden transition-[transform,opacity] duration-300 group-hover:scale-125 group-hover:opacity-100 ' +
+          (clicked ? 'scale-125' : 'group-hover:scale-125')
+        }
+      >
+        <Icon
+          className={
+            'ease-custom absolute size-3 transition-[opacity,transform] duration-500 group-hover:rotate-180 ' +
+            (clicked ? 'translate-y-24 rotate-180 delay-300' : 'translate-y-0 delay-75')
+          }
+        />
+        {IconOnClick && (
+          <IconOnClick
+            className={
+              'ease-custom size-3 transition-[opacity,transform] duration-[1s] ' +
+              (clicked ? 'translate-y-0' : '-translate-y-24')
+            }
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export interface ReplayButtonProps {
+  clickAction: MouseEventHandler
+  Icon: LucideIcon
+  IconOnClick?: LucideIcon | undefined
+  tooltip: string
+}
+
+export default ActionButton

src/demos/DemoWrapper.tsx

@@ -1,22 +1,51 @@
 import { PropsWithChildren } from 'react'
 import { addWithSpace } from '../utils/addWithSpace'
+import ActionButton from '../components/ActionButton'
+import { Repeat, StepForward } from 'lucide-react'
 
-const DemoWrapper = ({ children, className = '' }: PropsWithChildren<DemoWrapperProps>) => {
+const replayButtonClick = (element: string) => {
+  const wrapper = document.getElementById(element)
+  wrapper &&
+    wrapper.getAnimations({ subtree: true }).forEach((anim) => {
+      anim.cancel()
+      anim.play()
+    })
+}
+
+const DemoWrapper = ({
+  children,
+  className = '',
+  actionButton = false,
+  actionButtonElement = 'element',
+}: PropsWithChildren<DemoWrapperProps>) => {
   return (
     <div
+      id={actionButtonElement}
       className={
         'relative mb-4 h-96 overflow-y-auto overflow-x-hidden rounded-lg border border-zinc-300 bg-zinc-100/70 dark:border-zinc-700 dark:bg-black/10' +
         addWithSpace(className)
       }
     >
       {children}
+      {actionButton && (
+        <div className="absolute right-3 top-3">
+          <ActionButton
+            Icon={Repeat}
+            IconOnClick={StepForward}
+            clickAction={() => replayButtonClick(actionButtonElement)}
+            tooltip="Replay"
+          />
+        </div>
+      )}
     </div>
   )
 }
 
 export interface DemoWrapperProps {
   children: PropsWithChildren
   className?: string
+  actionButton?: boolean
+  actionButtonElement?: string
 }
 
 export default DemoWrapper