Workshop/workshop-js
22
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
arthur
2025-11-12 12:39:09 -03:00
commit 9c5854fde5
9 changed files with 2325 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
.gitignore vendored Normal file
View File

@@ -0,0 +1,141 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.*
!.env.example
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
.output
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Sveltekit cache directory
.svelte-kit/
# vitepress build output
**/.vitepress/dist
# vitepress cache directory
**/.vitepress/cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# Firebase cache directory
.firebase/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v3
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
# Vite files
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
.vite/

2006
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

23
package.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "js-workshop",
"version": "1.0.0",
"main": "vite.config.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@tailwindcss/vite": "^4.1.17",
"tailwindcss": "^4.1.17",
"vite": "^7.2.2"
},
"dependencies": {
"axios": "^1.13.2",
"toastify-js": "^1.12.0"
}
}

36
public/index.html Normal file
View File

@@ -0,0 +1,36 @@
<!doctype html>
<html lang="pt-BR" class="h-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Busca de Workshops</title>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body class="h-full text-slate-100 antialiased">
<main class="max-w-6xl mx-auto px-4 py-12">
<header class="mb-8">
<h1 class="text-3xl font-semibold tracking-tight">Busca de Workshops</h1>
</header>
<section class="backdrop-blur-md bg-white/5 ring-1 ring-white/10 rounded-2xl p-6 shadow-lg">
<form id="search-form" class="flex flex-col sm:flex-row gap-3">
<input id="q" name="q"
class="flex-1 rounded-xl bg-white/5 ring-1 ring-white/10 px-4 py-2 placeholder:text-slate-500
focus:outline-none focus:ring-2 focus:ring-sky-500"
placeholder="Buscar por título..." autocomplete="off" />
<button type="submit"
class="rounded-xl px-5 py-2 font-medium bg-sky-600 hover:bg-sky-500 transition
shadow-[0_8px_30px_rgb(2,132,199,0.35)]">
Buscar
</button>
</form>
<p id="meta" class="text-sm text-slate-400 mt-3"></p>
<div id="results"
class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-4"></div>
</section>
</main>
<script type="module" src="/src/main.js"></script>
</body>
</html>

16
src/api.js Normal file
View File

@@ -0,0 +1,16 @@
import axios from 'axios'
export const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:5000'
const TOKEN = import.meta.env.VITE_TOKEN ?? ''
// ajuste o path caso sua API seja /api/workshops
const WORKSHOPS_PATH = '/workshops'
const getHeaders = () => {
return {
Authorization: `Bearer ${TOKEN}`
}
}
export async function searchWorkshops(q) {
const { data } = await axios.get(`${API_BASE}${WORKSHOPS_PATH}`, { params: { q }, headers: getHeaders() })
return data // espera-se um array
}

44
src/dom.js Normal file
View File

@@ -0,0 +1,44 @@
export function renderList(container, items = []) {
container.innerHTML = ''
if (!Array.isArray(items) || items.length === 0) {
container.insertAdjacentHTML('beforeend', `<p class="text-slate-400">Nenhum resultado.</p>`)
return
}
const html = items.map(toCardHtml).join('')
container.insertAdjacentHTML('beforeend', html)
}
export function updateMeta(el, text = '') { el.textContent = text }
export function renderLoading(container) {
const skeleton = Array.from({ length: 6 }).map(() =>
`<div class="h-28 rounded-2xl bg-white/5 ring-1 ring-white/10 animate-pulse"></div>`
).join('')
container.innerHTML = `<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">${skeleton}</div>`
}
export function debounce(fn, ms = 350) {
let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms) }
}
function toCardHtml(w) {
const title = escapeHtml(w?.title ?? 'Sem título')
const where = w?.isOnline ? 'Online' : escapeHtml(w?.location ?? 'Presencial')
const dt = formatDateRange(w?.startAt, w?.endAt)
const isOnlineDecorator = w?.isOnline ? 'bg-blue-700' : 'bg-purple-700'
return `
<article class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-4 shadow-md hover:bg-white/7.5 transition">
<div class="flex items-center justify-between mb-2">
<span class="text-xs px-2 py-0.5 rounded-full text-slate-200 ring-1 ring-white/10 ${isOnlineDecorator}">${where}</span>
</div>
<h3 class="text-lg font-medium mb-1">${title}</h3>
<p class="text-sm text-slate-400">${dt}</p>
</article>
`
}
function formatDateRange(a, b) {
try { return `${new Date(a).toLocaleString()} — ${new Date(b).toLocaleString()}` } catch { return '' }
}
function escapeHtml(s = '') { const d = document.createElement('div'); d.textContent = s; return d.innerHTML }

47
src/main.js Normal file
View File

@@ -0,0 +1,47 @@
import Toastify from 'toastify-js'
import 'toastify-js/src/toastify.css'
import { searchWorkshops } from './api.js'
import { renderList, updateMeta, renderLoading, debounce } from './dom.js'
const form = document.getElementById('search-form')
const input = document.getElementById('q')
const results = document.getElementById('results')
const meta = document.getElementById('meta')
function toast(text, kind = 'info') {
const bg = { info: '#3b82f6', ok: '#10b981', warn: '#f59e0b', err: '#ef4444' }[kind] ?? '#3b82f6'
Toastify({ text, gravity: 'top', position: 'right', backgroundColor: bg, duration: 2400 }).showToast()
}
async function runSearch(term) {
const q = term.trim()
if (!q) {
updateMeta(meta, 'Digite um termo para buscar.')
renderList(results, [])
toast('Campo de busca vazio.', 'warn')
return
}
updateMeta(meta, 'Carregando…')
renderLoading(results)
try {
const items = await searchWorkshops(q)
renderList(results, items)
updateMeta(meta, `Encontrados ${items?.length ?? 0} resultado(s) para “${q}”.`)
toast('Busca concluída.', 'ok')
} catch (err) {
console.error(err)
renderList(results, [])
updateMeta(meta, '')
toast('Erro ao buscar. Confira console/Network.', 'err')
}
}
// Submit on-demand
form.addEventListener('submit', (e) => { e.preventDefault(); runSearch(input.value) })
// Busca reativa com debounce
const debounced = debounce(() => runSearch(input.value), 500)
input.addEventListener('input', debounced)

6
src/style.css Normal file
View File

@@ -0,0 +1,6 @@
@import "tailwindcss";
/* Paleta e “vibe” moderna (cores frias + vidro) apenas com utilities */
:root {
color-scheme: dark;
}

6
vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})