Skip to content

Commit

Permalink
feat: Contact Form, Nav Bar
Browse files Browse the repository at this point in the history 
Added a formik Contact form, still need to hook up to email.  Have also fixed up the navbar to be a little lighter and not so blockie
  • Loading branch information
@lloydrichards
lloydrichards committed Jul 21, 2020
1 parent b7e69a3 commit 3037f32
Show file tree
Hide file tree
Showing 8 changed files with 312 additions and 118 deletions.
124 changes: 110 additions & 14 deletions components/Blog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Button,
} from '@material-ui/core';
import { Content, CardTitle } from './layout/StyledLayoutComponents';
import { useRouter } from 'next/router';

interface Blog {
id: number;
Expand All @@ -22,21 +23,28 @@ interface Tag {
}

function Blog() {
const [post, setPosts] = useState<Array<Blog>>(BlogData);
const router = useRouter();
const [post] = useState<Array<Blog>>(
BlogData.sort((a, b) => +b.date - +a.date)
);
return (
<Grid container spacing={1}>
{post.map((i) => (
<Grid key={i.id} item xs={12}>
<Card elevation={0} style={{ background: '#f6f3f0' }}>
<CardContent style={{ padding: "0 1em" }}>
<CardContent style={{ padding: '0 1em' }}>
<CardTitle>
{i.title} |<i>{i.date.toDateString()}</i>
</CardTitle>
<Content>{i.description}</Content>
</CardContent>
<CardActions style={{padding:"0 1em"}}>
<Button size='small' style={{ marginLeft: 'auto' }}>
Learn More
<CardActions style={{ padding: '0 1em' }}>
<Button
onClick={() => router.push(i.href)}
size='small'
style={{ marginLeft: 'auto' }}
>
Read More
</Button>
</CardActions>
</Card>
Expand All @@ -52,19 +60,107 @@ const BlogData: Array<Blog> = [
{
id: 1,
date: new Date('2020-01-01'),
title: 'Something',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Imperdiet laoreet egestas hac ac lectus ultricies in risus non. Tellus augue morbi quis egestas tellus lectus et. Habitant ut porta commodo est ne',
href: '',
title: '001 - Setting Up with Next.js',
description: '',
href: '/experiment/001',
tag: ['Code'],
},
{
id: 2,
date: new Date('2020-01-01'),
title: 'Something',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Imperdiet laoreet egestas hac ac lectus ultricies in risus non. Tellus augue morbi quis egestas tellus lectus et. Habitant ut porta commodo est ne',
href: '',
date: new Date('2020-01-02'),
title: '002 - Working with API',
description: '',
href: '/experiment/002',
tag: ['Code'],
},
{
id: 3,
date: new Date('2020-01-4'),
title: '003 - Working with Netlify',
description: '',
href: '/experiment/003',
tag: ['Code'],
},
{
id: 4,
date: new Date('2020-01-07'),
title: '004 - Setting up D3.js',
description: '',
href: '/experiment/004',
tag: ['Code'],
},
{
id: 5,
date: new Date('2020-01-08'),
title: '005 - Setting up Anime.js',
description: '',
href: '/experiment/005',
tag: ['Code'],
},
];

// <Link href='/experiment/006'>
// <a>006 - SVGs & Anime.js</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/007'>
// <a>007 - Little SVG System</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/008'>
// <a>008 - Restructure the Assembly Line</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/009'>
// <a>009 - Importing the Plastic Illistration</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/010'>
// <a>010 - Starting with the PET Cycle</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/011'>
// <a>011 - Adding and Taking Away Routes</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/012'>
// <a>012 - Implimenting some Data</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/013'>
// <a>013 - Add Tutorial</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/014'>
// <a>014 - Create Example Components</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/015'>
// <a>015 - Animated Notifications</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/016'>
// <a>016 - Autocomplete Species w/ Algolia</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/017'>
// <a>017 - Life of Platic Tutorial</a>
// </Link>
// </li>
// <li>
// <Link href='/experiment/018'>
// <a>018 - Intergrating P5.js</a>
// </Link>
// </li>
// </ul>
93 changes: 1 addition & 92 deletions components/BlogList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,103 +3,12 @@ import Link from 'next/link';

function BlogList() {
return (
<ul>
<li>
<Link href='/about'>
<a>About</a>
</Link>
</li>
<li>
<Link href='/experiment/001'>
<a>001 - Setting Up with Next.js</a>
</Link>
</li>
<li>
<Link href='/experiment/002'>
<a>002 - Working with API</a>
</Link>
</li>
<li>
<Link href='/experiment/003'>
<a>003 - Working with Netlify</a>
</Link>
</li>
<li>
<Link href='/experiment/004'>
<a>004 - Setting up D3.js</a>
</Link>
</li>
<li>
<Link href='/experiment/005'>
<a>005 - Setting up Anime.js</a>
</Link>
</li>
<li>
<Link href='/experiment/006'>
<a>006 - SVGs & Anime.js</a>
</Link>
</li>
<li>
<Link href='/experiment/007'>
<a>007 - Little SVG System</a>
</Link>
</li>
<li>
<Link href='/experiment/008'>
<a>008 - Restructure the Assembly Line</a>
</Link>
</li>
<li>
<Link href='/experiment/009'>
<a>009 - Importing the Plastic Illistration</a>
</Link>
</li>
<li>
<Link href='/experiment/010'>
<a>010 - Starting with the PET Cycle</a>
</Link>
</li>
<li>
<Link href='/experiment/011'>
<a>011 - Adding and Taking Away Routes</a>
</Link>
</li>
<li>
<Link href='/experiment/012'>
<a>012 - Implimenting some Data</a>
</Link>
</li>
<li>
<Link href='/experiment/013'>
<a>013 - Add Tutorial</a>
</Link>
</li>
<li>
<Link href='/experiment/014'>
<a>014 - Create Example Components</a>
</Link>
</li>
<li>
<Link href='/experiment/015'>
<a>015 - Animated Notifications</a>
</Link>
</li>
<li>
<Link href='/experiment/016'>
<a>016 - Autocomplete Species w/ Algolia</a>
</Link>
</li>
<li>
<Link href='/experiment/017'>
<a>017 - Life of Platic Tutorial</a>
</Link>
</li>
<li>
<Link href='/experiment/018'>
<a>018 - Intergrating P5.js</a>
</Link>
</li>
</ul>

);
}

Expand Down
76 changes: 67 additions & 9 deletions components/Contact.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import * as yup from 'yup';
import {
Grid,
Card,
Expand All @@ -12,12 +13,24 @@ import LinkedInIcon from '@material-ui/icons/LinkedIn';
import GitHubIcon from '@material-ui/icons/GitHub';
import InstagramIcon from '@material-ui/icons/Instagram';
import SendIcon from '@material-ui/icons/Send';
import { Formik, Form } from 'formik';
import { MyTextField } from './formik/TextField';
import { MyTextArea } from './formik/TextArea';

const validationSchema = yup.object({
name: yup.string().required(),
email: yup.string().required().email(),
message: yup.string().required(),
});

const Contact = () => {
return (
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card elevation={0} style={{ background: '#F6F3F0' }}>
<Card
elevation={0}
style={{ background: '#F6F3F0', maxWidth: '480px', margin: '0 auto' }}
>
<CardContent>
<Intro>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Imperdiet
Expand Down Expand Up @@ -46,14 +59,59 @@ const Contact = () => {
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card elevation={0} style={{ background: '#F6F3F0' }}>
<CardContent></CardContent>
<CardActions style={{ justifyContent: 'center' }}>
<Button variant='outlined' startIcon={<SendIcon />}>
Submit
</Button>
</CardActions>
</Card>
<Formik
onSubmit={async (data, { setErrors, setSubmitting, resetForm }) => {
setSubmitting(true);
try {
console.log(data);
} catch (error) {
setErrors(error);
}
setSubmitting(false);
resetForm();
}}
validationSchema={validationSchema}
initialValues={{
name: '',
email: '',
message: '',
}}
>
{({ isSubmitting }) => (
<Card
elevation={0}
style={{
background: '#F6F3F0',
maxWidth: '480px',
margin: '0 auto',
}}
>
<Form>
<CardContent>
<div style={{ padding: '1em' }}>
<MyTextField label='Name' name='name' />
</div>
<div style={{ padding: '1em' }}>
<MyTextField label='Email' name='email' />
</div>
<div style={{ padding: '1em' }}>
<MyTextArea rowsMax={4} label='Message' name='message' />
</div>
</CardContent>
<CardActions style={{ justifyContent: 'center' }}>
<Button
disabled={isSubmitting}
type='submit'
variant='outlined'
startIcon={<SendIcon />}
>
Submit
</Button>
</CardActions>
</Form>
</Card>
)}
</Formik>
</Grid>
</Grid>
);
Expand Down
Loading

0 comments on commit 3037f32

Please sign in to comment.