History Page - Copy this React, Tailwind Component to your project
Project Description: I'm working on a HistoryPage component in a Next.js application that retrieves and displays AI generated responses from a database based on the logged in user's email. The existing code functions correctly, but I want to improve the UI to make it more visually appealing and responsive. Additionally, I want to include a "Copy" button that allows users to easily copy the AI response to their clipboard. Current Code: javascript Copy code "use client"; import React, { useEffect, useState } from "react"; import { useUser } from "@clerk/nextjs"; import { db } from "@/utils/dbconnect"; // Ensure this is your database connection utility import { aiOutput } from "@/utils/Schema"; // Your schema for AI outputs import { eq } from "drizzle orm"; // For querying the database import Link from "next/link"; // Define the type for your AI output data type AiOutputData = { id: number; formData: string; aiResponse: string | null; slug: string; createdBy: string; createdAt: string | null; isPremium: string | null; }; const HistoryPage = () => { const { user } = useUser(); // Use the defined type for the aiData state const [aiData, setAiData] = useState<AiOutputData[]>([]); // State to store fetched AI data useEffect(() => { const fetchPremiumStatus = async () => { try { // Ensure user email is defined const email = user?.primaryEmailAddress?.emailAddress; if (!email) { console.error("User email is not defined."); return; // Exit if email is undefined } const data = await db .select() .from(aiOutput) .where(eq(aiOutput.createdBy, email)); // Use the email variable here // Log the fetched data to check if it's correct setAiData(data); } catch (error) { console.error("Error fetching premium status:", error); } }; // Call the function to fetch data fetchPremiumStatus(); }, [user]); return ( <main className="flex 1 overflow y auto pt 16 px 4 sm:px 6 lg:px 8 bg gray 100 dark:bg gray 900"> hi setting <div> {aiData.length > 0 ? ( aiData.map((item) => ( <div key={item.id}> <hr /> <h1 className="bg red">{item.id}</h1> <hr /> <h3>{item.formData}</h3> <hr /> <p>{item.aiResponse}</p> <hr /> <h1>{item.slug}</h1> </div> )) ) : ( <p>No AI data found.</p> )} </div> </main> ); }; export default HistoryPage; Enhancements Needed: Responsive Design: I want the UI to be responsive and visually appealing on both desktop and mobile devices. Copy Button: Add a button that allows users to copy the AI response (<p>{item.aiResponse}</p>) to their clipboard. Visual Aesthetics: Improve the overall aesthetics with modern UI components (using Tailwind CSS or similar), including hover effects, proper spacing, and clear typography.
