init commit,

03_source/frontend/src/sections/tour/tour-details-toolbar.tsx

@@ -0,0 +1,112 @@
+import type { BoxProps } from '@mui/material/Box';
+
+import { usePopover } from 'minimal-shared/hooks';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+
+import { RouterLink } from 'src/routes/components';
+
+import { Iconify } from 'src/components/iconify';
+import { CustomPopover } from 'src/components/custom-popover';
+
+// ----------------------------------------------------------------------
+
+type Props = BoxProps & {
+  backHref: string;
+  editHref: string;
+  liveHref: string;
+  publish: string;
+  onChangePublish: (newValue: string) => void;
+  publishOptions: { value: string; label: string }[];
+};
+
+export function TourDetailsToolbar({
+  sx,
+  publish,
+  backHref,
+  editHref,
+  liveHref,
+  publishOptions,
+  onChangePublish,
+  ...other
+}: Props) {
+  const menuActions = usePopover();
+
+  const renderMenuActions = () => (
+    <CustomPopover
+      open={menuActions.open}
+      anchorEl={menuActions.anchorEl}
+      onClose={menuActions.onClose}
+      slotProps={{ arrow: { placement: 'top-right' } }}
+    >
+      <MenuList>
+        {publishOptions.map((option) => (
+          <MenuItem
+            key={option.value}
+            selected={option.value === publish}
+            onClick={() => {
+              menuActions.onClose();
+              onChangePublish(option.value);
+            }}
+          >
+            {option.value === 'published' && <Iconify icon="eva:cloud-upload-fill" />}
+            {option.value === 'draft' && <Iconify icon="solar:file-text-bold" />}
+            {option.label}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </CustomPopover>
+  );
+
+  return (
+    <>
+      <Box
+        sx={[{ mb: 2, gap: 1.5, display: 'flex' }, ...(Array.isArray(sx) ? sx : [sx])]}
+        {...other}
+      >
+        <Button
+          component={RouterLink}
+          href={backHref}
+          startIcon={<Iconify icon="eva:arrow-ios-back-fill" width={16} />}
+        >
+          Back
+        </Button>
+
+        <Box sx={{ flexGrow: 1 }} />
+
+        {publish === 'published' && (
+          <Tooltip title="Go Live">
+            <IconButton component={RouterLink} href={liveHref}>
+              <Iconify icon="eva:external-link-fill" />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        <Tooltip title="Edit">
+          <IconButton component={RouterLink} href={editHref}>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        </Tooltip>
+
+        <Button
+          color="inherit"
+          variant="contained"
+          loading={!publish}
+          loadingIndicator="Loading…"
+          endIcon={<Iconify icon="eva:arrow-ios-downward-fill" />}
+          onClick={menuActions.onOpen}
+          sx={{ textTransform: 'capitalize' }}
+        >
+          {publish}
+        </Button>
+      </Box>
+
+      {renderMenuActions()}
+    </>
+  );
+}