37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useCallback } from 'react';
|
||
|
|
|
||
|
|
import { urls } from '@/app/urls';
|
||
|
|
import { useConceptNavigation } from '@/context/NavigationContext';
|
||
|
|
import { useConceptOptions } from '@/context/OptionsContext';
|
||
|
|
import useQueryStrings from '@/hooks/useQueryStrings';
|
||
|
|
import { HelpTopic } from '@/models/miscellaneous';
|
||
|
|
|
||
|
|
import TopicsList from './TopicsList';
|
||
|
|
import ViewTopic from './ViewTopic';
|
||
|
|
|
||
|
|
function ManualsPage() {
|
||
|
|
const router = useConceptNavigation();
|
||
|
|
const query = useQueryStrings();
|
||
|
|
const activeTopic = (query.get('topic') || HelpTopic.MAIN) as HelpTopic;
|
||
|
|
|
||
|
|
const { mainHeight } = useConceptOptions();
|
||
|
|
|
||
|
|
const onSelectTopic = useCallback(
|
||
|
|
(newTopic: HelpTopic) => {
|
||
|
|
router.push(urls.help_topic(newTopic));
|
||
|
|
},
|
||
|
|
[router]
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='flex w-full gap-2' style={{ minHeight: mainHeight }}>
|
||
|
|
<TopicsList activeTopic={activeTopic} onChangeTopic={topic => onSelectTopic(topic)} />
|
||
|
|
<ViewTopic topic={activeTopic} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ManualsPage;
|