#14_Letter City table

src/components/AppLayout/AppLayout.tsx

@@ -1,32 +1,43 @@
-import { Outlet, Link } from 'react-router-dom';
-import Box from '@mui/material/Box';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Star from '@mui/icons-material/Star';
-import { paths } from '../../paths';
-import Sidebar from './Sidebar';
+import { Outlet, Link } from "react-router-dom";
+import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Star from "@mui/icons-material/Star";
+import { paths } from "../../paths";
+import Sidebar from "./Sidebar";
+import TableCellCities from "../TableCellCities/TableCellCities";
 
+const rows = [{
+  id: 1,
+  city: "Kraków",
+},
+{ id: 2, city: "Pokhara" },
+{ id: 3, city: "Den Haag" },
+{ id: 4, city: "Praha" },]
 
-const AppLayout = () => {
-  return (
-    <Box sx={{ display: "flex" }}>
-      <Sidebar> 
-        <List component="nav">
-          {paths.map(({ path, label, iconComponent }) => (
-            <ListItem component={Link} key={path} to={path}>
-              <ListItemIcon sx={{ minWidth: "36px"}}>{iconComponent ? iconComponent : <Star />}</ListItemIcon>
-              <ListItemText primary={label} />
-            </ListItem>
-          ))}
-        </List>
-      </Sidebar>
-      <Box sx={{ flexGrow: 1 , display: "flex", flexDirection: "column" }}>
-        <Outlet />
-      </Box>
+const AppLayout = () => (
+  <Box sx={{ display: "flex" }}>
+    <Sidebar>
+      <List component="nav">
+        {paths.map(({ path, label, iconComponent }) => (
+          <ListItem component={Link} key={path} to={path}>
+            <ListItemIcon sx={{ minWidth: "36px" }}>
+              {iconComponent ? iconComponent : <Star />}
+            </ListItemIcon>
+            <ListItemText primary={label} />
+          </ListItem>
+        ))}
+      </List>
+    </Sidebar>
+    <Box sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
+      <>
+      <Outlet />
+      <TableCellCities>{rows}</TableCellCities>
+      </>
     </Box>
-  )
-}
+  </Box>
+);
 
-export default AppLayout
+export default AppLayout;

src/components/TableCellCities/TableCellCities.tsx

@@ -0,0 +1,47 @@
+import {
+  TableContainer,
+  Paper,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+} from "@mui/material";
+import TableCell from "@mui/material/TableCell";
+
+interface TableCellCitiesProps {
+  children: Array<{ id: number; city: string }>;
+}
+
+const TableCellCities = ({ children }: TableCellCitiesProps) => {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell align="left">Cities</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {children.map(({id, city}) => (
+            <TableRow key={id}>
+              <TableCell component="th" scope="row">
+                {city}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+// const Test = () => {
+//   return (
+//     <>
+//       <TableCellCities>Krakow</TableCellCities>
+//       <TableCellCities>Rzeszow</TableCellCities>
+//       <TableCellCities>Warszawa</TableCellCities>
+//     </>
+//   );
+// };
+export default TableCellCities;