Contact me button working

Author: gitJamoo

next-js-app/contact-submissions/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

next-js-app/src/app/api/contact-submissions/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs/promises';
+import path from 'path';
+
+const submissionsDir = path.resolve(process.cwd(), 'contact-submissions');
+const submissionsFile = path.resolve(submissionsDir, 'submissions.json');
+
+async function getSubmissions() {
+  try {
+    const data = await fs.readFile(submissionsFile, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    return [];
+  }
+}
+
+export async function GET() {
+  try {
+    const submissions = await getSubmissions();
+    return NextResponse.json(submissions, { status: 200 });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}

next-js-app/src/app/api/contact/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs/promises';
+import path from 'path';
+
+const submissionsDir = path.resolve(process.cwd(), 'contact-submissions');
+const submissionsFile = path.resolve(submissionsDir, 'submissions.json');
+
+async function ensureSubmissionsDirExists() {
+  try {
+    await fs.mkdir(submissionsDir, { recursive: true });
+  } catch (error) {
+    console.error('Error creating submissions directory:', error);
+  }
+}
+
+async function getSubmissions() {
+  try {
+    await ensureSubmissionsDirExists();
+    const data = await fs.readFile(submissionsFile, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    return [];
+  }
+}
+
+async function saveSubmission(data: any) {
+  const submissions = await getSubmissions();
+  submissions.push(data);
+  await fs.writeFile(submissionsFile, JSON.stringify(submissions, null, 2));
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { name, email, message } = await req.json();
+
+    if (!name || !email || !message) {
+      return NextResponse.json({ message: 'Missing required fields' }, { status: 400 });
+    }
+
+    const newSubmission = {
+      name,
+      email,
+      message,
+      date: new Date().toISOString(),
+    };
+
+    await saveSubmission(newSubmission);
+
+    return NextResponse.json({ message: 'Submission saved' }, { status: 200 });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}

next-js-app/src/app/components/contact/ContactButton.tsx

@@ -0,0 +1,21 @@
+
+'use client';
+
+import { useState } from 'react';
+import ContactForm from './ContactForm';
+
+export default function ContactButton() {
+  const [showForm, setShowForm] = useState(false);
+
+  return (
+    <>
+      <button
+        className="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg"
+        onClick={() => setShowForm(true)}
+      >
+        Contact Me
+      </button>
+      {showForm && <ContactForm onClose={() => setShowForm(false)} />}
+    </>
+  );
+}

next-js-app/src/app/components/contact/ContactForm.tsx

@@ -0,0 +1,115 @@
+
+'use client';
+
+import { useState } from 'react';
+
+export default function ContactForm({ onClose }: { onClose: () => void }) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+    setSuccess(false);
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, email, message }),
+      });
+
+      if (response.ok) {
+        setSuccess(true);
+        setName('');
+        setEmail('');
+        setMessage('');
+      } else {
+        const data = await response.json();
+        setError(data.message || 'Something went wrong.');
+      }
+    } catch (error) {
+      setError('Something went wrong.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
+        <h2 className="text-2xl font-bold mb-4">Contact Me</h2>
+        {success ? (
+          <div className="text-green-500">Your message has been sent successfully!</div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Message
+              </label>
+              <textarea
+                id="message"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                rows={4}
+                className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                required
+              ></textarea>
+            </div>
+            {error && <div className="text-red-500 mb-4">{error}</div>}
+            <div className="flex justify-end">
+              <button
+                type="button"
+                onClick={onClose}
+                className="mr-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded"
+                disabled={submitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                disabled={submitting}
+              >
+                {submitting ? 'Submitting...' : 'Submit'}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

next-js-app/src/app/contact-submissions/page.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+const PASSWORD = 'password'; // Replace with a strong password
+
+export default function ContactSubmissions() {
+  const [password, setPassword] = useState('');
+  const [authenticated, setAuthenticated] = useState(false);
+  const [submissions, setSubmissions] = useState([]);
+  const [error, setError] = useState('');
+
+  const handlePasswordSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password === PASSWORD) {
+      setAuthenticated(true);
+    } else {
+      setError('Incorrect password');
+    }
+  };
+
+  useEffect(() => {
+    if (authenticated) {
+      const fetchSubmissions = async () => {
+        try {
+          const response = await fetch('/api/contact-submissions');
+          if (response.ok) {
+            const data = await response.json();
+            setSubmissions(data);
+          } else {
+            setError('Failed to fetch submissions.');
+          }
+        } catch (error) {
+          setError('Failed to fetch submissions.');
+        }
+      };
+      fetchSubmissions();
+    }
+  }, [authenticated]);
+
+  if (!authenticated) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <form onSubmit={handlePasswordSubmit} className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">
+          <h2 className="text-2xl font-bold mb-4">Enter Password</h2>
+          <div className="mb-4">
+            <label htmlFor="password" a className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Password
+            </label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            />
+          </div>
+          {error && <div className="text-red-500 mb-4">{error}</div>}
+          <button
+            type="submit"
+            className="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Submit
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-3xl font-bold mb-4">Contact Submissions</h1>
+      {submissions.length === 0 ? (
+        <p>No submissions yet.</p>
+      ) : (
+        <div className="space-y-4">
+          {submissions.map((submission: any, index: number) => (
+            <div key={index} className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
+              <p><strong>Name:</strong> {submission.name}</p>
+              <p><strong>Email:</strong> {submission.email}</p>
+              <p><strong>Message:</strong> {submission.message}</p>
+              <p><strong>Date:</strong> {new Date(submission.date).toLocaleString()}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

next-js-app/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import ContactButton from "./components/contact/ContactButton";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <ContactButton />
       </body>
     </html>
   );