76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
// components/CalculatorNav.tsx
|
||
// Навигация между калькуляторами
|
||
|
||
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { usePathname, useSearchParams } from 'next/navigation';
|
||
|
||
export default function CalculatorNav() {
|
||
const pathname = usePathname();
|
||
const searchParams = useSearchParams();
|
||
|
||
// Получаем chat_id из разных источников (для статического экспорта)
|
||
const chatIdFromParams = searchParams.get('chat_id');
|
||
const [chatId, setChatId] = useState<string | null>(chatIdFromParams);
|
||
|
||
useEffect(() => {
|
||
// Проверяем URL напрямую (для статического экспорта)
|
||
if (typeof window !== 'undefined') {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const id = params.get('chat_id');
|
||
if (id && id !== chatId) {
|
||
setChatId(id);
|
||
} else if (!id) {
|
||
// Пробуем восстановить из sessionStorage
|
||
const savedChatId = sessionStorage.getItem('chat_id');
|
||
if (savedChatId && savedChatId !== chatId) {
|
||
setChatId(savedChatId);
|
||
}
|
||
}
|
||
}
|
||
}, [pathname, chatId]);
|
||
|
||
// Сохраняем chat_id при переходах
|
||
const queryString = chatId ? `?chat_id=${chatId}` : '';
|
||
|
||
const calculators = [
|
||
{ id: 'soap', name: 'Мыло' },
|
||
{ id: 'candle', name: 'Свеча' },
|
||
];
|
||
|
||
const handleCalculatorChange = (calcId: string) => {
|
||
window.location.href = `/${calcId}${queryString}`;
|
||
};
|
||
|
||
return (
|
||
<div className="mb-6 bg-gray-700 rounded-lg p-4">
|
||
<h2 className="text-lg font-semibold text-gray-200 mb-3">
|
||
Выберите калькулятор:
|
||
</h2>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{calculators.map((calc) => {
|
||
const isActive = pathname === `/${calc.id}`;
|
||
|
||
return (
|
||
<button
|
||
key={calc.id}
|
||
onClick={() => handleCalculatorChange(calc.id)}
|
||
className={`
|
||
px-4 py-2 rounded-md text-center font-medium transition-colors
|
||
${isActive
|
||
? 'bg-sky-500 text-gray-100'
|
||
: 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400'
|
||
}
|
||
`}
|
||
>
|
||
{calc.name}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|