link-stack/apps/link/app/(main)/tickets/[id]/layout.tsx

"use client";

import { ConversationHeader } from "@chatscope/chat-ui-kit-react";
import { Grid } from "@mui/material";

type LayoutProps = {
  detail: any;
  edit: any;
  header: any;
  params: {
    id: string;
  };
};

export default function Layout({ detail, edit, header, params: { id } }: LayoutProps) {
  return (
    <Grid container spacing={0} sx={{ height: "100%" }} direction="row" wrap="wrap">
      <Grid item sx={{ order: 0, display: { xs: "block", md: "none" } }} xs={12}>
        <ConversationHeader>
          <ConversationHeader.Content>
            {header}
          </ConversationHeader.Content>
        </ConversationHeader>
      </Grid>
      <Grid item sx={{ height: {xs: "auto", md: "100%"}, order: {xs: 3, md: 1} }} xs={12} md={9}>
        {detail}
      </Grid>
      <Grid item xs={12} md={3} sx={{ height: {xs: "auto", md: "100%"}, order: 2 }}>
        {edit}
      </Grid>
    </Grid>
  );
}