initial commit

2025-11-12 12:39:09 -03:00
commit 9c5854fde5
9 changed files with 2325 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -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/
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -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"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@@ -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>
--- a/src/api.js
+++ b/src/api.js
@@ -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
+}
--- a/src/dom.js
+++ b/src/dom.js
@@ -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 }
--- a/src/main.js
+++ b/src/main.js
@@ -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)
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+/* Paleta e “vibe” moderna (cores frias + vidro) apenas com utilities */
+:root {
+  color-scheme: dark;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+})