Update working branch

.env

@@ -1,2 +1 @@
-NEXT_PUBLIC_EMAIL = isaiahntina47@gmail.com
-CHROME_EXECUTABLE_PATH = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+

.github/dependabot.yml

@@ -1,3 +1,4 @@
+
 # To get started with Dependabot version updates, you'll need to specify which
 # package ecosystems to update and where the package manifests are located.
 # Please see the documentation for all configuration options:

.gitignore

@@ -26,9 +26,9 @@ yarn-error.log*
 
 # local env files
 .env*.local
-
 # vercel
 .vercel
+.env
 
 # typescript
 *.tsbuildinfo

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}

app/components/ChristmasIcons.tsx

@@ -0,0 +1,70 @@
+'use client';
+import React from 'react';
+import { christmasIcons } from '../constants';
+import { useEffect, useState } from 'react';
+
+const ChristmasIcons: React.FC = () => {
+ const [positions, setPositions] = useState<Array<{ left: number; top: number }>>([]);
+
+ const getRandomPosition = (): { left: number; top: number } => {
+  const left = Math.random() * 100;
+  const top = Math.random() * 100;
+  return { left, top };
+ };
+
+ const checkCollision = (newPosition: { left: number; top: number }): boolean => {
+  const collisionThreshold = 10;
+
+  for (const position of positions) {
+   if (
+    Math.abs(position.left - newPosition.left) < collisionThreshold &&
+        Math.abs(position.top - newPosition.top) < collisionThreshold
+   ) {
+    return true; // Collision detected
+   }
+  }
+
+  return false; // No collision
+ };
+
+ useEffect(() => {
+  const newPositions: Array<{ left: number; top: number }> = [];
+
+  christmasIcons.forEach(() => {
+   let newPosition = getRandomPosition();
+
+   // Check for collisions and adjust position if needed
+   while (checkCollision(newPosition)) {
+    newPosition = getRandomPosition();
+   }
+
+   newPositions.push(newPosition);
+  });
+
+  setPositions(newPositions);
+ }, []); // Run once on component mount
+
+ return (
+  <>
+   {christmasIcons.map((icon, index) => (
+    <div
+     key={index}
+     style={{
+      position: 'absolute',
+      left: `${positions[index]?.left || 0}%`,
+      top: `${positions[index]?.top || 0}%`,
+      zIndex: -1,
+     }}
+    >
+     {icon.type === 'emoji' ? (
+      <span style={{ fontSize: '24px', filter: 'blur(0px)' }}>{icon.name}</span>
+     ) : (
+      <img src={icon.content} alt={icon.description} style={{ width: '50px', filter: 'blur(0px)' }} />
+     )}
+    </div>
+   ))}
+  </>
+ );
+};
+
+export default ChristmasIcons;

app/components/InspirationCards.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Inspocard from './inspoComponent';
+
+interface Quote {
+    quote: string;
+    source: string;
+    sourceUrl?: string;
+    }
+
+const InspirationCards = () => {
+ const [quotes, setQuotes] = React.useState<Quote[]>([]);
+ React.useEffect(() => {
+  fetch('/api/get_quotes')
+   .then((res) => res.json())
+   .then((data) => {
+    setQuotes(data);
+   });
+ }, []);
+
+ return (
+  <div className="flex flex-wrap justify-center gap-4 mt-1 mb-1">
+   {quotes.length > 0 ? (
+    quotes.map((quote, index) => (
+     <Inspocard
+      key={index}
+      quote={quote.quote}
+      source={quote.source}
+      sourceUrl={quote.sourceUrl}
+     />
+    ))
+   ) : (
+    <div className="text-center text-gray-600">
+                    No quotes available at the moment. Check back later!
+    </div>
+   )}
+  </div>
+ );
+};
+
+export default InspirationCards;

