feat: added ui for dashboard, sign-up and sign-in dialog

Signed-off-by: guacamole <[email protected]>

.gitignore

@@ -3,6 +3,8 @@
 # dependencies
 /.pnp
 .pnp.js
+node_modules
+.idea
 
 # testing
 /coverage

package.json

@@ -3,16 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "antd": "^4.16.13",
     "axios": "^0.21.1",
+    "dayjs": "^1.10.7",
     "notistack": "^1.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^7.0.1",
+    "react-router": "^5.2.1",
     "react-scripts": "^4.0.3",
     "web-vitals": "^1.0.1"
   },
@@ -39,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-router-dom": "^5.3.0"
   }
 }

src/components/autocomplete.js

@@ -0,0 +1,65 @@
+import { Input, AutoComplete } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+
+const renderTitle = (title) => (
+    <span>
+    {title}
+        <a
+            style={{
+                float: 'right',
+            }}
+            href="https://www.google.com/search?q=antd"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+      more
+    </a>
+  </span>
+);
+
+const renderItem = (title, count) => ({
+    value: title,
+    label: (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+            }}
+        >
+            {title}
+            <span>
+        <UserOutlined /> {count}
+      </span>
+        </div>
+    ),
+});
+
+// const options = [
+//     {
+//         label: renderTitle('Libraries'),
+//         options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
+//     },
+//     {
+//         label: renderTitle('Solutions'),
+//         options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
+//     },
+//     {
+//         label: renderTitle('Articles'),
+//         options: [renderItem('AntDesign design language', 100000)],
+//     },
+// ];
+
+const Complete = ({options=[]}) => (
+    <AutoComplete
+        dropdownClassName="certain-category-search-dropdown"
+        dropdownMatchSelectWidth={500}
+        style={{
+            width: "100%",
+        }}
+        options={options}
+    >
+        <Input.Search size="large" placeholder="Search for container images" />
+    </AutoComplete>
+);
+
+export default Complete;

src/components/buttons.js

@@ -84,14 +84,12 @@ export const OutlinedButton = ({label, onClick}) => {
 export const SolidButton = ({label, onClick}) => {
     const classes = useStyles();
     return (
-        <HtmlTooltip title={"Coming Soon!"} arrow={true}>
-        <Button className={classes.solidButtonStyle} onClick={() =>{}} variant="contained">{label}</Button>
-        </HtmlTooltip>
+        <Button className={classes.solidButtonStyle} onClick={() =>onClick()} variant="contained">{label}</Button>
     )
 }
 export const SolidButton2 = ({disabled, label, onClick}) => {
     const classes = useStyles();
     return (
         <Button disabled={disabled} className={classes.solidButton2Style} onClick={onClick} variant="contained">{label}</Button>
     )
-}
+}

src/components/card.js

@@ -0,0 +1,38 @@
+import { Card, Tooltip } from 'antd';
+import { Link } from "react-router-dom";
+import Text from "antd/es/typography/Text";
+
+export const Tile = ({repoName, author, updatedAt}) => {
+    return (
+        <div
+            style={{background: '#ccd7e3', width: "90%", borderRadius: 8, boxShadow: "0.7px 1.4px 1.4px hsl(0deg 0% 0% / 0.48)", margin: "0.5% 0"}}>
+            <Card
+                hoverable
+                headStyle={{background: 'rgba(204,215,227,0.61)', fontWeight: "bold"}}
+                title={author+"/"+repoName}
+                bordered={true}
+                style={{ width: "100%", borderRadius: 8}}
+                extra={(
+                    <div>
+                        <Text style={{marginRight: "12px"}} copyable={{
+                            text: `docker pull ${author}/${repoName}`,
+                            tooltips: [<Tooltip>copy pull command</Tooltip>]
+                        }}
+                        />
+                        <span/>
+                        <Link style={{fontWeight: "bold"}} to={`/details/${author}/${repoName}`}>More</Link>
+                    </div>
+                )}
+            >
+                <p>Author: {author}</p>
+                <p>Updated At: {updatedAt}</p>
+            </Card>
+        </div>
+    )
+}
+
+export const RenderTileList = ({data = []}) => {
+    return data.map((item,i) => {
+        return <Tile repoName={item.repoName} author={item.author} updatedAt={item.updatedAt} key={i}/>
+    })
+}

