card_page

src/App.js

@@ -8,11 +8,12 @@ import {
   JqlTests_GoodFindOne,
   JqlTests_AuthUpsert
  } from './Tests/test_jql';
-import{ManualReact} from "./Tests/ManualReact"
+import { LoginForm, GoodExample } from "./Components";
+
 
 function App() {
   return (
-    <ManualReact />
+    <GoodExample />
   );
 }
 {/*    <div className="App">

src/Components/LoginForm.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Button from '@mui/material/Button';
+import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Grid, Link } from '@mui/material';
+import { Box } from '@mui/system';
+
+const LoginForm = ({ onLogin }) => {
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const isButtonActive = login?.length > 3 && password?.length > 3;
+    return (
+        <Container component="main" maxWidth="xs">
+            <CssBaseline />
+            <Box
+                sx={{
+                    marginTop: 8,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                }}
+            >
+                <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+                    <LockOutlinedIcon />
+                </Avatar>
+                <Typography component="h1" variant="h5">
+                    Sign in
+                </Typography>
+                <TextField
+                    fullWidth
+                    margin="normal"
+                    autoFocus
+                    required
+                    id="login-input"
+                    label="Login"
+                    size="small"
+                    defaultValue=""
+                    onChange={e => setLogin(e.target.value)}
+                />
+                <TextField
+                    fullWidth
+                    margin="normal"
+                    required
+                    id="password-input"
+                    label="Password"
+                    type="password"
+                    size="small"
+                    defaultValue=""
+                    onChange={e => setPassword(e.target.value)}
+                />
+                <FormControlLabel
+                    control={<Checkbox value="remember" color="primary" />}
+                    label="Remember me"
+                />
+                <Button
+                    variant="contained"
+                    sx={{ mt: 3, mb: 2 }}
+                    fullWidth
+                    type="submit"
+                    disabled={!isButtonActive}
+                    onClick={() => { onLogin({ login, password }) }}>
+                    Login...
+                </Button>
+                <Grid container>
+                    <Grid item xs>
+                        <Link href="#" variant='body2'>
+                            Forgot password?
+                        </Link>
+                    </Grid>
+                    <Grid item>
+                        <Link href="#" variant='body2'>
+                            {"Don't have an account? Sign Up"}
+                        </Link>
+                    </Grid>
+                </Grid>
+            </Box>
+        </Container>
+    )
+}
+
+export { LoginForm };

src/Components/index.js

@@ -0,0 +1,2 @@
+export { LoginForm } from './LoginForm';
+export {Good, GoodExample} from './Good';

src/Tests/ManualReact.js

@@ -4,7 +4,8 @@ import Button from '@mui/material/Button';
 import { LoremIpsum } from 'react-lorem-ipsum';
 import { Container, CssBaseline, TextField, Avatar, Typography, FormControl, FormControlLabel, Checkbox, Grid, Link } from '@mui/material';
 import { Box } from '@mui/system';
-;
+
+
 const oneCat = {
     "_id": "62c9472cb74e1f5f2ec1a0d4",
     "name": "iPhone",
@@ -157,79 +158,6 @@ const RangeInput = ({ min, max }) => {
 
 }
 ///////////////////////////////////////////////////////////////////
-const LoginForm = ({ onLogin }) => {
-    const [login, setLogin] = useState('');
-    const [password, setPassword] = useState('');
-    const isButtonActive = login?.length > 3 && password?.length > 3;
-    return (
-        <Container component="main" maxWidth="xs">
-            <CssBaseline />
-            <Box
-                sx={{
-                    marginTop: 8,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                }}
-            >
-                <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
-                    <LockOutlinedIcon />
-                </Avatar>
-                <Typography component="h1" variant="h5">
-                    Sign in
-                </Typography>
-                <TextField
-                    fullWidth
-                    margin="normal"
-                    autoFocus
-                    required
-                    id="login-input"
-                    label="Login"
-                    size="small"
-                    defaultValue=""
-                    onChange={e => setLogin(e.target.value)}
-                />
-                <TextField
-                    fullWidth
-                    margin="normal"
-                    required
-                    id="password-input"
-                    label="Password"
-                    type="password"
-                    size="small"
-                    defaultValue=""
-                    onChange={e => setPassword(e.target.value)}
-                />
-                <FormControlLabel
-                    control={<Checkbox value="remember" color="primary" />}
-                    label="Remember me"
-                />
-                <Button
-                    variant="contained"
-                    sx={{ mt: 3, mb: 2 }}
-                    fullWidth
-                    type="submit"
-                    disabled={!isButtonActive}
-                    onClick={() => { onLogin({ login, password }) }}>
-                    Login...
-                </Button>
-                <Grid container>
-                    <Grid item xs>
-                        <Link href="#" variant='body2'>
-                            Forgot password?
-                        </Link>
-                    </Grid>
-                    <Grid item>
-                        <Link href="#" variant='body2'>
-                            {"Don't have an account? Sign Up"}
-                        </Link>
-                    </Grid>
-                </Grid>
-            </Box>
-
-        </Container>
-    )
-}
 function hasNumber(str) {
     return /\d/.test(str);
 }
@@ -284,10 +212,6 @@ export function ManualReact() {
             {/*
             <RangeInput min={2} max={10} />
             <PasswordConfirm />
-            */}
-            <LoginForm />
-
-            {/*
             {show && <div>Вуаля</div>}
             <ul>
                 {names.map(name => <Name name={name}/>)}

src/utills/index.js

@@ -0,0 +1 @@
+export {getFullImageUrl} from './utils';

src/utills/utils.js

@@ -0,0 +1,6 @@
+
+
+
+const getFullImageUrl = (image) =>
+    `http://shop-roles.node.ed.asmer.org.ua/${image?.url}`;
+export { getFullImageUrl };