mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
More work on subscribe feature
This commit is contained in:
parent
a211e8eb58
commit
20e5974000
@ -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} />
|
||||
)
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user