├── src
├── assets
│ └── newyear.jpg
├── components
│ ├── Title.css
│ ├── Title.jsx
│ ├── Counter.css
│ └── Counter.jsx
├── index.css
├── context
│ └── CountdownContext.jsx
├── App.css
├── App.jsx
├── routes
│ ├── Home.css
│ ├── Countdown.jsx
│ └── Home.jsx
├── main.jsx
└── hooks
│ └── useCountdown.jsx
├── vite.config.js
├── .gitignore
├── index.html
├── package.json
└── public
└── vite.svg
/src/assets/newyear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/countdown/HEAD/src/assets/newyear.jpg
--------------------------------------------------------------------------------
/src/components/Title.css:
--------------------------------------------------------------------------------
1 | .title {
2 | text-align: center;
3 | margin-bottom: 1rem;
4 | font-size: 2.4rem;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | font-family: "Helvetica";
5 | }
6 |
7 | body {
8 | min-height: 100vh;
9 | }
10 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/src/components/Title.jsx:
--------------------------------------------------------------------------------
1 | import "./Title.css";
2 |
3 | const Title = ({ title, eventColor }) => {
4 | return (
5 |
6 | {title}
7 |
8 | );
9 | };
10 |
11 | export default Title;
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/src/components/Counter.css:
--------------------------------------------------------------------------------
1 | .counter {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: center;
6 | gap: 1rem;
7 | }
8 |
9 | .counter-number {
10 | background-color: #000;
11 | color: #fff;
12 | padding: 1rem;
13 | border-radius: 0.7rem;
14 | font-size: 4rem;
15 | font-weight: bold;
16 | min-width: 80px;
17 | text-align: center;
18 | }
19 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/components/Counter.jsx:
--------------------------------------------------------------------------------
1 | import "./Counter.css";
2 |
3 | const Counter = ({ title, number, eventColor }) => {
4 | return (
5 |
6 |
7 | {number}
8 |
9 |
10 | {title}
11 |
12 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Countdown;
39 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/routes/Home.jsx:
--------------------------------------------------------------------------------
1 | import { useContext, useState } from "react";
2 | import { CountdownContext } from "../context/CountdownContext";
3 | import { useNavigate } from "react-router-dom";
4 |
5 | import "./Home.css";
6 |
7 | const Countdown = () => {
8 | const [title, setTitle] = useState();
9 | const [date, setDate] = useState();
10 | const [image, setImage] = useState();
11 | const [color, setColor] = useState();
12 |
13 | const { event, setEvent } = useContext(CountdownContext);
14 |
15 | const navigate = useNavigate();
16 |
17 | const handleSubmit = (e) => {
18 | e.preventDefault();
19 |
20 | const eventObject = {
21 | title,
22 | date,
23 | image,
24 | color,
25 | };
26 |
27 | setEvent(eventObject);
28 |
29 | console.log(eventObject);
30 |
31 | navigate("/countdown");
32 | };
33 |
34 | return (
35 |
36 |
Monte a sua contagem regressiva!
37 |
76 |
77 | );
78 | };
79 |
80 | export default Countdown;
81 |
--------------------------------------------------------------------------------