sign up

client/.gitignore

@@ -10,7 +10,7 @@ package-lock.json
 
 # production
 /build
-
+.env
 # misc
 .DS_Store
 .env.local

client/package.json

@@ -6,15 +6,18 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.5",
     "@mui/material": "^5.0.4",
     "@mui/styles": "^5.0.2",
     "axios": "^0.23.0",
     "eslint-config-react-app": "^6.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.3",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,12 +1,18 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+import NavBar from './components/Navbar';
 import { Footer } from './components';
+import Signup from './components/Signup';
 
 function App() {
   return (
     <div className="App">
-      <Footer />
+      <Router>
+        <NavBar />
+        <Signup />
+        <Footer />
+      </Router>
     </div>
 
   );
 }
-
 export default App;

client/src/components/Agent/EstateAgent/index.jsx

@@ -0,0 +1,118 @@
+/* eslint-disable no-console */
+/* eslint-disable react/prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  Container,
+} from '@mui/material';
+import Card from '@mui/material/Card';
+// import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import House from '../../../assetes/house.jpeg';
+import './style.css';
+
+const AgenteEstate = ({ data }) => (
+  <Container
+    maxWidth="xl"
+    sx={{
+      width: '100%',
+      height: 300,
+      mb: 15,
+
+    }}
+  >
+
+    {data.length ? data[0].estateData.map((datas) => (
+
+      <Card sx={{
+        width: 500,
+        height: 200,
+        border: 'none',
+        marginTop: 2,
+        display: 'flex',
+        color: '#000',
+
+      }}
+      >
+        <CardContent sx={{
+          display: 'flex', width: '100%',
+
+        }}
+        >
+          <img
+              // src={datas.image}
+            src={datas.image === null ? House : datas.image}
+            alt={datas.title}
+            className="img-house"
+          />
+
+          <CardContent sx={{
+            display: 'flex', flexDirection: 'column', width: '100%',
+          }}
+          >
+
+            <Typography sx={{ mt: -2, fontSize: 18 }}>
+              {datas.title}
+              {' '}
+
+            </Typography>
+            <Typography
+              component="div"
+              sx={{
+                mb: 1,
+                display: 'flex',
+                flexDirection: 'row',
+                fontSize: 15,
+                color: '#5e5e5e',
+              }}
+            >
+              {datas.description}
+            </Typography>
+            <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
+
+              {datas.category}
+              {' '}
+
+            </Typography>
+            <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
+
+              {datas.type}
+              {' '}
+
+            </Typography>
+
+          </CardContent>
+        </CardContent>
+        <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
+          <Button
+            variant="outlined"
+            sx={{
+              mt: 20,
+              mr: 1,
+              minWidth: 0,
+              padding: 0,
+              border: 'none',
+              '&:hover': { border: 'none' },
+
+            }}
+          >
+            <DeleteIcon sx={{
+              color: 'red',
+              '&:hover': {
+                border: '1px solid red',
+                borderRadius: 1,
+              },
+            }}
+            />
+          </Button>
+        </Typography>
+
+      </Card>
+    )) : ' You are still not published any estate' }
+
+  </Container>
+);
+
+export default AgenteEstate;

client/src/components/Agent/EstateAgent/style.css

@@ -0,0 +1,4 @@
+.img-house{
+    width: 150px;
+    height: 150px;
+}

client/src/components/Agent/Favroit/index.jsx

@@ -0,0 +1,149 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  Container,
+} from '@mui/material';
+import Card from '@mui/material/Card';
+// import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Divider from '@mui/material/Divider';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import House from '../../../assetes/house.jpeg';
+
+const AgenteFavariot = () => (
+  <Container
+    maxWidth="xl"
+    sx={{
+      width: '45%',
+      mb: 15,
+
+    }}
+  >
+
+    <Card sx={{
+      width: 400,
+      marginLeft: 20,
+      marginTop: 2,
+      display: 'flex',
+      color: '#000',
+
+    }}
+    >
+      <CardContent sx={{
+        display: 'flex', width: '100%',
+
+      }}
+      >
+
+        <CardContent sx={{
+          display: 'flex', flexDirection: 'column', width: '100%',
+        }}
+        >
+
+          <Typography sx={{ mb: 1.5, fontSize: 18 }}>
+            Favatiot Estate
+            {' '}
+          </Typography>
+
+          <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+            <ListItem alignItems="flex-start">
+              <ListItemAvatar>
+                <Avatar alt="Travis Howard" src={House} />
+              </ListItemAvatar>
+              <ListItemText
+                primary="Rhoncus sed vestibulum"
+                secondary={(
+                  <>
+                    <Typography
+                      sx={{
+                        display: 'inline',
+                        fontSize: 15,
+                        color: '#5e5e5e',
+                      }}
+                      component="span"
+                      variant="body2"
+                      color="text.primary"
+                    >
+                      massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in
+
+                    </Typography>
+
+                  </>
+          )}
+              />
+              <Typography>
+                <Button
+                  variant="outlined"
+                  sx={{
+                    ml: 2,
+                    mt: 2,
+                    minWidth: 0,
+                    padding: 0,
+                    border: 'none',
+                    color: 'red',
+                    '&:hover': { border: 'none' },
+
+                  }}
+                >
+                  X
+                </Button>
+              </Typography>
+            </ListItem>
+            <Divider variant="inset" component="li" />
+            <ListItem alignItems="flex-start">
+              <ListItemAvatar>
+                <Avatar alt="Travis Howard" src={House} />
+              </ListItemAvatar>
+              <ListItemText
+                primary="Rhoncus sed vestibulum"
+                secondary={(
+                  <>
+                    <Typography
+                      sx={{
+                        display: 'inline',
+                        fontSize: 15,
+                        color: '#5e5e5e',
+                      }}
+                      component="span"
+                      variant="body2"
+                      color="text.primary"
+                    >
+                      massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in
+                    </Typography>
+                  </>
+          )}
+              />
+              <Typography>
+                <Button
+                  variant="outlined"
+                  sx={{
+                    ml: 2,
+                    mt: 2,
+                    minWidth: 0,
+                    padding: 0,
+                    color: 'red',
+                    border: 'none',
+                    '&:hover': { border: 'none' },
+
+                  }}
+                >
+                  X
+                </Button>
+              </Typography>
+            </ListItem>
+          </List>
+
+        </CardContent>
+      </CardContent>
+
+    </Card>
+
+  </Container>
+);
+
+export default AgenteFavariot;