Skip to content

Commit 635ccf7

Browse files
jneris-devjneris-dev
committed
🚀Aula 02 finalizada
1 parent e5d7e6a commit 635ccf7

12 files changed

+212
-30
lines changed

‎index.html

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="UTF-8" />
56
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite App</title>
8-
</head>
9-
<body>
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
12+
13+
<title>Event Platform</title>
14+
</head>
15+
16+
<body>
1017
<div id="root"></div>
1118
<script type="module" src="/src/main.tsx"></script>
12-
</body>
13-
</html>
19+
</body>
20+
21+
</html>

‎package-lock.json

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
},
1010
"dependencies": {
1111
"@apollo/client": "^3.6.8",
12+
"date-fns": "^2.28.0",
1213
"graphql": "^16.5.0",
14+
"phosphor-react": "^1.4.1",
1315
"react": "^18.0.0",
1416
"react-dom": "^18.0.0"
1517
},

‎src/App.tsx

+2-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,8 @@
1-
import { gql, useQuery } from "@apollo/client"
2-
3-
const GET_LESSONS_QUERY = gql`
4-
query {
5-
lessons {
6-
id
7-
title
8-
}
9-
}
10-
`
11-
12-
interface Lessons {
13-
id: string;
14-
title: string;
15-
}
1+
import { Event } from "./pages/Event"
162

173
function App() {
18-
const { data } = useQuery<{ lessons: Lessons[] }>(GET_LESSONS_QUERY)
19-
204
return (
21-
<ul>
22-
{data?.lessons.map(lesson => {
23-
return <li key={lesson.id}>{lesson.title}</li>
24-
})}
25-
</ul>
5+
<Event />
266
)
277
}
288

‎src/components/Header.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Logo } from "./Logo";
2+
3+
export function Header() {
4+
return (
5+
<header className="w-full py-5 flex items-center justify-center bg-gray-700 border-b border-gray-600">
6+
<Logo />
7+
</header>
8+
);
9+
}

‎src/components/Lesson.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { CheckCircle, Lock } from 'phosphor-react';
2+
import { isPast, format } from 'date-fns';
3+
import ptBR from 'date-fns/locale/pt-BR';
4+
5+
interface LessonProps {
6+
title: string;
7+
slug: string;
8+
availableAt: Date;
9+
type: 'live' | 'class';
10+
}
11+
12+
export function Lesson(props: LessonProps) {
13+
const isLessonAvailable = isPast(props.availableAt);
14+
const availableAtFormatted = format(props.availableAt, "EEEE' • 'd' de 'MMMM' • 'k'h'mm", {
15+
locale: ptBR,
16+
})
17+
18+
return (
19+
<a href="#">
20+
<span className="text-gray-300">
21+
{availableAtFormatted}
22+
</span>
23+
24+
<div className="rounded border border-gray-500 p-4 mt-2">
25+
<header className="flex items-center justify-between">
26+
{isLessonAvailable ? (
27+
<span className="text-sm text-blue-500 font-medium flex items-center gap-2">
28+
<CheckCircle size={20} />
29+
Conteúdo Liberado
30+
</span>
31+
) : (
32+
<span className="text-sm text-orange-500 font-medium flex items-center gap-2">
33+
<Lock size={20} />
34+
Em breve
35+
</span>
36+
)}
37+
38+
<span className="text-xs rounded px-2 py-[0.125rem] text-white border border-green-500 font-bold">
39+
{props.type === 'live' ? 'AO VIVO' : 'AULA PRÁTICA'}
40+
</span>
41+
</header>
42+
43+
<strong className="text-gray-200 mt-5 block">
44+
{props.title}
45+
</strong>
46+
</div>
47+
</a>
48+
);
49+
}

