6440c402cf
Refactor the header into own component, so it can be shown at "page top" for the mobile one column view.
33 lines
923 B
TypeScript
33 lines
923 B
TypeScript
"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>
|
|
);
|
|
}
|