Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
/**
* SupportPortal - Main support portal page component
*/
import React from 'react';
import Link from 'next/link';
import { FAQ_CATEGORIES } from '@/constants/support';
import { Icon } from '@/components/ui/icons';
import { IconName } from '@/components/ui/icons/registry';
export interface SupportPortalProps {
/** Number of open tickets for the user */
openTicketCount?: number;
}
export default function SupportPortal({ openTicketCount = 0 }: SupportPortalProps) {
return (
<div className="pt-[160px] sm:pt-[120px] lg:pt-[95px] xl:pt-[110px]">
<div className="max-w-4xl mx-auto px-4 py-8">
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-3xl font-bold text-gray-900 mb-4">How can we help?</h1>
<p className="text-gray-600 max-w-2xl mx-auto">
Browse our help center, check your support tickets, or start a new conversation
with our team.
</p>
</div>
{/* Quick Actions */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
{/* Create Ticket */}
<Link
href="/support/tickets/new"
className="
block p-6 bg-white rounded-lg shadow-sm border border-gray-200
hover:shadow-md hover:border-blue-300 transition-all
text-center
"
>
<div className="w-12 h-12 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
<Icon name="plus" size={24} className="text-blue-600" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Create Ticket</h3>
<p className="text-sm text-gray-500">Submit a new support request</p>
</Link>
{/* View Tickets */}
<Link
href="/support/tickets"
className="
block p-6 bg-white rounded-lg shadow-sm border border-gray-200
hover:shadow-md hover:border-blue-300 transition-all
text-center relative
"
>
{openTicketCount > 0 && (
<span className="absolute top-4 right-4 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full">
{openTicketCount}
</span>
)}
<div className="w-12 h-12 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
<Icon name="clipboard-list" size={24} className="text-green-600" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">My Tickets</h3>
<p className="text-sm text-gray-500">View your support requests</p>
</Link>
{/* Browse FAQ */}
<Link
href="/support/articles"
className="
block p-6 bg-white rounded-lg shadow-sm border border-gray-200
hover:shadow-md hover:border-blue-300 transition-all
text-center
"
>
<div className="w-12 h-12 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
<Icon name="question-circle" size={24} className="text-purple-600" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Help Center</h3>
<p className="text-sm text-gray-500">Browse FAQs and guides</p>
</Link>
</div>
{/* FAQ Categories */}
<div className="mb-12">
<h2 className="text-xl font-semibold text-gray-900 mb-6">Browse by Topic</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{FAQ_CATEGORIES.map((category) => (
<Link
key={category.id}
href={`/support/articles?category=${category.id}`}
className="
flex items-center gap-3 p-4
bg-white rounded-lg border border-gray-200
hover:bg-gray-50 hover:border-gray-300
transition-all
"
>
<div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0">
<CategoryIcon icon={category.icon} />
</div>
<span className="font-medium text-gray-900">{category.label}</span>
</Link>
))}
</div>
</div>
{/* Contact Info */}
<div className="bg-gray-50 rounded-lg p-6 text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2">
Still need help?
</h3>
<p className="text-gray-600 mb-4">
Our support team is available Monday - Friday, 9am - 6pm EST
</p>
<Link
href="/support/tickets/new"
className="
inline-flex items-center gap-2
px-6 py-3 bg-blue-600 text-white
rounded-lg font-medium
hover:bg-blue-700 transition-colors
"
>
Contact Support
<Icon name="arrow-right" size={16} />
</Link>
</div>
</div>
</div>
);
}
const CATEGORY_ICON_MAP: Record<string, IconName> = {
package: 'package',
'refresh-cw': 'refresh',
'credit-card': 'credit-card',
user: 'user',
box: 'package',
info: 'info-circle'};
function CategoryIcon({ icon }: { icon: string }) {
const iconName = CATEGORY_ICON_MAP[icon] || 'info-circle';
return <Icon name={iconName} size={20} className="text-gray-600" />;
}
|