‎src/components/Logo.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function Logo() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="237"
6+
height="34"
7+
fill="none"
8+
viewBox="0 0 237 34"
9+
>
10+
<path
11+
fill="#fff"
12+
d="M.002 3.112a2.49 2.49 0 01.165-.987c.12-.314.304-.595.535-.83A2.906 2.906 0 012.615.572c.698 0 1.374.257 1.912.723.23.24.412.524.536.837a2.701 2.701 0 010 1.979 2.568 2.568 0 01-.536.837 2.889 2.889 0 01-1.907.723 2.901 2.901 0 01-1.908-.723 2.458 2.458 0 01-.538-.84 2.645 2.645 0 01-.172-.996zm4.96 23.146H.273V7.862h4.689v18.397zM8.012 16.973c0-2.853.686-5.145 2.055-6.883a6.653 6.653 0 015.528-2.606 5.869 5.869 0 014.802 2.09l.2-1.751h4.538v17.95a7.891 7.891 0 01-1.12 4.246 7.243 7.243 0 01-3.147 2.752 11.155 11.155 0 01-4.742.94c-1.378 0-2.74-.279-4.008-.812a7.08 7.08 0 01-2.946-2.11l2.208-3.02a5.905 5.905 0 004.543 2.08 4.356 4.356 0 003.104-1.059 3.938 3.938 0 001.103-2.993v-.994a5.775 5.775 0 01-4.555 1.935 6.647 6.647 0 01-3.05-.652 6.615 6.615 0 01-2.408-1.967c-1.397-1.752-2.085-4.089-2.085-6.942v-.21h-.025l.005.006zm4.997.355a6.723 6.723 0 001.026 3.956 3.233 3.233 0 002.799 1.443c.651.045 1.3-.088 1.878-.39a3.52 3.52 0 001.396-1.305v-7.825a3.448 3.448 0 00-1.374-1.305 3.504 3.504 0 00-1.86-.39 3.28 3.28 0 00-1.61.365 3.22 3.22 0 00-1.219 1.103c-.688.975-1.036 2.418-1.036 4.348zM33.098 7.833l.158 2.196a6.527 6.527 0 012.371-1.927 6.38 6.38 0 012.971-.62c1.97 0 3.438.597 4.39 1.79.953 1.194 1.456 2.936 1.486 5.293v12.249h-4.962V14.683a3.367 3.367 0 00-.684-2.344 3.086 3.086 0 00-1.069-.598 3.008 3.008 0 00-1.211-.13 3.349 3.349 0 00-1.821.454c-.553.32-1.01.794-1.313 1.367v13.37H28.45V7.845l4.647-.012zM47.512 3.112a2.304 2.304 0 01.185-.988 2.42 2.42 0 01.59-.831A3.439 3.439 0 0150.404.57c.772 0 1.52.256 2.117.723.508.486.792 1.142.792 1.826 0 .683-.284 1.34-.792 1.826a3.417 3.417 0 01-2.11.723c-.77 0-1.517-.257-2.11-.723a2.47 2.47 0 01-.594-.839 2.342 2.342 0 01-.19-.994h-.005zm5.483 23.149h-5.18V7.86h5.18v18.4zM62.454 3.334v4.612h3.107v3.677h-3.107v9.382c-.05.53.091 1.063.395 1.495a1.824 1.824 0 001.473.45c.476.002.95-.035 1.421-.114v3.803a9.672 9.672 0 01-2.939.449c-3.398 0-5.128-1.775-5.19-5.32V11.644h-2.642V7.968h2.643V3.356h4.841v-.025l-.002.003zM76.487 27.08a9.277 9.277 0 01-6.759-2.55c-1.74-1.699-2.605-3.957-2.605-6.797v-.494a11.295 11.295 0 011.098-5.08 8.141 8.141 0 013.111-3.465 8.72 8.72 0 014.59-1.22c2.577 0 4.62.815 6.098 2.449 1.478 1.633 2.226 3.94 2.226 6.929v2.055h-12.01a4.665 4.665 0 001.473 2.971 4.487 4.487 0 003.111 1.111 5.426 5.426 0 004.548-2.115l2.476 2.781a7.506 7.506 0 01-3.07 2.507 9.81 9.81 0 01-4.287.916v.002zm-.594-15.514a3.127 3.127 0 00-2.428 1.012 5.405 5.405 0 00-1.188 2.912h7.006v-.405a3.749 3.749 0 00-.908-2.608 3.252 3.252 0 00-2.45-.908h-.03l-.002-.003zM97.771 26.259h-4.957V0h4.957V26.26zM112.209 26.259c-.227-.444-.392-.997-.496-1.659-1.196 1.333-2.751 2.002-4.666 2.002-1.811 0-3.314-.523-4.504-1.572-1.191-1.049-1.786-2.372-1.786-3.966 0-1.96.725-3.464 2.179-4.513 1.453-1.049 3.553-1.58 6.3-1.59h2.273v-1.06c0-.854-.22-1.54-.659-2.051-.44-.513-1.131-.77-2.078-.77-.832 0-1.486.2-1.957.6-.474.4-.708.945-.708 1.64h-4.941c0-1.07.331-2.062.992-2.973.662-.91 1.597-1.626 2.804-2.144 1.206-.518 2.564-.778 4.069-.778 2.28 0 4.089.573 5.429 1.718 1.34 1.145 2.009 2.756 2.009 4.83v8.017c.012 1.754.256 3.082.735 3.983v.29h-4.992l-.003-.004zm-4.086-3.435c.728 0 1.402-.163 2.016-.486.614-.326 1.071-.76 1.367-1.308v-3.181h-1.846c-2.472 0-3.79.854-3.948 2.564l-.017.291c0 .614.217 1.123.649 1.523.434.4 1.026.6 1.779.6v-.003zM136.58 17.183c0 2.963-.632 5.273-1.898 6.931-1.265 1.659-3.032 2.488-5.3 2.488-2.006 0-3.608-.77-4.805-2.308l-.222 1.967h-4.444V.001h4.94v9.418c1.14-1.332 2.638-2 4.496-2 2.256 0 4.025.828 5.308 2.487 1.283 1.658 1.923 3.992 1.923 7v.274l.002.003zm-4.94-.358c0-1.868-.296-3.233-.889-4.094-.592-.861-1.475-1.29-2.65-1.29-1.572 0-2.655.643-3.247 1.932v7.299c.604 1.298 1.697 1.95 3.282 1.95 1.584 0 2.643-.788 3.146-2.36.239-.752.358-1.897.358-3.437z"
13+
></path>
14+
<path
15+
fill="#C4C4CC"
16+
d="M164.51 17.501h-2.283v4.53h-2.048v-11.78h4.143c1.36 0 2.408.306 3.149.915.74.61 1.108 1.493 1.108 2.648 0 .787-.19 1.449-.57 1.98-.38.532-.911.94-1.59 1.226l2.646 4.906v.106h-2.194l-2.364-4.531h.003zm-2.283-1.65h2.105c.691 0 1.229-.176 1.619-.524.39-.348.582-.824.582-1.429 0-.604-.18-1.12-.538-1.466-.358-.345-.893-.523-1.606-.533h-2.162V15.85zM179.066 16.773h-4.839v3.625h5.656v1.634h-7.704V10.25h7.648v1.65h-5.6v3.253h4.839v1.62zM189.803 19.29h-4.565l-.955 2.744h-2.127l4.452-11.783h1.836l4.459 11.783h-2.137l-.963-2.744zm-3.99-1.65h3.415l-1.707-4.89-1.708 4.89zM204.716 18.197c-.119 1.256-.583 2.238-1.392 2.941-.81.703-1.885 1.056-3.228 1.056-.938 0-1.764-.222-2.48-.668-.715-.445-1.266-1.079-1.656-1.898-.387-.82-.589-1.772-.607-2.858v-1.1c0-1.11.198-2.09.59-2.937.392-.846.96-1.5 1.695-1.96.736-.458 1.587-.688 2.554-.688 1.301 0 2.347.353 3.139 1.057.792.703 1.254 1.7 1.385 2.99h-2.039c-.096-.846-.343-1.458-.74-1.833-.397-.375-.977-.563-1.745-.563-.89 0-1.574.326-2.05.977-.479.652-.721 1.605-.733 2.863v1.044c0 1.273.227 2.245.683 2.917.457.668 1.123 1.004 2.004 1.004.805 0 1.409-.18 1.814-.543.405-.363.661-.962.77-1.804h2.038l-.002.003zM216.481 11.902h-3.674v10.132h-2.031V11.902h-3.642V10.25h9.347v1.65zM222.759 10.251h2.039v8.262c0 1.127-.353 2.023-1.057 2.687-.703.664-1.633.995-2.788.995-1.229 0-2.179-.311-2.848-.93-.669-.62-1.004-1.484-1.004-2.59h2.038c0 .627.156 1.096.467 1.412.31.316.76.474 1.347.474.55 0 .989-.183 1.315-.545.326-.366.489-.867.489-1.51V10.25h.002zM234.952 18.999c0-.518-.183-.918-.545-1.197-.363-.279-1.022-.563-1.972-.849-.95-.286-1.705-.604-2.265-.955-1.074-.674-1.612-1.555-1.612-2.638 0-.95.388-1.732 1.163-2.347.774-.614 1.779-.922 3.015-.922.819 0 1.55.15 2.194.454a3.597 3.597 0 011.513 1.29c.367.558.55 1.177.55 1.858h-2.038c0-.614-.193-1.095-.578-1.443-.385-.348-.938-.524-1.656-.524-.668 0-1.189.144-1.557.43-.37.286-.555.686-.555 1.197 0 .432.2.792.6 1.08.399.29 1.056.57 1.974.842.918.271 1.653.582 2.208.93.556.348.963.748 1.222 1.197.259.452.387.977.387 1.582 0 .982-.375 1.762-1.127 2.342-.753.58-1.775.87-3.063.87a5.755 5.755 0 01-2.352-.473c-.715-.316-1.27-.75-1.668-1.308-.397-.555-.594-1.204-.594-1.942h2.048c0 .669.222 1.187.664 1.555.441.367 1.075.55 1.902.55.713 0 1.246-.143 1.607-.432.357-.288.538-.671.538-1.145l-.003-.002z"
17+
></path>
18+
<path fill="#00B37E" d="M150.271 33.146h-4.958V.57h4.958v32.576z"></path>
19+
</svg>
20+
);
21+
}

