Files
HKSingleParty/03_source/frontend/src/sections/tour/view/tour-details-view.tsx
louiscklaw b7cd25b614 build ok,
2025-06-15 11:28:24 +08:00

66 lines
2.0 KiB
TypeScript

import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { useTabs } from 'minimal-shared/hooks';
import { useCallback, useState } from 'react';
import { TOUR_DETAILS_TABS, TOUR_PUBLISH_OPTIONS } from 'src/_mock';
import { Label } from 'src/components/label';
import { DashboardContent } from 'src/layouts/dashboard';
import { paths } from 'src/routes/paths';
import type { ITourItem } from 'src/types/tour';
import { TourDetailsBookers } from '../tour-details-bookers';
import { TourDetailsContent } from '../tour-details-content';
import { TourDetailsToolbar } from '../tour-details-toolbar';
// ----------------------------------------------------------------------
type Props = {
tour?: ITourItem;
};
export function TourDetailsView({ tour }: Props) {
const [publish, setPublish] = useState(tour?.publish);
const tabs = useTabs('content');
const handleChangePublish = useCallback((newValue: string) => {
setPublish(newValue);
}, []);
const renderToolbar = () => (
<TourDetailsToolbar
backHref={paths.dashboard.tour.root}
editHref={paths.dashboard.tour.edit(`${tour?.id}`)}
liveHref="#"
publish={publish || ''}
onChangePublish={handleChangePublish}
publishOptions={TOUR_PUBLISH_OPTIONS}
/>
);
const renderTabs = () => (
<Tabs value={tabs.value} onChange={tabs.onChange} sx={{ mb: { xs: 3, md: 5 } }}>
{TOUR_DETAILS_TABS.map((tab) => (
<Tab
key={tab.value}
iconPosition="end"
value={tab.value}
label={tab.label}
icon={
tab.value === 'bookers' ? <Label variant="filled">{tour?.bookers.length}</Label> : ''
}
/>
))}
</Tabs>
);
return (
<DashboardContent>
{renderToolbar()}
{renderTabs()}
{tabs.value === 'content' && <TourDetailsContent tour={tour} />}
{tabs.value === 'bookers' && <TourDetailsBookers bookers={tour?.bookers} />}
</DashboardContent>
);
}