├── styles ├── Home.module.css └── globals.css ├── public ├── favicon.ico └── vercel.svg ├── postcss.config.js ├── pages ├── _app.js ├── 404.js ├── api │ └── hello.js ├── contact.js └── index.js ├── tailwind.config.js ├── .gitignore ├── package.json └── README.md /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .heading { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonnysangha/diamond-cc-22-aug/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | /* ./styles/globals.css */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/404.js: -------------------------------------------------------------------------------- 1 | function NotFound() { 2 | return ( 3 |

4 |

WOW You found the lost page

5 |

6 | ); 7 | } 8 | 9 | export default NotFound; 10 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default (req, res) => { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/contact.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | function Contact() { 4 | return ( 5 |

6 |

Contact Me!!!

7 | Click to go home 8 |

9 | ); 10 | } 11 | 12 | export default Contact; 13 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "jit", 3 | purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], 4 | darkMode: false, // or 'media' or 'class' 5 | theme: { 6 | extend: {}, 7 | }, 8 | variants: { 9 | extend: {}, 10 | }, 11 | plugins: [], 12 | }; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "diamond-call", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@hookform/resolvers": "^2.7.1", 12 | "next": "11.1.0", 13 | "react": "17.0.2", 14 | "react-dom": "17.0.2", 15 | "react-dropzone": "^11.3.4", 16 | "react-hook-form": "^7.12.2", 17 | "yup": "^0.32.9" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^10.3.1", 21 | "postcss": "^8.3.6", 22 | "tailwindcss": "^2.2.7" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | import { useForm, Controller } from "react-hook-form"; 3 | import { yupResolver } from "@hookform/resolvers/yup"; 4 | import * as yup from "yup"; 5 | import Dropzone from "react-dropzone"; 6 | import { useRouter } from "next/dist/client/router"; 7 | 8 | const schema = yup.object().shape({ 9 | firstName: yup 10 | .string() 11 | .matches(/^([^0-9]*)$/, "First Name should not contain numbers") 12 | .required("First Name is a required field"), 13 | files: yup 14 | .array() 15 | .min(1, "You didnt select a file") 16 | .required("You must select a file!"), 17 | }); 18 | 19 | export default function Home() { 20 | const [files, setFiles] = useState([]); 21 | const router = useRouter(); 22 | 23 | const { 24 | control, 25 | register, 26 | handleSubmit, 27 | watch, 28 | formState: { errors }, 29 | } = useForm({ 30 | mode: "onBlur", 31 | resolver: yupResolver(schema), 32 | }); 33 | 34 | const onSubmit = (formData) => { 35 | // Handle our stuff here... 36 | 37 | console.log("WOOP", formData); 38 | }; 39 | 40 | console.log(errors); 41 | console.log(files); 42 | 43 | return ( 44 |

45 |

My magic form

46 | 49 | 50 |

87 | ); 88 | } 89 | --------------------------------------------------------------------------------