55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { storefrontService } from '@/services/api/storefrontService';
|
|
import { parseFaqPageData } from '@/lib/faqPageLayout';
|
|
import { DEFAULT_FAQ_PAGE, type FaqCategory } from '@/lib/faqDefaults';
|
|
|
|
export function isFaqNavLink(label: string, url?: string): boolean {
|
|
const text = String(label || '').toLowerCase();
|
|
const path = String(url || '').split('?')[0];
|
|
return text.includes('faq') || /^\/faqs?$/i.test(path) || /^\/faqs?\//i.test(path);
|
|
}
|
|
|
|
export function FaqMenu({ onNavigate }: { onNavigate?: () => void }) {
|
|
const [categories, setCategories] = useState<FaqCategory[]>(
|
|
DEFAULT_FAQ_PAGE.categories
|
|
);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
storefrontService.getFaqLayout().then((raw) => {
|
|
if (cancelled) return;
|
|
const data = parseFaqPageData(raw);
|
|
if (data.categories.length > 0) setCategories(data.categories);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="absolute left-0 top-full z-[130] w-[280px] pt-1">
|
|
<div className="bg-white border border-gray-200 rounded-xl shadow-lg p-2">
|
|
<Link
|
|
href="/faqs"
|
|
onClick={onNavigate}
|
|
className="block rounded-lg px-3 py-2 text-[13px] font-semibold text-gray-700 hover:bg-primary/10 hover:text-primary"
|
|
>
|
|
All FAQs
|
|
</Link>
|
|
{categories.map((cat) => (
|
|
<Link
|
|
key={cat.slug}
|
|
href={`/faqs/${cat.slug}`}
|
|
onClick={onNavigate}
|
|
className="block rounded-lg px-3 py-2 text-[13px] font-semibold text-gray-700 hover:bg-primary/10 hover:text-primary"
|
|
>
|
|
{cat.title}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|