More work on subscribe feature

components/Button.tsx

@@ -31,6 +31,6 @@ export function Button({variant = 'primary', className, href, ...props}: Button)
     return href ? (
         <Link href={href} className={className} {...props} />
     ) : (
-        <button className={className} {...props} />
+        <button type="submit" className={className} {...props} />
     )
 }

components/Cta.tsx

@@ -1,14 +1,14 @@
 import {ElementType, ReactNode} from 'react'
 import {twMerge} from 'tailwind-merge'
 
-type FeatureProps = {
+type CtaProps = {
     icon: ElementType
     title: String
     children: ReactNode
     className?: string
 }
 
-export function Feature({icon: Icon, title, children, className}: FeatureProps) {
+export function Cta({icon: Icon, title, children, className}: CtaProps) {
     return (
         <div className={twMerge(`
             rounded-2xl 

components/Resume.tsx

@@ -1,7 +1,7 @@
 import {BriefcaseIcon} from '@/components/icons/BriefcaseIcon'
 import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
 import {Button} from '@/components/Button'
-import {Feature} from '@/components/Feature'
+import {Cta} from '@/components/Cta'
 
 type Work = {
     company: string
@@ -45,7 +45,7 @@ export function Resume() {
     ]
 
     return (
-        <Feature icon={BriefcaseIcon} title="Work">
+        <Cta icon={BriefcaseIcon} title="Work">
             <ol className="mt-6 space-y-4">
                 {work.map((role, roleIndex) => (
                     <li key={roleIndex} className="flex gap-4">
@@ -82,6 +82,6 @@ export function Resume() {
                 <ArrowDownIcon
                     className="h-4 w-4 stroke-zinc-400 transition group-active:stroke-zinc-600 dark:group-hover:stroke-zinc-50 dark:group-active:stroke-zinc-50"/>
             </Button>
-        </Feature>
+        </Cta>
     )
 }

components/Subscribe.tsx

@@ -1,25 +1,37 @@
-import {Feature} from '@/components/Feature'
+import {useRef, SyntheticEvent, MutableRefObject, useState} from 'react'
+import {Cta} from '@/components/Cta'
 import {MailIcon} from '@/components/icons/MailIcon'
 import {Button} from '@/components/Button'
 
 export function Subscribe() {
+    const inputRef = useRef() as MutableRefObject<HTMLInputElement>
+    const [message, setMessage] = useState('')
+
+    const subscribe = async (e: SyntheticEvent) => {
+        e.preventDefault()
+
+        inputRef.current.value = ''
+    }
+
     return (
-        <Feature icon={MailIcon} title="Subscribe">
+        <Cta icon={MailIcon} title="Subscribe">
             <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                 Get notified when I publish something new, and unsubscribe at any time.
             </p>
-            <div className="mt-6 flex">
+            {/*<p className="mt-2 text-sm text-green-500">Success! 🎉 You are now subscribed to the newsletter.</p>*/}
+            <form className="mt-6 flex" onSubmit={subscribe}>
                 <input
                     type="email"
                     placeholder="Email address"
                     aria-label="Email address"
                     required
                     className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-indigo-500 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-indigo-400 dark:focus:ring-indigo-400/10 sm:text-sm"
+                    ref={inputRef}
                 />
                 <Button className="ml-4 flex-none" variant="secondary">
                     Join
                 </Button>
-            </div>
-        </Feature>
+            </form>
+        </Cta>
     )
 }