initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/pages/nearle/titleCard.js

@@ -1,50 +1,28 @@
 import React from 'react';
-import { useTheme } from '@mui/material/styles';
 
-import {
-  Avatar,
-  Chip,
-  Grid,
-  Link,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography,
-  CardContent,
-  Skeleton,
-  Stack,
-  CardActions,
-  Button,
-  List
-} from '@mui/material';
-const TitleCard = ({ title, secondary, sx }) => {
-  const theme = useTheme();
-  return (
-    <Grid container spacing={2}>
-      <CardActions
-        sx={{
-          position: 'sticky',
-          top: '60px',
-          // top:0,
-          bgcolor: theme.palette.background.default,
-          zIndex: 1,
-          // borderBottom: `1px solid ${theme.palette.divider}`,
-          width: '100%',
-          ...sx
-        }}
-      >
-        <Grid item xs={12}>
-          <Stack direction={'row'} justifyContent={'space-between'} sx={{ p: 1, flexWrap: 'wrap' }}>
-            <Typography variant="h3">{title}</Typography>
-            {secondary && secondary}
-          </Stack>
-        </Grid>
-      </CardActions>
-    </Grid>
-  );
-};
+import { HStack } from '@astryxdesign/core/HStack';
+import { Heading } from '@astryxdesign/core/Heading';
+
+// Sticky page-header bar. Offset by the real AppShell nav height (not a
+// hardcoded px guess) and a modest z-index so it never wins the stacking
+// fight against the nav — see memory astryx-sticky-header-zindex-bug.
+const TitleCard = ({ title, secondary, sx }) => (
+  <div
+    style={{
+      position: 'sticky',
+      top: 'var(--appshell-header-height, 0px)',
+      zIndex: 100,
+      background: 'var(--color-background-body)',
+      width: '100%',
+      padding: 8,
+      ...sx
+    }}
+  >
+    <HStack justify="space-between" wrap="wrap">
+      <Heading level={3}>{title}</Heading>
+      {secondary && secondary}
+    </HStack>
+  </div>
+);
 
 export default TitleCard;