open-productive-stack/drupal/nextjs/components/mail-to-link.tsx
rnsrk f8b8f53d54 Add Drupal headless stack with Next.js frontend
- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked
2026-03-30 11:14:17 +02:00

47 lines
1.3 KiB
TypeScript

"use client"
import { useEffect, useState } from "react"
import { Mail } from "lucide-react"
interface MailToLinkProps {
/** When provided (e.g. from Drupal field_email), use this email. Otherwise use fallback. */
email?: string | null
}
/**
* Mailto link with icon; email is set on client to reduce harvestability when not passed as prop.
*/
export function MailToLink({ email }: MailToLinkProps) {
const [href, setHref] = useState<string | null>(email ? `mailto:${email}` : null)
useEffect(() => {
if (email) {
setHref(`mailto:${email}`)
return
}
const localPart = "robert"
const domain = "nasarek"
const tld = "dev"
setHref(`mailto:${localPart}@${domain}.${tld}`)
}, [email])
if (!href) {
return (
<span className="inline-flex items-center gap-2 text-slate-500">
<Mail className="size-4 shrink-0" aria-hidden />
<span>Write me</span>
</span>
)
}
return (
<a
href={href}
className="inline-flex items-center gap-2 text-emerald-600 outline-none transition-colors duration-200 ease-out hover:text-emerald-500 focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
aria-label="Write me an email"
>
<Mail className="size-4 shrink-0" aria-hidden />
<span>Write me</span>
</a>
)
}