[V0_FILE]typescriptreact:file="app/components/FeedbackForm.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { submitFeedback } from "../actions/feedback" export function FeedbackForm() { const [error, setError] = useState("") const router = useRouter() async function handleSubmit(formData: FormData) { const result = await submitFeedback(formData) if (result.error) { setError(result.error) } else { setError("") router.refresh() } } return (

Suggest a modification

</motion.div>
        <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
          <Button type="submit">Submit Feedback</Button>
        </motion.div>
        {error && <p className="text-red-500">{error}</p>}
      </form>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/components/FeedbackList.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { getFeedbackList, voteFeedback } from "../actions/feedback"

type Feedback = {
  id: number
  title: string
  description: string
  upvotes: number
  downvotes: number
  date: string
}

type SortOption = "recent" | "upvotes"

export function FeedbackList() {
  const [feedbackList, setFeedbackList] = useState<Feedback[]>([])
  const [sortOption, setSortOption] = useState<SortOption>("recent")

useEffect(() => {
    getFeedbackList().then((list) => {
      setFeedbackList(sortFeedbackList(list, sortOption))
    })
  }, [sortOption])

async function handleVote(id: number, voteType: "upvote" | "downvote") {
    await voteFeedback(id, voteType)
    const updatedList = await getFeedbackList()
    setFeedbackList(sortFeedbackList(updatedList, sortOption))
  }

function sortFeedbackList(list: Feedback[], option: SortOption): Feedback[] {
    return [...list].sort((a, b) => {
      if (option === "recent") {
        return new Date(b.date).getTime() - new Date(a.date).getTime()
      } else {
        return b.upvotes - a.upvotes
      }
    })
  }

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="space-y-4"
    >
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Submitted Feedback</h2>
        <Select value={sortOption} onValueChange={(value: SortOption) => setSortOption(value)}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Sort by" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="recent">Most Recent</SelectItem>
            <SelectItem value="upvotes">Most Upvotes</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <AnimatePresence>
        {feedbackList.map((feedback) => (
          <motion.div
            key={feedback.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
            className="border p-4 rounded-md"
          >
            <h3 className="font-semibold">{feedback.title}</h3>
            <p className="text-sm text-gray-600">{feedback.description}</p>
            <p className="text-xs text-gray-400 mt-1">Submitted on: {feedback.date}</p>
            <div className="flex space-x-2 mt-2">
              <Button size="sm" variant="outline" onClick={() => handleVote(feedback.id, "upvote")}>
                👍 {feedback.upvotes}
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleVote(feedback.id, "downvote")}>
                👎 {feedback.downvotes}
              </Button>
            </div>
          </motion.div>
        ))}
      </AnimatePresence>
    </motion.div>
  )
}

[V0_FILE]typescript:file="app/actions/feedback.ts" isEdit="true"
"use server"

import { revalidatePath } from "next/cache"

export type Feedback = {
  id: number
  title: string
  description: string
  upvotes: number
  downvotes: number
  date: string
}

const feedbackList: Feedback[] = [
  {
    id: 1,
    title: "Improve search functionality",
    description: "The search feature could be more accurate",
    upvotes: 5,
    downvotes: 1,
    date: "2023-06-01",
  },
  {
    id: 2,
    title: "Add dark mode",
    description: "It would be great to have a dark mode option",
    upvotes: 8,
    downvotes: 2,
    date: "2023-06-02",
  },
]

export async function submitFeedback(formData: FormData) {
  const title = formData.get("title") as string
  const description = formData.get("description") as string

if (!title || !description) {
    return { error: "Title and description are required" }
  }

const newFeedback: Feedback = {
    id: feedbackList.length + 1,
    title,
    description,
    upvotes: 0,
    downvotes: 0,
    date: new Date().toISOString().split("T")[0], // Current date in YYYY-MM-DD format
  }

feedbackList.push(newFeedback)
  revalidatePath("/")
  return { success: true }
}

export async function getFeedbackList() {
  return feedbackList
}

export async function voteFeedback(id: number, voteType: "upvote" | "downvote") {
  const feedback = feedbackList.find((f) => f.id === id)
  if (feedback) {
    if (voteType === "upvote") {
      feedback.upvotes++
    } else {
      feedback.downvotes++
    }
  }
  revalidatePath("/")
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import { motion } from "framer-motion"
import { FeedbackForm } from "./components/FeedbackForm"
import { FeedbackList } from "./components/FeedbackList"

export default function Home() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="container mx-auto p-4"
    >
      <motion.h1
        initial={{ y: -20 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className="text-3xl font-bold mb-8"
      >
        User Feedback
      </motion.h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <FeedbackForm />
        <FeedbackList />
      </div>
    </motion.div>
  )
}
</article></body></html>

About

About