Skip to content

Commit 6a58281

Browse files
IcaroSilvaFKIcaroSilvaFK
committed
feat: create new components
1 parent 514255a commit 6a58281

File tree

10 files changed

+141
-35
lines changed

10 files changed

+141
-35
lines changed

‎public/assets/js/components/card-component.js‎

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { LitElement, css, html } from 'https://cdn.jsdelivr.net/npm/lit@3.1.1/+esm'
1+
import { LitElement, css, html } from 'lit';
2+
import { classMap } from 'lit/directives/class-map.js';
23

3-
import "./pill-component.js"
4+
import "./pill-component.js";
45

56
class CardComponent extends LitElement {
67
static styles = css`
@@ -107,61 +108,98 @@ class CardComponent extends LitElement {
107108
padding: .5rem 1rem;
108109
border-radius: calc(.5rem - 2px);
109110
border: 0;
111+
transition: filter .3s linear;
112+
}
113+
.card>footer>button>div {
114+
display: flex;
115+
align-items: center;
116+
gap: 16px;
117+
}
118+
.card>footer>div {
119+
display: flex;
120+
align-items: center;
121+
gap: 6px;
122+
}
123+
.card>footer>div>svg {
124+
width: 18px;
125+
height: 18px;
126+
color: rgb(234 179 8 / 1);
127+
}
128+
.card>footer>div>span {
129+
font-size: .875rem;
130+
line-height: 1.25rem;
131+
color:var(--muted-foreground);
132+
}
133+
.card>footer>button svg {
134+
width: 18px;
135+
height: 18px;
136+
}
137+
.card>footer>button:hover{
138+
filter: brightness(.9)
110139
}
111140
`
112141
static properties = {
113-
title: {type: String}
142+
title: {type: String},
143+
description: {type: String},
144+
tags: {type: Array},
145+
score: {type: Number},
146+
difficulty: {type: String},
114147
}
115148

116149
constructor() {
117150
super()
118-
this.title = "Hello World!"
151+
this.title =""
152+
this.description = ""
153+
this.tags = ""
154+
this.score = 0
155+
this.difficulty = ""
119156
}
120157

121158
render() {
159+
const classes = {
160+
pill: true,
161+
intermediate: this.difficulty === "intermediate",
162+
beginner: this.difficulty === "beginner",
163+
advanced: this.difficulty === "advanced",
164+
}
122165
return html/* html */`
123166
<li class="card">
124167
<header>
125-
<h3>Build a Responsive Dashboard</h3>
168+
<h3>${this.title}</h3>
126169
<span>
127-
<span class="advanced pill">Advanced</span>
170+
<span class="${classMap(classes)}">${this.difficulty}</span>
128171
</span>
129172
</header>
130173
<p>
131-
Create a responsive admin dashboard with charts and data visualization
174+
${this.description}
132175
</p>
133-
134176
<ul>
135177
${
136-
Array.from({length: 3}).map((_,idx) => html`<pill-component text="test-${idx}"></pill-component>`)
178+
this.tags.map((tag) => html`<pill-component text="${tag}"></pill-component>`)
137179
}
138-
<template x-for="t in f.tags">
139-
<li x-text="t"></li>
140-
</template>
141180
</ul>
142181
<footer>
143182
<div>
144-
<i data-lucide="book"></i>
183+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
145184
<span>
146185
Popularity:
147-
<span x-text="f.popularity"></span>
186+
<span>${this.score}</span>
148187
</span>
149188
</div>
150-
<button>
189+
<button @click="${this.handleClickViewChallenge}">
151190
<div>
152-
<i data-lucide="code"></i>
191+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
153192
<span>View Challenge</span>
154193
</div>
155-
<i data-lucide="arrow-right"></i>
194+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
156195
</button>
157196
</footer>
158197
</li>
159198
`
160199
}
161200

162-
163-
changeTitle() {
164-
this.title = 'Lit';
201+
handleClickViewChallenge() {
202+
console.log("clicou")
165203
}
166204
}
167205

‎public/assets/js/components/pill-component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, css, html } from 'https://cdn.jsdelivr.net/npm/lit@3.1.1/+esm'
1+
import { LitElement, css, html } from 'lit'
22