‎src/components/Sidebar.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { gql, useQuery } from "@apollo/client";
2+
3+
import { Lesson } from "./Lesson";
4+
5+
const GET_LESSONS_QUERY = gql`
6+
query {
7+
lessons(orderBy: availableAt_ASC, stage: PUBLISHED) {
8+
id
9+
lessonType
10+
availableAt
11+
title
12+
slug
13+
}
14+
}
15+
`
16+
17+
interface GetLessonsQueryResponse {
18+
lessons: {
19+
id: string;
20+
title: string;
21+
slug: string;
22+
availableAt: string;
23+
lessonType: 'live' | 'class'
24+
}[]
25+
}
26+
27+
export function Sidebar() {
28+
const { data } = useQuery<GetLessonsQueryResponse>(GET_LESSONS_QUERY);
29+
30+
return (
31+
<aside className="w-[348px] bg-gray-700 p-6 border-l border-gray-600">
32+
<span className="font-bold text-2xl pb-6 mb-6 border-b border-gray-500 block">
33+
Cronograma de aulas
34+
</span>
35+
36+
<div className="flex flex-col gap-8">
37+
{data?.lessons.map(lessons => {
38+
return (
39+
<Lesson
40+
key={lessons.id}
41+
title={lessons.title}
42+
slug={lessons.slug}
43+
availableAt={new Date(lessons.availableAt)}
44+
type={lessons.lessonType}
45+
/>
46+
)
47+
})}
48+
</div>
49+
</aside>
50+
);
51+
}

