Files
www_mycelium_net/src/components/Footer.tsx

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">
&copy; 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>
)
}