src/components/menu.js

@@ -0,0 +1,61 @@
+import {Menu} from "antd";
+import parachute from "../styles/pictures/parachute.png";
+
+import Complete from "./autocomplete";
+import {UserOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import React from "react";
+import {Link} from "react-router-dom";
+
+const styles = {
+    border: {
+        borderBottomColor: "red",
+        fontWeight: "bold",
+        "&:hover": {
+            backgroundColor: "#fff !important",
+            borderColor: "#fff !important",
+            color: "pink",
+        },
+        "border": 'none'
+    },
+    autoComplete: {
+        width: "40%",
+        paddingBottom: "0.5%"
+    },
+    menuStyle: {
+        display:"flex",
+        justifyContent:"space-between",
+        alignItems: "center",
+        backgroundColor: "rgba(152,171,196,0.98)",
+        "&:hover": {
+            color: "pink"
+        }
+    }
+
+}
+
+const NavBar = () => {
+    return <Menu style={styles.menuStyle} mode="horizontal">
+        <Menu.Item style={styles.border} key="openregistry" icon={<img src={parachute} style={{height:50}} alt={""}/>}>
+            <Link to="/repositories">OpenRegistry</Link>
+        </Menu.Item>
+        <Menu.Item style={styles.autoComplete} key="Search">
+            <Complete/>
+        </Menu.Item>
+        <Menu.Item style={styles.border} key="Repositories">
+            <Link to="/repositories">Repositories</Link>
+        </Menu.Item>
+        <Menu.Item style={styles.border} key="Explore">
+            <Link to="/explore">Explore</Link>
+        </Menu.Item>
+        <Menu.Item style={styles.border} key="Help" icon={<ArrowUpOutlined style={{ transform: "rotate(45deg)" }} />}>
+            <a target="_blank" href={"https://blog.openregistry.dev"}>Blog</a>
+        </Menu.Item>
+        <Menu.Item style={styles.border} key="log-out" icon={<UserOutlined/>}>
+            <Link to="/">Log Out</Link>
+        </Menu.Item>
+
+    </Menu>
+
+}
+
+export default NavBar;

src/components/modal.js

@@ -1,18 +1,10 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Modal from '@material-ui/core/Modal';
+import {Button, Modal} from 'antd';
 import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 
 const useStyles = makeStyles((theme) => ({
-    modal: {
-        display: 'flex',
-        alignItems: 'baseline',
-        paddingTop: theme.spacing(10),
-        paddingRight: theme.spacing(2),
-        justifyContent: 'flex-end',
-        // left: 'auto !important'
-    },
     paper: {
         backgroundColor: theme.palette.background.paper,
         border: '2px solid #000',
@@ -24,27 +16,25 @@ const useStyles = makeStyles((theme) => ({
         left: 'auto'
     }
 }));
+
+const styles = {
+    modal: {
+        width: "100% !important",
+    }
+}
 export const CustomModal = ({ children, show, close }) => {
-    const classes = useStyles();
 
     return (
-        <div>
-            <Modal
-                className={classes.modal}
-                open={show}
-                onClose={close}
-                closeAfterTransition
-                BackdropComponent={Backdrop}
-                BackdropProps={{
-                    timeout: 500,
-                }}
-            >
-                <Fade in={show}>
-                    {children}
-                </Fade>
-            </Modal>
-        </div>
+        <Modal
+            style={styles.modal}
+            visible={show}
+            onOk={close}
+            closable={false}
+            onCancel={close}
+            footer={null}
+        >
+            {children}
+        </Modal>
     );
 }
 
-// export default CustomModal;