app/components/PromptConfiguration.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { promt } from '../constants';
+
+interface PromptConfigurationProps {
+    uniqueKey: string;
+    sanitizedInput: string;
+}
+
+const PromptConfiguration: React.FC<PromptConfigurationProps> = ({ uniqueKey, sanitizedInput }) => {
+ return (
+  <div>
+   <p className='text-white font-mono' key={uniqueKey + '-input'}>
+    <span className='text-red-500'>{promt[0].privilage}</span>
+    <span className='text-yellow-500'>{promt[0].connector}</span>
+    <span className='text-blue-500'>{promt[0].username}</span>
+    <span className='text-yellow-500'> ~ {promt[0].endofline} </span>
+    {sanitizedInput}
+   </p>
+  </div>
+ );
+};
+
+export default PromptConfiguration;

app/components/admin/QuoteForm.tsx

@@ -0,0 +1,111 @@
+// path: app/components/admin/QuoteForm.tsx
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
+
+interface FormData {
+    quote: string;
+    source?: string;
+    sourceUrl?: string;
+  }
+
+interface QuoteFormProps {
+    onSubmit: (data: FormData) => Promise<void>;
+  }
+
+const QuoteForm = ({ onSubmit }: QuoteFormProps) => {
+ const { register, handleSubmit, formState: { errors }, reset } = useForm<FormData>();
+ const [submitting, setSubmitting] = useState(false);
+ const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
+
+ const handleFormSubmit = async (data: FormData) => {
+  setSubmitting(true);
+  try {
+   console.log('Submitting form data:', data); // Debugging
+   await onSubmit(data);
+   console.log('Form submission successful'); // Debugging
+   setSubmitStatus('success');
+   setTimeout(() => {
+    setSubmitStatus('success');
+    setSubmitting(false);
+    reset();
+   }, 5000);
+  } catch (error) {
+   console.error('Error submitting form:', error); // Debugging
+   setSubmitStatus('error');
+   setTimeout(() => {
+    setSubmitStatus('error');
+    setSubmitting(false);
+   }, 5000);
+  }
+ };
+
+ return (
+  <div className="mx-auto max-w-lg px-4">
+   <form onSubmit={handleSubmit(handleFormSubmit)} className="mt-4 bg-black p-4 rounded-lg shadow-md">
+    <div className="mb-4">
+     <label htmlFor="quote" className="block text-sm font-medium text-gray-500">Quote</label>
+     <textarea
+      {...register('quote', { required: true })}
+      onChange={() => setSubmitting(false)}
+      id="quote"
+      className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm text-white font-mono rounded-md py-2 px-3 bg-gray-500 focus:outline-none"
+      rows={5}
+     />
+     {errors.quote && <p className="text-red-500 text-xs mt-1">Quote is required.</p>}
+    </div>
+    <div className="mb-4">
+     <label htmlFor="source" className="block text-sm font-medium text-gray-500">Source (Optional)</label>
+     <input
+      {...register('source')}
+      type="text"
+      id="source"
+      className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm text-white font-mono rounded-md py-2 px-3 bg-gray-500 focus:outline-none"
+     />
+    </div>
+    <div className="mb-4">
+     <label htmlFor="sourceUrl" className="block text-sm font-medium text-gray-500">Source URL (Optional)</label>
+     <input
+      {...register('sourceUrl')}
+      type="url"
+      id="sourceUrl"
+      className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm text-white font-mono rounded-md py-2 px-3 bg-gray-500 focus:outline-none"
+     />
+    </div>
+    <div className="mt-4">
+     <button
+      type="submit"
+      className={`w-full py-2 px-4 bg-blue-300 rounded-md font-mono text-white focus:outline-none ${
+       submitting ? 'bg-blue-300 hover:bg-blue-300' : 'bg-indigo-500 hover:bg-blue-300'
+      }`}
+      disabled={submitting}
+     >
+      {submitting ? (
+       <>
+        <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+         <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+         <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+                Submitting...
+       </>
+      ) : submitStatus === 'success' ? (
+       <span className="flex items-center">
+        <CheckCircleIcon className="h-5 w-5 text-green-500 mr-2" />
+                Submitted!
+       </span>
+      ) : submitStatus === 'error' ? (
+       <span className="flex items-center">
+        <ExclamationCircleIcon className="h-5 w-5 text-red-500 mr-2" />
+                Error Sending!
+       </span>
+      ) : (
+       'Submit'
+      )}
+     </button>
+    </div>
+   </form>
+  </div>
+ );
+};
+
+export default QuoteForm;

