Merge pull request #20 from Hurly77/Routes/basic-UI

Routes/basic UI

components/Goups/group-description.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import clsx from 'clsx'
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography'
+import Collapse from '@material-ui/core/Collapse'
+import InfoIcon from '@material-ui/icons/Info';
+import CardContent from '@material-ui/core/CardContent';
+import IconButton from '@material-ui/core/IconButton';
+
+const useStyles = makeStyles((theme) => ({
+
+	spen: {
+		transform: 'rotate(-360deg)',
+		transition: theme.transitions.create('transform', {
+			duration: theme.transitions.duration.standard,
+		}),
+	},
+	close: {
+		transform: 'rotate(360deg)'
+	},
+}));
+
+const GroupDescription = ({ description }) => {
+	const classes = useStyles();
+  const [spin, setSpin] = React.useState(false)
+
+	return (
+		<React.Fragment>
+    <IconButton
+        onClick={() => setSpin(!spin)}
+				className={clsx(classes.spen, {
+          [classes.close] : spin,
+        })}>
+				<InfoIcon fontSize="large" />
+			</IconButton>
+        <Collapse in={spin}>
+				<CardContent>
+          <Typography paragraph>{description}</Typography>
+				</CardContent>
+        </Collapse>
+		</React.Fragment>
+	);
+};
+
+export default GroupDescription;

components/Goups/group-head.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Link from 'next/link';
+import CardHeader from '@material-ui/core/CardHeader';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+const GroupHead = ({ _id, name }) => {
+	return (
+		<React.Fragment>
+			<CardHeader
+				action={
+					<IconButton aria-label='settings'>
+						<MoreVertIcon />
+					</IconButton>
+				}
+				title={<Link href={`groups/${_id}`}>{name}</Link>}
+			/>
+		</React.Fragment>
+	);
+};
+
+export default GroupHead;

components/Goups/group-list.js

@@ -0,0 +1,27 @@
+import { Fragment } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Group from './group';
+
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'start',
+		flexWrap: 'wrap',
+	},
+  main: {
+    margin: theme.spacing(2)
+  }
+}));
+
+const GroupList = ({groups}) => {
+	const classes = useStyles();
+	return (
+		<div className={classes.root}>
+			{groups.map((group) => <Group id={group._id} group={group} /> )}
+		</div>
+	);
+};
+
+export default GroupList;

components/Goups/group-media.js

@@ -0,0 +1,12 @@
+import React, { Fragment } from 'react';
+import CardMedia from '@material-ui/core/CardMedia';
+
+const GroupMedia = ({ img, styles }) => {
+	return (
+		<Fragment>
+			<CardMedia className={styles} image={img} />
+		</Fragment>
+	);
+};
+
+export default GroupMedia;

components/Goups/group.js

@@ -0,0 +1,37 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useState } from 'react';
+import Card from '@material-ui/core/Card';
+import GroupMedia from './group-media';
+import GroupHead from './group-head';
+import GroupDescription from './group-description';
+
+const useStyles = makeStyles((theme) => ({
+	main: {
+		width: 550,
+		minWidth: 100,
+		margin: theme.spacing(2),
+		postion: 'absolute',
+		backgroundColor: theme.palette.primary.main,
+	},
+	media: {
+		width: 'cover',
+		height: 400,
+	},
+}));
+
+const Group = (props) => {
+	const classes = useStyles();
+	const { _id, name, img, projectDescription} = props.group;
+	console.log(_id)
+	return (
+		<React.Fragment>
+			<Card _id={_id} className={classes.main}>
+				<GroupHead name={name} _id={_id}/>
+				<GroupMedia img={img} styles={classes.media} />
+				<GroupDescription description={projectDescription} />
+			</Card>
+		</React.Fragment>
+	);
+};
+
+export default Group;

components/MUI/theme.js

@@ -1,24 +1,26 @@
 import { createMuiTheme } from '@material-ui/core/styles';
 import { red } from '@material-ui/core/colors';
 
