initial commit

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
+}

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 }

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)

src/style.css

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