GPT

Frontend Implementation

import Layout from '../layouts/Layout.astro' import { prisma } from '../lib/prisma' const posts = await prisma.post.findMany({ include: { author: true } }) Posts Add Post {posts.map((post) = (

Prompt text

Original English text. Replace placeholders with your own details.

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

const posts = await prisma.post.findMany({
 include: {
 author: true
 }
})
---

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

 <form id="postForm" class="post-form">
 <input type="text" name="title" placeholder="Title" required />
 <input type="text" name="content" placeholder="Content" />
 <input type="number" name="authorId" placeholder="Author ID" required />
 <button type="submit">Add Post</button>
 </form>

 <ul class="post-list">
 {posts.map((post) => (
 <li>
 <div class="post-header">
 <h2>{post.title}</h2>
 <div class="post-actions">
 <button
 class="toggle-publish"
 data-post-id={post.id}
 data-published={post.published}
 >
 {post.published ? 'Unpublish' : 'Publish'}
 </button>
 <button class="delete-post" data-post-id={post.id}>
 Delete
 </button>
 </div>
 </div>
 <p>{post.content}</p>
 <p class="post-meta">By: {post.author.name}</p>
 </li>
 ))}
 </ul>
 </main>
</Layout>

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

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

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

 .post-list li {
 margin-bottom: 2rem;
 padding: 1rem;
 border: 1px solid #eee;
 border-radius: 4px;
 }

 .post-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 }

 .post-header h2 {
 margin: 0;
 }

 .post-actions button {
 margin-left: 0.5rem;
 }

 .post-meta {
 color: #666;
 font-size: 0.9rem;
 margin-top: 1rem;
 }
</style>

<script>
 const postForm = document.getElementById('postForm')
 const postList = document.querySelector('.post-list')

 postForm?.addEventListener('submit', async (e) => {
 e.preventDefault()
 const formData = new FormData(e.target as HTMLFormElement)
 const data = {
 title: formData.get('title'),
 content: formData.get('content'),
 authorId: formData.get('authorId')
 }

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

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

 const post = await response.json()
 const li = document.createElement('li')
 li.innerHTML = `
 <div class="post-header">
 <h2>${post.title}</h2>
 <div class="post-actions">
 <button
 class="toggle-publish"
 data-post-id="${post.id}"
 data-published="false"
 >
 Publish
 </button>
 <button class="delete-post" data-post-id="${post.id}">
 Delete
 </button>
 </div>
 </div>
 <p>${post.content}</p>
 <p class="post-meta">By: ${post.author.name}</p>
 `
 postList?.appendChild(li)
 ;(e.target as HTMLFormElement).reset()
 } catch (error) {
 console.error('Failed to create post:', error)
 }
 })

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

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

 target.closest('li')?.remove()
 } catch (error) {
 console.error('Failed to delete post:', error)
 }
 }

 if (target.classList.contains('toggle-publish')) {
 const postId = target.getAttribute('data-post-id')
 const published = target.getAttribute('data-published') === 'true'
 try {
 const response = await fetch(`/api/posts/${postId}`, {
 method: 'PATCH',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({ published: !published })
 })

 if (!response.ok) throw new Error('Failed to update post')

 const post = await response.json()
 target.textContent = post.published ? 'Unpublish' : 'Publish'
 target.setAttribute('data-published', post.published.toString())
 } catch (error) {
 console.error('Failed to update post:', 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 →