-// Create a theme instance.
 const theme = createMuiTheme({
-  palette: {
-    primary: {
-      light: '#4fb3bf',
-      main: '#00838f',
-      dark: '#005662'
-    },
-    secondary: {
-      main: '#19857b',
-    },
-    error: {
-      main: red.A400,
-    },
-    background: {
-      default: '#fff',
-    },
-  },
+	palette : {
+		common     : {
+			white : '#bed1d0',
+		},
+		primary    : {
+			light : '#4fb3bf',
+			main  : '#00838f',
+			dark  : '#005662',
+		},
+		secondary  : {
+			main : '#19857b',
+		},
+		error      : {
+			main : '#913029',
+		},
+		background : {
+			default : '#a1bfbe',
+		},
+	},
 });
 
-export default theme;
+export default theme;

components/UI/LogoLink.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import {makeStyles} from '@material-ui/core/styles'
+
+const useStyles = makeStyles((theme) => ({
+  img: {
+    cursor: 'pointer',
+  }
+}))
+
+const LogoLink = () => {
+  const classess = useStyles()
+  return (
+    <Link href="/">
+        <Image className={classess.img} src='/images/devocidyLogo.jpg' height={0} width={200} />
+    </Link>
+  )
+}
+
+export default LogoLink

components/UI/NavTab.js

@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { useRouter } from 'next/router';
+import Tab from '@material-ui/core/Tab';
+import Smooth from './Smooth';
+import Link from 'next/link';
+
+const useStyles = makeStyles((theme) => ({
+	tab : {
+		color  : theme.palette.primary,
+		height : 70,
+	},
+}));
+
+const NavTab = (props) => {
+	const classes = useStyles();
+	const router = useRouter();
+	const { name, pathname, bool } = props;
+	return (
+		<Fragment>
+			<Smooth style={router.pathname === pathname}>
+				<Link href={pathname}>
+					<Tab
+						variant='outlined'
+						label={name}
+						className={classes.tab}
+						disabled={bool}
+					/>
+				</Link>
+			</Smooth>
+		</Fragment>
+	);
+};
+
+export default NavTab;

components/UI/Smooth.js

@@ -0,0 +1,27 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+	active   : {
+		backgroundColor : theme.palette.primary.dark,
+		height          : '2px',
+	},
+	inactive : {
+		backgroundColor : 'transparent',
+		height          : '2px',
+	},
+}));
+
+const Smooth = (props) => {
+	const classes = useStyles();
+	const { children, style } = props;
+	return (
+		<div>
+			{children}
+			<li
+				className={style ? classes.active:classes.inactive}
+			/>
+		</div>
+	);
+};
+
+export default Smooth;

components/component.spec.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import NavBar from '../components/layout'
+import NavBar from './layout/NavBar'
 
 test('navagation component exists', () => {
   render(<NavBar />)
-  const item = screen.getByText(/devocidy/i)
-  expect(item).toBe('devocidy')
+  const item = screen.getByRole('button', {name: /Home/i})
+  expect(item).toBeInTheDocument()
 })

components/layout/Contributors.js

@@ -0,0 +1,23 @@
+import {Fragment} from 'react'
+import {getAllContributors} from '../../dummy'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+import Link from '@material-ui/core/Link'
+
+const Contributors = () => {
+  const contributors = getAllContributors()
+  return (
+    <Fragment>
+      <Typography variant="h6" component="bold">Contributors</Typography>
+      {contributors.map(contributor => 
+        <Box component="span" m={0} id={contributor._id}>
+          <Typography component="p">{contributor.name}</Typography>
+          <Link href={contributor.link}>see more...</Link>
+        </Box>
+      )}      
+    </Fragment>
+  )
+}
+
+
+export default Contributors

components/layout/Copyright.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography';
+
+const Copyright = () => {
+  return (
+    <Typography>
+      {'Copyright ©'}{new Date().getFullYear()}
+    </Typography>
+  )
+}
+
+export default Copyright

components/layout/Footer.js

@@ -0,0 +1,31 @@
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+import { makeStyles } from '@material-ui/core/styles';
+import Copyright from './Copyright';
+
+const useStyles = makeStyles((theme) => ({
+	footer : {
+		backgroundColor : theme.palette.primary.dark,
+    padding: theme.spacing(2, 0)
+	},
+  children: {
+    color: theme.palette.common.white
+  }
+}));
+
+const Footer = (props) => {
+	const classes = useStyles();
+  const {children} = props
+	return (
+    <footer className={classes.footer}>
+      <Container>
+        <Typography className={classes.children}>
+          {children}
+        </Typography>
+        <Copyright />
+      </Container>
+    </footer>
+	);
+};
+
+export default Footer;