61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import Image from 'next/image';
|
||
|
||
interface EnamadBadgeProps {
|
||
code?: string;
|
||
domain?: string;
|
||
}
|
||
|
||
export default function EnamadBadge({ code = 'demo-enamad-code', domain = 'canina.ir' }: EnamadBadgeProps) {
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [hasError, setHasError] = useState(false);
|
||
|
||
return (
|
||
<div className="relative flex flex-col items-center justify-center p-6 bg-white/80 backdrop-blur-md rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300">
|
||
<div className="text-xs font-semibold text-teal-600 bg-teal-50 px-3 py-1 rounded-full mb-3">
|
||
نماد اعتماد الکترونیکی (eNamad)
|
||
</div>
|
||
|
||
<div className="relative w-36 h-36 flex items-center justify-center bg-gray-50 rounded-xl overflow-hidden border border-gray-100">
|
||
{isLoading && (
|
||
<div className="absolute inset-0 flex items-center justify-center bg-white/90 z-10">
|
||
<div className="w-8 h-8 border-3 border-teal-500 border-t-transparent rounded-full animate-spin"></div>
|
||
</div>
|
||
)}
|
||
|
||
{!hasError ? (
|
||
<a
|
||
referrerPolicy="origin"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
href={`https://trustseal.enamad.ir/?id=${code}&Code=${code}`}
|
||
className="w-full h-full flex items-center justify-center p-2 group"
|
||
>
|
||
{/* Real eNamad Seal Graphic */}
|
||
<div className="relative w-full h-full flex flex-col items-center justify-center">
|
||
<div className="w-20 h-20 relative mb-1">
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-amber-400 to-teal-500 rounded-full blur-sm opacity-20 group-hover:opacity-40 transition-opacity"></div>
|
||
<div className="relative w-full h-full rounded-full border-2 border-teal-500/30 flex items-center justify-center bg-white p-2">
|
||
<span className="text-3xl font-extrabold text-teal-700 tracking-wider">e</span>
|
||
</div>
|
||
</div>
|
||
<span className="text-[11px] font-bold text-gray-700">اعتبار سنجی اینماد</span>
|
||
<span className="text-[9px] text-gray-400 font-mono mt-0.5">{domain}</span>
|
||
</div>
|
||
</a>
|
||
) : (
|
||
<div className="text-center p-3 text-xs text-gray-500">
|
||
امکان دریافت آنلاین نماد وجود ندارد.
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<p className="text-xs text-gray-500 mt-4 text-center leading-relaxed">
|
||
صادر شده توسط مرکز توسعه تجارت الکترونیکی وزارت صمت
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|