init project

docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+
+import MessagesPane from './MessagesPane';
+import ChatsPane from './ChatsPane';
+import { ChatProps } from '../types';
+import { chats } from '../data';
+
+export default function MyProfile() {
+  const [selectedChat, setSelectedChat] = React.useState<ChatProps>(chats[0]);
+  return (
+    <Sheet
+      sx={{
+        flex: 1,
+        width: '100%',
+        mx: 'auto',
+        pt: { xs: 'var(--Header-height)', md: 0 },
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'minmax(min-content, min(30%, 400px)) 1fr',
+        },
+      }}
+    >
+      <Sheet
+        sx={{
+          position: { xs: 'fixed', sm: 'sticky' },
+          transform: {
+            xs: 'translateX(calc(100% * (var(--MessagesPane-slideIn, 0) - 1)))',
+            sm: 'none',
+          },
+          transition: 'transform 0.4s, width 0.4s',
+          zIndex: 100,
+          width: '100%',
+          top: 52,
+        }}
+      >
+        <ChatsPane
+          chats={chats}
+          selectedChatId={selectedChat.id}
+          setSelectedChat={setSelectedChat}
+        />
+      </Sheet>
+      <MessagesPane chat={selectedChat} />
+    </Sheet>
+  );
+}