feat(ui): create "save-combo" button

src/app/page.tsx

@@ -7,6 +7,7 @@ import { SoundButton } from '@/components/sound'
 import { ClearButton } from '@/components/clear-button'
 import { Footer } from '@/components/footer'
 import { useThemeStore } from '@/stores/theme-store'
+import { SaveComboButton } from '@/components/save-combo-button'
 import { sounds } from '@/sounds'
 
 import { container } from './styles'
@@ -18,8 +19,9 @@ export default function Home() {
     <div className={container({ background })}>
       <Header />
       <div className="h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
-        <div className="m-auto w-fit space-y-3">
-          <div className="hidden items-center justify-end px-4 xs:flex">
+        <div className="m-auto flex w-fit flex-col items-center gap-3">
+          <div className="hidden w-full items-center justify-end gap-2 px-4 xs:flex">
+            <SaveComboButton />
             <ClearButton />
           </div>
           <div className="grid h-fit w-fit grid-cols-1 gap-12 xs:grid-cols-2 2xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6">

src/components/save-combo-button/index.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { faker } from '@faker-js/faker'
+
+import { useComboStore } from '@/stores/combo-store'
+import { useSoundsStateStore } from '@/stores/sounds-state-store'
+import { useThemeStore } from '@/stores/theme-store'
+
+import { actionButton } from '@/shared/styles/action-button'
+import { input } from './styles'
+import { FiCheck } from 'react-icons/fi'
+
+export function SaveComboButton() {
+  const sounds = useSoundsStateStore(state => state.sounds)
+  const theme = useThemeStore(state => state.theme)
+  const saveCombo = useComboStore(state => state.saveCombo)
+
+  const [comboName, setComboName] = useState('')
+  const [showSuccess, setShowSuccess] = useState(false)
+
+  function save() {
+    if (!comboName) return
+    if (!sounds.some(sound => sound.active)) return
+
+    const activeSounds = sounds.filter(sound => sound.active)
+
+    saveCombo({
+      id: faker.string.alphanumeric({ casing: 'lower', length: 6 }),
+      name: comboName,
+      sounds: activeSounds
+    })
+
+    setComboName('')
+    setShowSuccess(true)
+
+    setTimeout(() => setShowSuccess(false), 2000)
+  }
+
+  const disabled = showSuccess || !sounds.some(sound => sound.active)
+
+  return (
+    <div className="flex gap-1">
+      {sounds.some(sound => sound.active) && (
+        <input
+          disabled={disabled}
+          type="text"
+          placeholder="combo name..."
+          value={comboName}
+          onChange={e => setComboName(e.target.value)}
+          className={input({ theme })}
+        />
+      )}
+      <button
+        disabled={disabled}
+        onClick={save}
+        className={actionButton({
+          theme,
+          className: /*tw:*/ 'flex items-center'
+        })}
+        title="Save current combo"
+      >
+        {showSuccess ? (
+          <span className="inline-flex w-10 justify-center">
+            <FiCheck />
+          </span>
+        ) : (
+          <span className="inline-flex w-10 justify-center">save</span>
+        )}
+      </button>
+    </div>
+  )
+}

src/components/save-combo-button/styles.ts

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants'
+
+export const input = tv({
+  base: /*tw:*/ 'form-input rounded-xl text-white bg-white/5 px-2 py-0 border-none focus:ring-0 leading-none tracking-wider duration-300 w-32 text-center animate-show-input placeholder:text-sm opacity-30 hover:opacity-100 focus:opacity-100',
+  variants: {
+    theme: {
+      transition: /*tw:*/ '',
+      dark: /*tw:*/ 'text-dark-foreground placeholder:text-dark-foreground/60 bg-dark-foreground/5',
+      light:
+        /*tw:*/ 'text-light-foreground placeholder:text-light-foreground/60 bg-light-foreground/5',
+      'blue-room':
+        /*tw:*/ 'text-blue-room placeholder:text-blue-room/60 bg-blue-room/5',
+      train: /*tw:*/ 'text-train placeholder:text-train/60 bg-train/5',
+      waterfall:
+        /*tw:*/ 'text-waterfall placeholder:text-waterfall/60 bg-waterfall/5',
+      'camping-fire':
+        /*tw:*/ 'text-camping-fire placeholder:text-camping-fire/60 bg-camping-fire/5'
+    }
+  }
+})