89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Copy, Check } from 'lucide-react'
|
|
import type { DemoCredentials } from '@/content/schemas/manifesto'
|
|
|
|
interface CredentialsBoxProps {
|
|
credentials: DemoCredentials
|
|
}
|
|
|
|
export function CredentialsBox({ credentials }: CredentialsBoxProps) {
|
|
const [copiedEmail, setCopiedEmail] = useState(false)
|
|
const [copiedPassword, setCopiedPassword] = useState(false)
|
|
|
|
const copyToClipboard = async (text: string, type: 'email' | 'password') => {
|
|
try {
|
|
await navigator.clipboard.writeText(text)
|
|
if (type === 'email') {
|
|
setCopiedEmail(true)
|
|
setTimeout(() => setCopiedEmail(false), 2000)
|
|
} else {
|
|
setCopiedPassword(true)
|
|
setTimeout(() => setCopiedPassword(false), 2000)
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-green-50 border-2 border-green-200 rounded-lg p-6 md:p-8">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-24 font-medium text-slate-700">
|
|
Email:
|
|
</div>
|
|
<div className="flex-1 font-mono text-slate-900 bg-white px-3 py-2 rounded border border-green-300">
|
|
{credentials.email}
|
|
</div>
|
|
<button
|
|
onClick={() => copyToClipboard(credentials.email, 'email')}
|
|
className="flex-shrink-0 p-2 hover:bg-green-100 rounded transition-colors"
|
|
aria-label="Kopieer email"
|
|
>
|
|
{copiedEmail ? (
|
|
<Check className="w-5 h-5 text-green-600" />
|
|
) : (
|
|
<Copy className="w-5 h-5 text-slate-600" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-24 font-medium text-slate-700">
|
|
Wachtwoord:
|
|
</div>
|
|
<div className="flex-1 font-mono text-slate-900 bg-white px-3 py-2 rounded border border-green-300">
|
|
{credentials.password}
|
|
</div>
|
|
<button
|
|
onClick={() => copyToClipboard(credentials.password, 'password')}
|
|
className="flex-shrink-0 p-2 hover:bg-green-100 rounded transition-colors"
|
|
aria-label="Kopieer wachtwoord"
|
|
>
|
|
{copiedPassword ? (
|
|
<Check className="w-5 h-5 text-green-600" />
|
|
) : (
|
|
<Copy className="w-5 h-5 text-slate-600" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mt-6 text-sm text-slate-600 italic">
|
|
{credentials.note}
|
|
</p>
|
|
|
|
<div className="mt-6">
|
|
<a
|
|
href="/app/login"
|
|
className="inline-block w-full md:w-auto px-8 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors text-center"
|
|
>
|
|
Log in op het prototype
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|