‎src/components/Video.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function Video() {
2+
return (
3+
<div className="flex-1">
4+
<h1>Video</h1>
5+
</div>
6+
);
7+
}

‎src/pages/Event.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Header } from "../components/Header";
2+
import { Sidebar } from "../components/Sidebar";
3+
import { Video } from "../components/Video";
4+
5+
export function Event() {
6+
return (
7+
<div className="flex flex-col min-h-screen">
8+
<Header />
9+
<main className="flex flex-1">
10+
<Video />
11+
<Sidebar />
12+
</main>
13+
</div>
14+
);
15+
}

‎src/styles/global.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
@tailwind utilities;
44

55
body {
6-
@apply bg-zinc-900 text-zinc-100;
6+
@apply bg-gray-900 text-gray-100;
7+
-webkit-font-smoothing: antialiased;
78
}

‎tailwind.config.js

+30-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,36 @@ module.exports = {
44
'./src/**/*.tsx'
55
],
66
theme: {
7-
extend: {},
7+
extend: {
8+
fontFamily: {
9+
sans: 'Roboto, sans-serif',
10+
},
11+
colors: {
12+
green: {
13+
300: '#00B37E',
14+
500: '#00875F',
15+
700: '#015F43',
16+
},
17+
blue: {
18+
500: '#81D8F7',
19+
},
20+
orange: {
21+
500: '#FBA94C',
22+
},
23+
red: {
24+
500: '#F75A68',
25+
},
26+
gray: {
27+
100: '#E1E1E6',
28+
200: '#C4C4CC',
29+
300: '#8D8D99',
30+
500: '#323238',
31+
600: '#29292E',
32+
700: '#121214',
33+
900: '#09090A'
34+
}
35+
},
36+
},
837
},
938
plugins: [],
1039
}

0 commit comments

Comments
 (0)