More work on subscribe feature

This commit is contained in:
r-freeman 2023-02-05 21:52:03 +00:00
parent a211e8eb58
commit 20e5974000
4 changed files with 23 additions and 11 deletions

View File

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

View File

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

View File

@ -1,7 +1,7 @@
import {BriefcaseIcon} from '@/components/icons/BriefcaseIcon' import {BriefcaseIcon} from '@/components/icons/BriefcaseIcon'
import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon' import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
import {Button} from '@/components/Button' import {Button} from '@/components/Button'
import {Feature} from '@/components/Feature' import {Cta} from '@/components/Cta'
type Work = { type Work = {
company: string company: string
@ -45,7 +45,7 @@ export function Resume() {
] ]
return ( return (
<Feature icon={BriefcaseIcon} title="Work"> <Cta icon={BriefcaseIcon} title="Work">
<ol className="mt-6 space-y-4"> <ol className="mt-6 space-y-4">
{work.map((role, roleIndex) => ( {work.map((role, roleIndex) => (
<li key={roleIndex} className="flex gap-4"> <li key={roleIndex} className="flex gap-4">
@ -82,6 +82,6 @@ export function Resume() {
<ArrowDownIcon <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"/> 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> </Button>
</Feature> </Cta>
) )
} }

View File

@ -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 {MailIcon} from '@/components/icons/MailIcon'
import {Button} from '@/components/Button' import {Button} from '@/components/Button'
export function Subscribe() { export function Subscribe() {
const inputRef = useRef() as MutableRefObject<HTMLInputElement>
const [message, setMessage] = useState('')
const subscribe = async (e: SyntheticEvent) => {
e.preventDefault()
inputRef.current.value = ''
}
return ( return (
<Feature icon={MailIcon} title="Subscribe"> <Cta icon={MailIcon} title="Subscribe">
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400"> <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. Get notified when I publish something new, and unsubscribe at any time.
</p> </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 <input
type="email" type="email"
placeholder="Email address" placeholder="Email address"
aria-label="Email address" aria-label="Email address"
required 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" 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"> <Button className="ml-4 flex-none" variant="secondary">
Join Join
</Button> </Button>
</div> </form>
</Feature> </Cta>
) )
} }