{
!DefaultComponent ? (
-
-
To the Counter
-
To the Increment form
+
+
+ Home
+ Task List
+ Fetch Example
+ Documentation
+ Asset Gallery
+
+
+ Welcome Runecrafter!
+
+
)
: (
-
+
+
+ Home
+ Task List
+ Fetch Example
+ Documentation
+ Asset Gallery
+
+
+
)
- }
-
+ }
)
};
};
-export default Main;
\ No newline at end of file
+export default Main;
+
diff --git a/src/components/RQUI/Button/index.js b/src/components/RQUI/Button/index.js
new file mode 100644
index 0000000..a4e615a
--- /dev/null
+++ b/src/components/RQUI/Button/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+ padding: 2rem;
+ border-radius: .8rem;
+ background: white;
+ color: black;
+`
+
+export const Button = (props) => {
+ const { children } = props;
+ return (
+
+ {children}
+
+ )
+};
+
diff --git a/src/components/RQUI/Card/Card.js b/src/components/RQUI/Card/Card.js
new file mode 100644
index 0000000..49277d5
--- /dev/null
+++ b/src/components/RQUI/Card/Card.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledCard = styled.div`
+ height: ${props => props.height || 'auto'};
+ width: ${props => props.width || 'auto'};
+ background: ${props => props.background};
+ border-radius: .4rem;
+ box-shadow: 3px 5px 5px #aaaaaa;
+ display: flex;
+ flex-direction: column;
+`
+
+const Card = (props) => {
+ const { children } = props;
+ return (
+
+ {children}
+
+ )
+};
+
+export default Card;
+
diff --git a/src/components/RQUI/Card/CardContent.js b/src/components/RQUI/Card/CardContent.js
new file mode 100644
index 0000000..c8ddd30
--- /dev/null
+++ b/src/components/RQUI/Card/CardContent.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledCardFooter = styled.div`
+ height: 50%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: ${props => props.fontSize || '1.4rem'};
+ background: ${props => props.background}
+`;
+
+const CardContent = (props) => {
+ const { children } = props;
+ return (
+
+ {children}
+
+ )
+};
+
+export default CardContent;
\ No newline at end of file
diff --git a/src/components/RQUI/Card/CardHeader.js b/src/components/RQUI/Card/CardHeader.js
new file mode 100644
index 0000000..1677874
--- /dev/null
+++ b/src/components/RQUI/Card/CardHeader.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledCardHeader = styled.div`
+ height: 50%;
+ width: 100%;
+ display: flex;
+ background: ${props => props.background}
+`;
+
+const CardHeader = (props) => {
+ const { children } = props;
+ return (
+
+ {children}
+
+ )
+};
+
+export default CardHeader;
\ No newline at end of file
diff --git a/src/components/RQUI/Card/index.js b/src/components/RQUI/Card/index.js
new file mode 100644
index 0000000..e501361
--- /dev/null
+++ b/src/components/RQUI/Card/index.js
@@ -0,0 +1,5 @@
+import Card from './Card';
+import CardHeader from './CardHeader';
+import CardContent from './CardContent';
+
+export { Card, CardHeader, CardContent };
\ No newline at end of file
diff --git a/src/components/RQUI/Navbar/index.js b/src/components/RQUI/Navbar/index.js
new file mode 100644
index 0000000..017b4bc
--- /dev/null
+++ b/src/components/RQUI/Navbar/index.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import styled from 'styled-components';
+
+const StyledNav = styled.nav`
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ height: 8rem;
+ background: ${props => props.background || 'red'};
+ font-size: 14px;
+
+ & a {
+ text-decoration: none;
+ color: white;
+
+ &::before {
+ text-decoration: none;
+ }
+
+ &::after{
+ text-decoration: none;
+ }
+
+ &:visited {
+ text-decoration: none;
+ color: white;
+ }
+
+ }
+`
+
+export const Navbar = (props) => {
+ const { children } = props
+ return (
+
+ {children}
+
+ )
+};
+
+
+
+
diff --git a/src/components/RQUI/index.js b/src/components/RQUI/index.js
new file mode 100644
index 0000000..bd7a201
--- /dev/null
+++ b/src/components/RQUI/index.js
@@ -0,0 +1,6 @@
+import { Card, CardHeader, CardContent } from './Card';
+import { Button } from './Button';
+import { Navbar } from './Navbar';
+
+
+export { Card, CardHeader, CardContent, Button, Navbar };
\ No newline at end of file
diff --git a/src/components/TaskList/TaskList.js b/src/components/TaskList/TaskList.js
new file mode 100644
index 0000000..61eb705
--- /dev/null
+++ b/src/components/TaskList/TaskList.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const TaskListContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 5rem;
+`
+
+const StyledUL = styled.ul`
+ list-style-position: outside;
+ font-size: 1.5rem;
+ margin-top: 2rem;
+ list-style-type: square;
+`
+
+const TaskList = () => {
+ return (
+
+ Here's some steps to get you going!
+
+ Step One
+ Step Two
+ Step Three
+
+
+ )
+}
+
+export default TaskList;
\ No newline at end of file
diff --git a/src/routes/index.js b/src/routes/index.js
index b92d6b0..c88f522 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -4,6 +4,10 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Main from '../components/Main/Main';
import Counter from '../components/Counter/Counter';
import IncrementForm from '../components/Counter/IncrementForm';
+import TaskList from '../components/TaskList/TaskList';
+import FetchExample from '../components/FetchExample/FetchExample';
+import Documentation from '../components/Documentation/Documentation';
+import AssetGallery from '../components/AssetGallery/AssetGallery';
export default class Routes extends Component {
render() {
@@ -14,6 +18,10 @@ export default class Routes extends Component {
()} />
()} />
+ } />
+ } />
+ } />
+ } />
diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss
index a59e974..f219578 100644
--- a/src/sass/abstracts/_mixins.scss
+++ b/src/sass/abstracts/_mixins.scss
@@ -25,4 +25,25 @@
@if $breakpoint == big-desktop {
@media (min-width: 112.5em) { @content }; // 1800px
}
+}
+
+@mixin resetLinkStyles {
+ & a {
+ text-decoration: none;
+ color: white;
+
+ &::before {
+ text-decoration: none;
+ }
+
+ &::after{
+ text-decoration: none;
+ }
+
+ &:visited {
+ text-decoration: none;
+ color: white;
+ }
+
+ }
}
\ No newline at end of file
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 4850aa0..1fc5449 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,4 +6,6 @@
@import './base/animations';
@import './base/base';
@import './base/typography';
-@import './base/utilities';
\ No newline at end of file
+@import './base/utilities';
+
+@import '../components/Counter/styles//Counter';
\ No newline at end of file