link-stack/packages/bridge-ui/components/ServiceLayout.tsx

type ServiceLayoutProps = {
  children: any;
  detail: any;
  edit: any;
  create: any;
  params: {
    segment: string[];
  };
};

export const ServiceLayout = ({
  children,
  detail,
  edit,
  create,
  params: { segment },
}: ServiceLayoutProps) => {
  const length = segment?.length ?? 0;
  const isCreate = length === 2 && segment[1] === "create";
  const isEdit = length === 3 && segment[2] === "edit";
  const id = length > 0 && !isCreate ? segment[1] : null;
  const isDetail = length === 2 && !!id && !isCreate && !isEdit;

  return (
    <>
      {children}
      {isDetail && detail}
      {isEdit && edit}
      {isCreate && create}
    </>
  );
};