forked from sashaastiadi/www_mycelium_net
120 lines
4.4 KiB
TypeScript
120 lines
4.4 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { Container } from '@/components/Container'
|
|
import { TextField } from '@/components/Fields'
|
|
import { NavLinks } from '@/components/NavLinks'
|
|
import github from '@/images/github.svg'
|
|
import logomark from '@/images/logomark.svg'
|
|
|
|
export function Footer() {
|
|
const [email, setEmail] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [success, setSuccess] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setSuccess(false);
|
|
setMessage('');
|
|
|
|
try {
|
|
const response = await fetch('/api/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ email }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Something went wrong');
|
|
}
|
|
|
|
setSuccess(true);
|
|
setMessage('Thanks for subscribing!');
|
|
setEmail('');
|
|
} catch (error: any) {
|
|
setMessage(error.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<footer className="border-t border-gray-200">
|
|
<Container>
|
|
<div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
|
|
<div>
|
|
<div className="flex items-center text-gray-900">
|
|
<Image src={logomark} alt="Mycelium Logomark" width={60} height={60} className="h-20 w-20 flex-none" />
|
|
<div className="ml-4">
|
|
<p className="text-base font-semibold">Mycelium</p>
|
|
<p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
|
|
</div>
|
|
</div>
|
|
<nav className="mt-11 flex gap-8">
|
|
<NavLinks />
|
|
</nav>
|
|
</div>
|
|
<div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
|
|
<div className="relative flex h-16 w-16 flex-none items-center justify-center">
|
|
<Image src={github} alt="GitHub" unoptimized />
|
|
</div>
|
|
<div className="ml-4 lg:w-72">
|
|
<p className="text-base font-semibold text-gray-900">
|
|
<Link href="https://github.com/threefoldtech/mycelium/releases/" target='_blank'>
|
|
<span className="absolute inset-0 sm:rounded-2xl" />
|
|
Download Mycelium
|
|
</Link>
|
|
</p>
|
|
<p className="mt-1 text-sm text-gray-700">
|
|
Head to the GitHub to access the latest Mycelium builds for your devices.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
|
|
<div>
|
|
<form className="flex w-full justify-center md:w-auto" onSubmit={handleSubmit}>
|
|
<TextField
|
|
type="email"
|
|
aria-label="Email address"
|
|
placeholder="Email address"
|
|
autoComplete="email"
|
|
required
|
|
className="w-60 min-w-0 shrink"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
color={success ? 'green' : 'cyan'}
|
|
className="ml-4 flex-none"
|
|
disabled={loading || success}
|
|
>
|
|
{loading ? 'Joining...' : success ? 'Sent!' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
|
|
</Button>
|
|
</form>
|
|
{message && <p className="mt-2 text-sm text-gray-600">{message}</p>}
|
|
</div>
|
|
<p className="mt-6 text-sm text-gray-500 md:mt-0">
|
|
© Copyright{' '}
|
|
<a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
|
|
ThreeFold
|
|
</a>{' '}
|
|
{new Date().getFullYear()}. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
</footer>
|
|
)
|
|
}
|