52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import React from "react";
|
||
import { HelpCircle, Mail, Phone, Send, MessageSquare } from "lucide-react";
|
||
|
||
const HelpSupport: React.FC = () => {
|
||
return (
|
||
<div className="flex flex-col gap-2 max-h-screen">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-md font-bold flex items-center gap-2">
|
||
Help & Support
|
||
</h2>
|
||
</div>
|
||
|
||
{/* Contact Info */}
|
||
<div className="card bg-base-100 border border-base-300 shadow-sm p-4">
|
||
<h3 className="text-md font-semibold mb-2">Need Assistance?</h3>
|
||
<p className="text-sm text-base-content/70">
|
||
We're here to help! If you’re facing any issues, please reach out to our support team.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-3">
|
||
<div className="flex items-center gap-3 border border-base-300 rounded-lg p-3 bg-base-200/40">
|
||
<Mail size={18} className="text-primary" />
|
||
<div>
|
||
<p className="text-xs text-base-content/70">Email</p>
|
||
<p className="font-medium text-sm">support@docva.com</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 border border-base-300 rounded-lg p-3 bg-base-200/40">
|
||
<Phone size={18} className="text-primary" />
|
||
<div>
|
||
<p className="text-xs text-base-content/70">Phone</p>
|
||
<p className="font-medium text-sm">+XXXX XXXXX</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 border border-base-300 rounded-lg p-3 bg-base-200/40">
|
||
<MessageSquare size={18} className="text-primary" />
|
||
<div>
|
||
<p className="text-xs text-base-content/70">Chat</p>
|
||
<p className="font-medium text-sm">Available 9 AM - 6 PM</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default HelpSupport;
|