GPT

Frontend Implementation

import Layout from '../layouts/Layout.astro' import { prisma } from '../lib/prisma' const users = await prisma.user.findMany({ include: { posts: true } }) Users Add User {users.map((user) = ( {user

Prompt text

Original English text. Replace placeholders with your own details.

---
import Layout from '../layouts/Layout.astro'
import { prisma } from '../lib/prisma'

const users = await prisma.user.findMany({
 include: {
 posts: true
 }
})
---

<Layout title="Users">
 <main>
 <h1>Users</h1>

 <form id="userForm" class="user-form">
 <input type="email" name="email" placeholder="Email" required />
 <input type="text" name="name" placeholder="Name" />
 <button type="submit">Add User</button>
 </form>

 <ul class="user-list">
 {users.map((user) => (
 <li>
 <span>{user.name} ({user.email})</span>
 <button class="delete-user" data-user-id={user.id}>Delete</button>
 </li>
 ))}
 </ul>
 </main>
</Layout>

<style>
 .user-form {
 margin-bottom: 2rem;
 }

 .user-form input {
 margin-right: 0.5rem;
 }

 .user-list {
 list-style: none;
 padding: 0;
 }

 .user-list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.5rem;
 border-bottom: 1px solid #eee;
 }

 .user-list button {
 margin-left: 1rem;
 }
</style>

<script>
 const userForm = document.getElementById('userForm')
 const userList = document.querySelector('.user-list')

 userForm?.addEventListener('submit', async (e) => {
 e.preventDefault()
 const formData = new FormData(e.target as HTMLFormElement)
 const data = {
 email: formData.get('email'),
 name: formData.get('name')
 }

 try {
 const response = await fetch('/api/users', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 })

 if (!response.ok) throw new Error('Failed to create user')

 const user = await response.json()
 const li = document.createElement('li')
 li.innerHTML = `
 <span>${user.name} (${user.email})</span>
 <button class="delete-user" data-user-id="${user.id}">Delete</button>
 `
 userList?.appendChild(li)
 ;(e.target as HTMLFormElement).reset()
 } catch (error) {
 console.error('Failed to create user:', error)
 }
 })

 userList?.addEventListener('click', async (e) => {
 const target = e.target as HTMLElement
 if (target.classList.contains('delete-user')) {
 const userId = target.getAttribute('data-user-id')
 try {
 const response = await fetch(`/api/users/${userId}`, {
 method: 'DELETE'
 })

 if (!response.ok) throw new Error('Failed to delete user')

 target.closest('li')?.remove()
 } catch (error) {
 console.error('Failed to delete user:', error)
 }
 }
 })
</script>

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →