47 lines
2.7 KiB
JavaScript
47 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import {FaEnvelope, FaQuestionCircle, FaClock, FaExclamationTriangle, FaPhoneAlt} from 'react-icons/fa';
|
|
|
|
export default function ResetInfoCard() {
|
|
return (
|
|
// ใช้ w-full h-full เพื่อให้ Component ขยายเต็มพื้นที่ Container
|
|
<div className="w-full h-full p-12 bg-base-200 flex flex-col justify-between">
|
|
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center text-xl font-bold text-primary mb-4 border-b border-base-200 pb-3">
|
|
<FaQuestionCircle className="w-6 h-6 mr-3 text-warning" />
|
|
คำแนะนำในการรีเซ็ตรหัสผ่าน
|
|
</div>
|
|
|
|
{/* 1. ขั้นตอนการรีเซ็ต */}
|
|
<h3 className="text-lg font-semibold text-base-content mb-2 flex items-center">
|
|
<FaClock className="w-4 h-4 mr-2 text-info" />
|
|
กระบวนการ
|
|
</h3>
|
|
<ol className="list-decimal list-inside space-y-2 text-sm text-base-content/70 ml-4">
|
|
<li>กรุณากรอกอีเมลที่ใช้ลงทะเบียน</li>
|
|
<li>ระบบจะส่งลิงก์รีเซ็ตไปให้คุณ</li>
|
|
<li>ลิงก์จะหมดอายุภายใน <b>24 ชั่วโมง</b></li>
|
|
<li>หากไม่พบอีเมล ให้ตรวจสอบใน <b>/Spam Folder</b></li>
|
|
</ol>
|
|
|
|
<div className="divider my-4"></div>
|
|
|
|
{/* 2. ช่องทางติดต่อช่วยเหลือ */}
|
|
<h3 className="text-lg font-semibold text-base-content mb-2 flex items-center">
|
|
<FaExclamationTriangle className="w-4 h-4 mr-2 text-error" />
|
|
หากไม่ได้รับอีเมล
|
|
</h3>
|
|
<ul className="space-y-2 text-sm text-base-content/70 ml-2">
|
|
<li className='flex items-center'>
|
|
<FaEnvelope className="w-4 h-4 mr-2 text-info" />
|
|
<span className="font-semibold">ติดต่อ:</span> support@ddo.tech
|
|
</li>
|
|
<li className='flex items-center'>
|
|
<FaPhoneAlt className="w-4 h-4 mr-2 text-info" />
|
|
<span className="font-semibold">โทร:</span> 02-XXX-XXXX
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |