chore: recorder button animation

moderato-app · Sep 7, 2024 · 7e4f99b · 7e4f99b
1 parent 985d97b
commit 7e4f99b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/assets/web/html.zip b/assets/web/html.zip
diff --git a/ts/components/recorder-button.tsx b/ts/components/recorder-button.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client"
 
-import React, { useCallback } from 'react'
-import { useSnapshot } from 'valtio/react'
-import { Tooltip } from '@nextui-org/tooltip'
-import { Button } from '@nextui-org/button'
-import { Icon } from '@iconify/react'
+import React, { useCallback } from "react"
+import { useSnapshot } from "valtio/react"
+import { Tooltip } from "@nextui-org/tooltip"
+import { Button } from "@nextui-org/button"
+import { Icon } from "@iconify/react"
 
-import { recorderState } from '@/components/state/recorder-state'
-import { useURL } from '@/components/hooks/use-url'
+import { recorderState } from "@/components/state/recorder-state"
+import { useURL } from "@/components/hooks/use-url"
 
 export const RecorderButton = () => {
   const { isRecording } = useSnapshot(recorderState)
   const { url } = useURL()
-  const tooltipInfo = isRecording ? 'Stop' : 'Start'
+  const tooltipInfo = isRecording ? "Stop" : "Start"
 
   const start = useCallback(() => {
     recorderState.isRecording = true
@@ -25,22 +25,22 @@ export const RecorderButton = () => {
   return (
     <Tooltip className="bg-default-200" closeDelay={0} content={tooltipInfo} delay={500}>
       {isRecording ? (
-        <Button
-          isIconOnly
-          aria-label={tooltipInfo}
-          className="text-default-500 dark:text-default-foreground"
-          variant={'light'}
-          onClick={stop}
-        >
-          <Icon className="w-6 h-6" icon="solar:stop-bold" />
+        <Button isIconOnly aria-label={tooltipInfo} className="" variant={"light"} onClick={stop}>
+          <div className="flex relative">
+            <Icon className="w-6 h-6 text-default-500 dark:text-default-foreground" icon="solar:stop-bold" />
+            <Icon
+              className="absolute animate-[ping_3s_infinite] w-6 h-6 text-default-500 dark:text-default-foreground"
+              icon="solar:stop-bold"
+            />
+          </div>
         </Button>
       ) : (
         <Button
           isIconOnly
           aria-label={tooltipInfo}
           className="text-default-500 dark:text-default-foreground"
           isDisabled={url instanceof Error}
-          variant={'light'}
+          variant={"light"}
           onClick={start}
         >
           <Icon className="w-6 h-6" icon="solar:play-bold" />

diff --git a/ts/tailwind.config.js b/ts/tailwind.config.js
@@ -1,15 +1,15 @@
-import { nextui } from '@nextui-org/theme'
+import { nextui } from "@nextui-org/theme"
 
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 module.exports = {
   content: [
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
-    extend: {},
+    extend: {}
   },
-  darkMode: 'class',
-  plugins: [nextui()],
+  darkMode: "class",
+  plugins: [nextui()]
 }