33
class PillComponent extends LitElement {
44
static styles = css`

‎public/assets/js/components/reset-css.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, css, html } from 'https://cdn.jsdelivr.net/npm/lit@3.1.1/+esm';
1+
import { LitElement, css, html } from 'lit';
22

33
class ResetCssComponent extends LitElement {
44
static styles = css`

‎public/assets/js/pages/home/challenge-list-component.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { LitElement, css, html } from 'lit';
2+
3+
import "../../components/card-component.js";
4+
5+
class ChallengeListComponent extends LitElement {
6+
static styles= css`
7+
.section__cards {
8+
display: grid;
9+
grid-template-columns: repeat(3, 1fr);
10+
gap: 12px;
11+
width: 100%;
12+
position: relative;
13+
z-index: 1;
14+
width: 1;
15+
padding: 2rem;
16+
list-style: none;
17+
max-width: 1216px;
18+
}
19+
`
20+
featuredChallenges = [
21+
{
22+
id: "1",
23+
title: "Build a Responsive Dashboard",
24+
description: "Create a responsive admin dashboard with charts and data visualization",
25+
level: "intermediate",
26+
tags: ["React", "CSS", "Chart.js"],
27+
popularity: 4.8,
28+
},
29+
{
30+
id: "2",
31+
title: "E-commerce Product Page",
32+
description: "Design and implement a product detail page with image gallery and cart functionality",
33+
level: "beginner",
34+
tags: ["HTML", "CSS", "JavaScript"],
35+
popularity: 4.5,
36+
},
37+
{
38+
id: "3",
39+
title: "Real-time Chat Application",
40+
description: "Build a chat application with real-time messaging using WebSockets",
41+
level: "advanced",
42+
tags: ["React", "Node.js", "WebSockets"],
43+
popularity: 4.9,
44+
},
45+
];
46+
render() {
47+
48+
return html/*html*/`
49+
<ul class="section__cards">
50+
${this.featuredChallenges.map((challenge) => html/*html*/`<card-component title="${challenge.title}" description="${challenge.description}" tags="${JSON.stringify(challenge.tags)}" score="${challenge.popularity}" difficulty="${challenge.level}"></card-component>`)}
51+
</ul>
52+
`
53+
}
54+
}
55+
56+
customElements.define("challenge-list-component",ChallengeListComponent)

‎public/assets/styles/pages/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,12 +152,12 @@
152152
width: 18px;
153153
height: 18px;
154154
}
155-
.section__cards {
155+
/* .section__cards {
156156
display: flex;
157157
gap: 12px;
158158
width: 100%;
159159
position: relative;
160160
z-index: 1;
161161
width: 100%;
162162
padding: 2rem;
163-
}
163+
} */

‎public/pages/index.gotmpl‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="/assets/styles/base.css">
88
<link rel="stylesheet" href="/assets/styles/pages/index.css">
9-
{{ template "templates/scripts.tmpl" }}
109
{{ template "templates/head.tmpl" }}
10+
{{ template "templates/scripts.tmpl" }}
1111
<title>DEVELOPER ACADEMY | Login</title>
1212
</head>
1313

@@ -73,11 +73,8 @@
7373
</a>
7474
</header>
7575
</div>
76-
<ul class="section__cards">
77-
<card-component></card-component>
78-
<card-component></card-component>
79-
<card-component></card-component>
80-
</ul>
76+
{{ template "pages/challenge_list.tmpl"}}
77+
8178
<!-- <ul class="section__cards">
8279
<template x-for="f in featuredChallenges">
8380
<li :node-key="f.id" class="card">

‎public/pages/pages-components/list-challenges.gotmpl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{ define "pages/challenge_list.tmpl" }}
2+
<challenge-list-component></challenge-list-component>
3+
{{end}}

‎public/pages/templates/footer.gotmpl‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,11 @@
55
<footer x-data="{
66
year: new Date().getFullYear()
77
}" class="container__footer">
8-
<span>
9-
&COPY;
10-
</span>
118

129
<span x-text="year + ' Developer Academy. Todos os direitos reservados.'"></span>
1310
</footer>
1411
<script src="/assets/js/libs/lucide.js"></script>
15-
<script>
12+
<script defer>
1613
lucide.createIcons();
1714
</script>
1815
{{ end }}

‎public/pages/templates/head.gotmpl‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{{ define "templates/head.tmpl" }}
22

3-
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
43
<link rel="stylesheet" href="/assets/styles/base.css">
54
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
65
<script src="https://unpkg.com/dayjs@1.8.21/plugin/isBetween.js"></script>
@@ -21,4 +20,19 @@
2120
dayjs.extend(window.dayjs_plugin_relativeTime)
2221
dayjs.locale('pt-br')
2322
</script>
23+
<script type="importmap">
24+
{
25+
"imports": {
26+
"lit": "https://unpkg.com/lit/index.js",
27+
"lit/": "https://unpkg.com/lit/",
28+
"@lit/reactive-element": "https://unpkg.com/@lit/reactive-element/reactive-element.js",
29+
"@lit/reactive-element/": "https://unpkg.com/@lit/reactive-element/",
30+
"lit-element": "https://unpkg.com/lit-element/index.js",
31+
"lit-element/": "https://unpkg.com/lit-element/",
32+
"lit-html": "https://unpkg.com/lit-html/lit-html.js",
33+
"lit-html/": "https://unpkg.com/lit-html/",
34+
"axios": "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"
35+
}
36+
}
37+
</script>
2438
{{end}}

‎public/pages/templates/scripts.gotmpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{{define "templates/scripts.tmpl"}}
22
<script type="module" src="/assets/js/components/card-component.js"></script>
33
<script type="module" src="/assets/js/components/reset-css.js"></script>
4+
<script type="module" src="/assets/js/pages/home/challenge-list-component.js"></script>
45

56
{{end}}

0 commit comments

Comments
 (0)