app/components/footer.tsx

@@ -0,0 +1,61 @@
+// path: app/components/footer.tsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const YOUR_PAT = process.env.GITHUB_PAT;
+
+type CommitData = {
+    latestCommit: string;
+    commitmessage: string;
+};
+
+const Footer = () => {
+ const [Commit, setLatestCommit] = useState<CommitData>({ latestCommit: '', commitmessage: '' });
+
+ useEffect(() => {
+  const fetchLatestCommit = async () => {
+   try {
+    const response = await axios.get('/api/latest-commit', {
+     headers: {
+      Authorization: `Bearer ${YOUR_PAT}`,
+     },
+    });
+    setLatestCommit(response.data);
+   } catch (error) {
+    throw new Error(`Error: ${error}`);
+   }
+  };
+
+  fetchLatestCommit();
+ }, []);
+
+ return (
+  <div className="footerm">
+   {/* add my nanéu, my discord jobs bot to your server */}
+   <div className='footer-right mt-2 mb-2'>
+    <h1 className="text-white text-md font-bold">Meet Nanéu,</h1>
+    <p className="text-white mb-1 text-sm">A discord jobs bot. Invite Nanéu to your server and add it to your jobs channel. You can configure it to your own job preferences.</p>
+    <p className="text-yellow-500 text-sm">
+     <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded' type='button'>
+      <a href="https://discord.com/oauth2/authorize?client_id=1217949022275506176" className='no-underline text-white' target="_blank" rel="noopener noreferrer">
+                Invite Nanéu to your server
+      </a>
+     </button>
+    </p>
+
+   </div>
+   <div className="footer-left">
+    <p className="text-white mb-1 text-sm">Current Project, Latest Github Commit</p>
+    <p className="text-yellow-500 text-sm">
+     <a id='latestrepo' href="https://github.com/Intina47/nan-u" className="no-underline text-current">
+      {Commit.latestCommit.slice(0, 12)}
+     </a>
+      :{' '}
+     <span className="text-white font-light text-sm">{Commit.commitmessage.length > 10 ? `${Commit.commitmessage.slice(0, 70)}...` : Commit.commitmessage}</span>
+    </p>
+   </div>
+  </div>
+ );
+};
+
+export default Footer;

app/components/inspoComponent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Inspocard = ({ quote, source, sourceUrl }: { quote: string; source: string; sourceUrl?: string }) => {
+ return (
+  <div className="relative bg-gradient-to-r from-teal-500 to-blue-500 rounded-lg overflow-hidden shadow-md hover:shadow-xl">
+   <div className="p-6 text-white">
+    {quote.length > 30 ? (
+     <p className="text-sm font-mono leading-relaxed">
+      {quote}
+     </p>
+    ) : (
+     <span className="text-sm font-bold leading-relaxed">
+      {quote}
+     </span>
+    )}
+    <div className="mt-4 flex items-center justify-between text-sm z-10">
+     <span>{source}</span>
+     {sourceUrl && (
+      <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className="text-black bg-inherit">
+            Source
+      </a>
+     )}
+    </div>
+   </div>
+   <div className="absolute inset-x-0 bottom-0 mt-1 h-1/8 rounded-bl-lg rounded-br-lg bg-gradient-to-b from-teal-500 to-blue-500 animate-pulse z-0"></div>
+  </div>
+ );
+};
+
+export default Inspocard;