Merge pull request #6 from OzPol/OzPol-patch-4

- Configured Tailwind CSS for the Next.js app styling

components/AvailabilityCalendar.tsx

@@ -0,0 +1,42 @@
+// components/AvailabilityCalendar.tsx
+
+import React, { useState } from 'react';
+import Calendar, { CalendarProps } from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+
+// Define a DateRange type
+type DateRange = [Date, Date];
+
+const AvailabilityCalendar: React.FC = () => {
+  const [date, setDate] = useState<Date | DateRange>(new Date());
+
+  const onChange: CalendarProps['onChange'] = (newDate) => {
+    if (newDate instanceof Date) {
+      setDate(newDate);
+    } else if (
+      Array.isArray(newDate) &&
+      newDate.every((value) => value instanceof Date)
+    ) {
+      setDate(newDate as DateRange);
+    } else {
+      setDate(new Date());
+    }
+    // TODO: Handle date selection (e.g., fetch availability or bookings)
+    console.log('Selected date:', date);
+    // TODO: Add code here to fetch availability or bookings based on the selected date
+  };
+
+  return (
+    <div>
+      <Calendar onChange={onChange} value={date} />
+      <p>
+        Selected date:{' '}
+        {Array.isArray(date)
+          ? date.map((d) => d.toDateString()).join(', ')
+          : date.toDateString()}
+      </p>
+    </div>
+  );
+};
+
+export default AvailabilityCalendar;

components/Button.tsx

@@ -0,0 +1,22 @@
+// components/Button.tsx
+// components/Button.tsx
+import React, { useState } from 'react';
+
+const Button: React.FC = () => {
+  const [clicked, setClicked] = useState(false);
+
+  const handleClick = () => {
+    setClicked(true);
+  };
+
+  return (
+    <button
+      style={{ backgroundColor: 'blue', color: 'white' }}
+      onClick={handleClick}
+    >
+      {clicked ? 'Clicked!' : 'Click Me'}
+    </button>
+  );
+};
+
+export default Button;

components/FormattedDate.tsx

@@ -0,0 +1,9 @@
+// components/FormattedDate.tsx
+import React from 'react';
+import { formatDate } from '../utils/formatDate';
+
+const FormattedDate: React.FC<{ date: Date }> = ({ date }) => {
+  return <span>{formatDate(date)}</span>;
+};
+
+export default FormattedDate;

components/Greeting.tsx

@@ -0,0 +1,43 @@
+// components/Greeting.tsx
+// a simple React component that displays a greeting
+// components/Greeting.tsx
+import React, { useState } from 'react';
+
+interface GreetingProps {
+  name: string;
+}
+
+const Greeting: React.FC<GreetingProps> = ({ name }) => {
+  const [greetingName, setGreetingName] = useState(name);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleClick = () => {
+    setGreetingName(inputValue);
+    setInputValue('');
+  };
+
+  return (
+    <div className="p-4 bg-white shadow-md rounded-md mb-4">
+      <h1 className="text-2xl font-bold mb-4">Hello, {greetingName}!</h1>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder="Enter your name"
+        className="border p-2 mb-4 w-full"
+      />
+      <button
+        onClick={handleClick}
+        className="bg-blue-500 text-white py-2 px-4 rounded w-full"
+      >
+        Change Name
+      </button>
+    </div>
+  );
+};
+
+export default Greeting;

components/ProfileDetails.tsx

@@ -0,0 +1,61 @@
+// components/ProfileDetails.tsx
+// Create a profile page to display and update user information.
+// This page will show the user's profile and allow updates.
+
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const ProfileDetails: React.FC = () => {
+  const [profile, setProfile] = useState<{
+    name: string;
+    email: string;
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const { data } = await axios.get('/api/profile/1'); // Example user ID
+        setProfile(data);
+      } catch (error) {
+        console.error('Error fetching profile:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProfile();
+  }, []);
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div>
+      <h1>User Profile</h1>
+      {profile && (
+        <div>
+          <p>Name: {profile.name}</p>
+          <p>Email: {profile.email}</p>
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              try {
+                const updatedProfile = { ...profile, name: 'New Name' }; // Example update
+                await axios.post('/api/profile/update', updatedProfile);
+                setProfile(updatedProfile);
+              } catch (error) {
+                console.error('Error updating profile:', error);
+              }
+            }}
+          >
+            <button type="submit">Update Profile</button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileDetails;

lib/sendEmail.ts

@@ -0,0 +1,30 @@
+// lib/sendEmail.ts
+import nodemailer from 'nodemailer';
+
+const transporter = nodemailer.createTransport({
+  service: 'Gmail',
+  auth: {
+    user: process.env.EMAIL_USERNAME,
+    pass: process.env.EMAIL_PASSWORD,
+  },
+});
+
+export const sendEmail = (to: string, subject: string, text: string) => {
+  const mailOptions = {
+    from: process.env.EMAIL_USERNAME,
+    to,
+    subject,
+    text,
+  };
+
+  return transporter.sendMail(mailOptions);
+};
+
+/* Notifications Backlog:
+Backend:
+    Set up email sending using a service like SendGrid or Nodemailer.
+    Create API endpoints for managing notification preferences.
+
+Frontend:
+    Create a notifications preferences page.
+    Implement UI for displaying notifications. */