From 8628a4eb20384e6786d58da30d705d964c395f8c Mon Sep 17 00:00:00 2001 From: ShubhanshuOO7 Date: Tue, 18 Mar 2025 11:05:32 -0700 Subject: [PATCH] new commit --- .../(root)/(chat)/_components/heroSection.tsx | 313 ++++++++++++------ 1 file changed, 211 insertions(+), 102 deletions(-) diff --git a/src/app/(root)/(chat)/_components/heroSection.tsx b/src/app/(root)/(chat)/_components/heroSection.tsx index e8b938a..64265be 100644 --- a/src/app/(root)/(chat)/_components/heroSection.tsx +++ b/src/app/(root)/(chat)/_components/heroSection.tsx @@ -1,33 +1,40 @@ -import React, { useRef, useState, useEffect } from 'react'; -import Image from 'next/image'; -import { FaPaperclip, FaUpload, FaGlobe, FaTwitter, FaLinkedin, FaGithub } from 'react-icons/fa'; -import { useGoogleLogin } from '@react-oauth/google'; -import { useAppDispatch } from '@/redux/hooks'; -import axios from 'axios'; -import { userData } from '@/redux/slices/userSlice'; -import toast from 'react-hot-toast'; -import { Loader2, SparklesIcon } from 'lucide-react'; -import JobSearchResults from './job-result'; -import QueryLimitPopup from './QueryLimitPopup'; -import ResumeUploadPopup from './ResumeUploadPopup'; // Import the new component -import ChatInput from './chatinput'; -import { Button } from '@/components/ui/button'; -import { fetchJobs } from "@/actions/chat_actions" +import React, { useRef, useState, useEffect } from "react"; +import Image from "next/image"; +import { + FaPaperclip, + FaUpload, + FaGlobe, + FaTwitter, + FaLinkedin, + FaGithub, +} from "react-icons/fa"; +import { useGoogleLogin } from "@react-oauth/google"; +import { useAppDispatch } from "@/redux/hooks"; +import axios from "axios"; +import { userData } from "@/redux/slices/userSlice"; +import toast from "react-hot-toast"; +import { Loader2, SparklesIcon } from "lucide-react"; +import JobSearchResults from "./job-result"; +import QueryLimitPopup from "./QueryLimitPopup"; +import ResumeUploadPopup from "./ResumeUploadPopup"; // Import the new component +import ChatInput from "./chatinput"; +import { Button } from "@/components/ui/button"; +import { fetchJobs } from "@/actions/chat_actions"; const QUERY_LIMIT = 5; -const STORAGE_KEY = 'userQueryCount'; +const STORAGE_KEY = "userQueryCount"; const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { const inputRef = useRef(null); const dispatch = useAppDispatch(); const [isLoading, setIsLoading] = useState(false); - const [query, setQuery] = useState(''); + const [query, setQuery] = useState(""); const [showResults, setShowResults] = useState(false); const [queryCount, setQueryCount] = useState(0); const [showPopup, setShowPopup] = useState(false); // State to control query limit popup const [showResumePopup, setShowResumePopup] = useState(false); // New state for resume popup - const [jobApiData, setJobApiData] = useState(null) - const [isApiLoading, setIsApiLoading] = useState(false) + const [jobApiData, setJobApiData] = useState(null); + const [isApiLoading, setIsApiLoading] = useState(false); useEffect(() => { const storedCount = localStorage.getItem(STORAGE_KEY); @@ -35,7 +42,7 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { setQueryCount(parseInt(storedCount, 10)); } }, []); - + console.log("Results state:", showResults); useEffect(() => { @@ -45,7 +52,7 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { const handleCloseResults = () => { console.log("Closing job results"); setShowResults(false); - setQuery(''); + setQuery(""); setJobApiData(null); }; @@ -61,7 +68,7 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { console.log("Chat submit triggered with text:", inputText); setQuery(inputText); setIsApiLoading(true); - + try { console.log("Calling fetchJobs with:", inputText); // Call the API with the chat input @@ -76,8 +83,8 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { setIsApiLoading(false); setShowResults(true); } - - setQueryCount(prevCount => { + + setQueryCount((prevCount) => { const newCount = prevCount + 1; console.log("New query count:", newCount); if (newCount >= QUERY_LIMIT) { @@ -88,26 +95,30 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { }; return ( -
+
{/* Ray Container with multiple light rays */} -
+
{/* Light Rays (existing code) */} -
{/* Other light rays... */} @@ -116,82 +127,180 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { {/* Conditional Rendering for Hero Content or Job Search Results */} {showResults && queryCount < QUERY_LIMIT ? ( <> - {/* Chat input below job results */} -
- +
) : (
- {!showResults || queryCount >= QUERY_LIMIT ? ( - // Show hero content when no results or query limit reached - <> -
- + {!showResults || queryCount >= QUERY_LIMIT ? ( + // Show hero content when no results or query limit reached + <> +
+ +
+

+ Find and apply jobs in seconds. +

+

+ Jobflow is your JobGpt. Start for free today. +

+ + ) : ( + // Show job results when results should be displayed +
+ +
+ )} + + {/* Chat input always visible */} +
+ +
+ + {/* Only show suggestion buttons when no results */} + {(!showResults || queryCount >= QUERY_LIMIT) && ( +
+ {[ + "Recharts dashboard", + "Habit tracker", + "Real estate listings", + "Developer portfolio", + ].map((item) => ( + + ))} +
+ )} +
+ {/* Main container */} +
+ {/* Conditional Rendering for Hero Content or Job Search Results */} + {showResults && queryCount < QUERY_LIMIT ? ( + <> + +
+ +
+ + ) : ( +
+
+ +
+

+ Find and apply jobs in seconds. +

+

+ Jobflow is your JobGpt. Start for free today. +

+
+ )} +
+

+ Build high-quality software
without writing code. +

+

+ Creating software has never been more accessible. With Jobflow + AI, simply describe your job search needs, and we’ll handle + the rest. +

+ +
+
+

+ 🚀 20× faster job search +

+

+ Use simple queries to find relevant job openings + instantly, powered by AI-driven matching. +

+ +

+ 💡 Instant Edits +

+

+ Customize and refine job searches effortlessly with + real-time updates. +

+ +

+ 🔗 You control the data +

+

+ Sync your searches with job boards or export results for + deeper analysis. +

+
+ +
+ Job search dashboard +
+
+
+
-

- Find and apply jobs in seconds. -

-

- Jobflow is your JobGpt. Start for free today. -

- - ) : ( - // Show job results when results should be displayed -
- -
- )} - - {/* Chat input always visible */} -
- -
- - {/* Only show suggestion buttons when no results */} - {(!showResults || queryCount >= QUERY_LIMIT) && ( -
- {['Recharts dashboard', 'Habit tracker', 'Real estate listings', 'Developer portfolio'].map((item) => ( - - ))}
)} -
- )} - + {/* Query Limit Popup */} {showPopup && } - + {/* Resume Upload Popup - show only after first signup */} - {showResumePopup && } - + {showResumePopup && ( + + )} {/* Loading overlay */} {isApiLoading && (
@@ -205,4 +314,4 @@ const HeroSection = ({ isLoggedIn }: { isLoggedIn: boolean }) => { ); }; -export default HeroSection; \ No newline at end of file +export default HeroSection;