From 5b7ff9340662f752fbce4fccd471290d796ab366 Mon Sep 17 00:00:00 2001 From: Maaz Khokhar Date: Wed, 25 Jun 2025 11:59:10 -0400 Subject: [PATCH] Refactor components for improved structure and clarity; update Footer, HeroSection, LeadershipSection, TechSection, and add new AcademicSTEMHighlights, ReviewSection, and UniqueSection components. Remove ReviewsSection and streamline props for better maintainability. --- src/App.tsx | 648 +-------------------- src/components/AboutSection.tsx | 66 --- src/components/AcademicSection.tsx | 101 ---- src/components/AcademicStemHighlights.tsx | 71 +++ src/components/AthleticsSection.tsx | 151 +++-- src/components/EntrepreneurshipSection.tsx | 167 ++++-- src/components/Footer.tsx | 81 +-- src/components/HeroSection.tsx | 135 ++--- src/components/LeadershipSection.tsx | 146 ++--- src/components/ReviewSection.tsx | 65 +++ src/components/ReviewsSection.tsx | 207 ------- src/components/TechSection.tsx | 280 ++++----- src/components/UniqueSection.tsx | 58 ++ 13 files changed, 698 insertions(+), 1478 deletions(-) delete mode 100644 src/components/AboutSection.tsx delete mode 100644 src/components/AcademicSection.tsx create mode 100644 src/components/AcademicStemHighlights.tsx create mode 100644 src/components/ReviewSection.tsx delete mode 100644 src/components/ReviewsSection.tsx create mode 100644 src/components/UniqueSection.tsx diff --git a/src/App.tsx b/src/App.tsx index b4319ce..895bff4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,21 @@ import { useState, type JSX, useEffect } from "react"; import { Star, - Plus, X, - Mail, - Phone, - MapPin, - Github, - Linkedin, - Award, - Briefcase, - GraduationCap, - Trophy, - Zap, - Users, } from "lucide-react"; import { addReview, fetchReviews, type Review } from "./reviewsApi"; +import HeroSection from "./components/HeroSection"; +import UniqueSection from "./components/UniqueSection"; +import AcademicSTEMHighlights from "./components/AcademicStemHighlights"; +import TechSection from "./components/TechSection"; +import LeadershipSection from "./components/LeadershipSection"; +import AthleticSection from "./components/AthleticsSection"; +import EntrepreuneurshipSection from "./components/EntrepreneurshipSection"; +import ReviewSection from "./components/ReviewSection"; +import Footer from "./components/Footer"; const App = () => { const [showModal, setShowModal] = useState(false); - const isOutOfCollege = false; // Change this to false if you want to simulate being in college const [reviews, setReviews] = useState([]); const [newReview, setNewReview] = useState({ name: "", @@ -74,629 +70,33 @@ const App = () => { return (
- {/* Header */} -
-
-
- Maaz Khokhar -
-

- Maaz Khokhar -

-

- Full-Stack Developer -

-
-
- - khokharmaaz@gmail.com -
-
- - (214) 732-2569 -
-
- - Dallas, TX -
-
-
-
-
-
+ {/* Hero Section */} +
- {/* Why I Stand Out */} -
-
- -

- What Makes Me Unique -

-
-
-

- I bridge the gap between cutting-edge technology and real-world - impact. With a unique combination of technical expertise, - entrepreneurial mindset, and leadership experience, I transform - complex problems into elegant solutions that drive meaningful - change. -

-
-
-
- -
-

- Innovation Driver -

-

- Transforming ideas into scalable solutions -

-
-
-
- -
-

Team Catalyst

-

- Inspiring collaboration and excellence -

-
-
-
- -
-

- Results Focused -

-

- Delivering measurable impact consistently -

-
-
-
-
+ {/* Academic & STEM Highlights */} -
-
- -

- Academic & STEM Excellence -

-
-
- {isOutOfCollege && ( -
-

- Education -

-
-
-

- Master of Science in Computer Science -

-

- Stanford University • GPA: 3.9/4.0 -

-

- Specialization: AI & Machine Learning -

-
-
-

- Bachelor of Science in Engineering -

-

- MIT • Summa Cum Laude • GPA: 3.95/4.0 -

-

- Double Major: Computer Science & Mathematics -

-
-
-
- )} -
-

- STEM Achievements -

-
    - {[ - "Developed 5+ freelance applications serving diverse client needs", - "Specialized in full-stack web development and mobile applications", - "Maintained 100% client satisfaction rate with on-time delivery", - "Expertise in React, TypeScript, and modern web technologies", - ].map((achievement, index) => ( -
  • - - {achievement} -
    • - ))} -
-
-
-
+ {/* Tech, Innovation, and Projects */} -
-
- -

- Technology & Innovation -

-
-
-
-

- Featured Projects -

-
-
- - Local School Attendance App - -

- Lead Developer | 2025 -

-

- Developed and deployed a comprehensive attendance management - system for a local educational institution, streamlining - their administrative processes and improving data accuracy. - The application continues to serve the organization daily, - demonstrating successful long-term solution delivery. -

-
- {isOutOfCollege && ( -
-

Sun-Scope

-

- Full-Stack Engineer | 2025 -

-

- Built IoT solution reducing energy consumption by 35% - across 200+ commercial buildings -

-
- )} -
- - I-Dazzle E-Commerce Platform - -

- Technical Lead | 2025 -

-

- Architected and developed a custom e-commerce platform for a - luxury bag retailer, enabling direct-to-consumer sales and - reducing third-party marketplace dependency. Implemented - responsive design, secure payment processing, and inventory - management features to support business growth and brand - independence. -

-
-
-
-
-

- Technical Skills -

-
-
-

- Programming Languages -

-
- {["Python", "JavaScript", "TypeScript"].map((skill) => ( - - {skill} - - ))} -
-
-
-

- Frameworks & Tools -

-
- {[ - "React", - "React Native", - "Docker", - "React Native", - "TailwindCSS", - ].map((skill) => ( - - {skill} - - ))} -
-
- {isOutOfCollege && ( -
-

- Specializations -

-
- {["UI/UX Design", ""].map((skill) => ( - - {skill} - - ))} -
-
- )} -
-
-
-
+ {/* Leadership, Service, & School */} -
-
- -

- Leadership & Service -

-
-
-
-
-

- Leadership Roles -

-
-
-

- NJHS Inductee -

-

- National Junior Honor Society Inductee • 2024 -

-

- Recognized for academic excellence, leadership, and - community service in middle school -

-
-
-

- "Fabulous Falcon" Award -

-

- Forestwood Middle School • 2024 -

-

- Awarded for outstanding contributions to school community - and leadership in student activities -

-
-
-

- Peer Learning Mentor -

-

- Forestwood Middle School • 2023-2024 -

-

- Mentored 50+ students in computer science fundamentals, - fostering a collaborative learning environment -

-
-
-
- {isOutOfCollege && ( -
-

- Community Service -

-
-
-

- Code for Good Volunteer -

-

- 2020-Present • 500+ hours -

-

- Built digital solutions for 10+ nonprofits, impacting - 10,000+ lives -

-
-
-
- )} -
-
-
+ - {isOutOfCollege && ( - /* Athletics & Competitions */ -
-
- -

- Athletics & Competitions -

-
-
-
-

- Competitive Programming -

-
    -
  • - - - ACM ICPC World Finals - Top 20 - -
    • -
  • - - - Google Code Jam - Round 3 Qualifier - -
    • -
  • - - - Facebook Hacker Cup - Top 100 - -
    • -
-
-
-

- Hackathons -

-
    -
  • - - - TechCrunch Disrupt - 1st Place - -
    • -
  • - - MIT HackMIT - Winner -
    • -
  • - - - Stanford TreeHacks - 2nd Place - -
    • -
-
-
-

- Athletic Achievements -

-
    -
  • - - - Varsity Tennis - Team Captain - -
    • -
  • - - - Marathon Finisher - Sub 3:30 - -
    • -
  • - - - Rock Climbing - Advanced Level - -
    • -
-
-
-
- )} + + {/* Athletics & Competitions */} + {/* Entrepreneurship and Drive */} - {isOutOfCollege && ( -
-
- -

- Entrepreneurial Ventures -

-
-
-
-

- Founded Startups -

-
-
-

- EcoTech Solutions -

-

- Co-Founder & CTO • 2023-Present -

-

- $2M in funding raised, 50+ employees, revolutionizing - renewable energy storage -

-
-
-

StudySync

-

- Founder • 2022-2023 -

-

- EdTech platform with 10K+ users, acquired by major - educational publisher -

-
-
-

- DevTools Pro -

-

- Co-Founder • 2021-2022 -

-

- Developer productivity suite, $500K ARR before successful - exit -

-
-
-
-
-

- Investment & Advisory -

-
-
-

- Angel Investor -

-

- 15+ early-stage investments in AI and sustainability - startups -

-

- 3 successful exits, 2 unicorns in portfolio -

-
-
-

- Startup Accelerator Mentor -

-

- Y Combinator, Techstars, 500 Startups -

-

- Mentored 50+ startups, $100M+ in follow-on funding -

-
-
-

- Innovation Consultant -

-

- Fortune 500 digital transformation advisor -

-

- Led innovation workshops for 20+ enterprises -

-
-
-
-
-
- )} - {/* Reviews Section */} -
-
-
- -

- Professional Reviews -

-
- -
-
- {reviews.length > 1 ? ( - reviews.map((review, index) => ( -
-
-
- -
-
-

- {review.name} -

-

- {review.position} -

-
-
-
- {renderStars(review.rating)} -
-

{review.text}

-
- )) - ) : ( -
- No reviews yet. Be the first to add one! -
- )} -
-
+ - {/* Let's Connect */} -
-
-

Let's Connect

-

- Ready to collaborate on something amazing? I'm always excited to - discuss new opportunities and innovative projects. -

-
- - - Email Me - - {isOutOfCollege && ( - - - LinkedIn - - )} - - - GitHub - -
-
-
+ {/* Reviews Section */} + + + {/* Footer */} +
{/* Modal */} diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx deleted file mode 100644 index dcf0402..0000000 --- a/src/components/AboutSection.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Zap, Users, Rocket } from "lucide-react"; - -interface AboutSectionProps { - textClasses: string; - cardClasses: string; -} - -const AboutSection = ({ textClasses, cardClasses }: AboutSectionProps) => { - return ( -
-
-
-

- Why I Stand Out -

-
-
- -
-
- -

- Unique Blend -

-

- Academic excellence, technological fluency, creative innovation in - robotics and software, leadership through service, and athletic - resilience. -

-
- -
- -

- Team Player -

-

- I thrive in team environments, whether coaching classmates, - collaborating in science competitions, or building apps with - peers. -

-
- -
- -

- Self-Driven -

-

- Consistently pursuing excellence—from earning honors and awards to - shipping production-level apps and standing tall on the podium. -

-
-
-
-
- ); -}; - -export default AboutSection; diff --git a/src/components/AcademicSection.tsx b/src/components/AcademicSection.tsx deleted file mode 100644 index bb29fc6..0000000 --- a/src/components/AcademicSection.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Trophy, Award, Star } from "lucide-react"; - -interface AcademicSectionProps { - isDarkMode: boolean; - textClasses: string; - cardClasses: string; -} - -const AcademicSection = ({ - isDarkMode, - textClasses, - cardClasses, -}: AcademicSectionProps) => { - return ( -
-
-
-

- 🏆 Academic & STEM Highlights -

-
-
- -
-
-
- -

- UIL Science 1st Place -

-
-

- Showcased analytical rigor and creative problem-solving in a - highly competitive academic environment. -

-
- -
-
- -

- Science Olympiad -

-
-

- Regular participant developing strong teamwork, precise - experimentation, and rapid on-your-feet thinking. -

-
- -
-
- -

- Gifted and Talented Program -

-
-

- Advanced coursework that cultivated deeper critical thinking and - an enriched love for learning. -

-
- -
-
- -

Honor Roll

-
-

- Full schedule of honors classes, consistently challenging myself - to excel in every subject. -

-
-
-
-
- ); -}; - -export default AcademicSection; diff --git a/src/components/AcademicStemHighlights.tsx b/src/components/AcademicStemHighlights.tsx new file mode 100644 index 0000000..f9fb347 --- /dev/null +++ b/src/components/AcademicStemHighlights.tsx @@ -0,0 +1,71 @@ +import { GraduationCap, Award } from "lucide-react"; + +interface AcademicSTEMHighlightsProps { + isOutOfCollege?: boolean; +} + +const AcademicSTEMHighlights: React.FC = ({ isOutOfCollege = false }) => { + return ( +
+
+ +

+ Academic & STEM Excellence +

+
+
+ {isOutOfCollege && ( +
+

+ Education +

+
+
+

+ Master of Science in Computer Science +

+

+ Stanford University • GPA: 3.9/4.0 +

+

+ Specialization: AI & Machine Learning +

+
+
+

+ Bachelor of Science in Engineering +

+

+ MIT • Summa Cum Laude • GPA: 3.95/4.0 +

+

+ Double Major: Computer Science & Mathematics +

+
+
+
+ )} +
+

+ STEM Achievements +

+
    + {[ + "Developed 5+ freelance applications serving diverse client needs", + "Specialized in full-stack web development and mobile applications", + "Maintained 100% client satisfaction rate with on-time delivery", + "Expertise in React, TypeScript, and modern web technologies", + ].map((achievement, index) => ( +
  • + + {achievement} +
    • + ))} +
+
+
+
+ ); +}; + +export default AcademicSTEMHighlights; \ No newline at end of file diff --git a/src/components/AthleticsSection.tsx b/src/components/AthleticsSection.tsx index 285ff10..a7c2b42 100644 --- a/src/components/AthleticsSection.tsx +++ b/src/components/AthleticsSection.tsx @@ -1,60 +1,99 @@ -interface AthleticsSectionProps { - isDarkMode: boolean; - textClasses: string; +import { Trophy } from 'lucide-react'; + +interface AthleticSectionProps { + isOutOfCollege?: boolean; } -const AthleticsSection = ({ - isDarkMode, - textClasses, -}: AthleticsSectionProps) => { - return ( -
-
-
-

- 🏊‍♂️🏸 Athletics & Competitions -

-
-
- -
-
-
🏊‍♂️
-

- Swimming Competitions -

-

- Competed across multiple events, honing discipline, mental - toughness, and an enduring competitive spirit. -

-
- -
-
🏸
-

- Badminton Competitions -

-

- Sharpened hand-eye coordination, strategic thinking, and graceful - sportsmanship on the court. -

-
-
-
-
- ); +const AthleticSection: React.FC = ({ isOutOfCollege = false }) => { + return ( + <> + {isOutOfCollege && ( +
+
+ +

+ Athletics & Competitions +

+
+
+
+

+ Competitive Programming +

+
    +
  • + + + ACM ICPC World Finals - Top 20 + +
    • +
  • + + + Google Code Jam - Round 3 Qualifier + +
    • +
  • + + + Facebook Hacker Cup - Top 100 + +
    • +
+
+
+

+ Hackathons +

+
    +
  • + + + TechCrunch Disrupt - 1st Place + +
    • +
  • + + MIT HackMIT - Winner +
    • +
  • + + + Stanford TreeHacks - 2nd Place + +
    • +
+
+
+

+ Athletic Achievements +

+
    +
  • + + + Varsity Tennis - Team Captain + +
    • +
  • + + + Marathon Finisher - Sub 3:30 + +
    • +
  • + + + Rock Climbing - Advanced Level + +
    • +
+
+
+
+ )} + + ); }; -export default AthleticsSection; +export default AthleticSection; \ No newline at end of file diff --git a/src/components/EntrepreneurshipSection.tsx b/src/components/EntrepreneurshipSection.tsx index e5e6e33..9f40688 100644 --- a/src/components/EntrepreneurshipSection.tsx +++ b/src/components/EntrepreneurshipSection.tsx @@ -1,69 +1,108 @@ -import { Rocket, Zap } from "lucide-react"; +import { Zap } from 'lucide-react'; -interface EntrepreneurshipSectionProps { - isDarkMode: boolean; - textClasses: string; - cardClasses: string; +interface AthleticSectionProps { + isOutOfCollege?: boolean; } -const EntrepreneurshipSection = ({ - isDarkMode, - textClasses, - cardClasses, -}: EntrepreneurshipSectionProps) => { - return ( -
-
-
-

- 💡 Entrepreneurship & Drive -

-
-
- -
-
- -

- Entrepreneurial Spirit -

-

- Always on the lookout for new opportunities—whether launching - small ventures, leading peer projects, or exploring tech startups. -

-
- -
- -

- Growth Mindset -

-

- I love to learn—whether it be a new programming framework, - exploring scientific research, or mastering a new athletic skill. -

-
-
-
-
- ); +const EntrepreuneurshipSection: React.FC = ({ isOutOfCollege = false }) => { + return ( + <> + {isOutOfCollege && ( +
+
+ +

+ Entrepreneurial Ventures +

+
+
+
+

+ Founded Startups +

+
+
+

+ EcoTech Solutions +

+

+ Co-Founder & CTO • 2023-Present +

+

+ $2M in funding raised, 50+ employees, revolutionizing + renewable energy storage +

+
+
+

StudySync

+

+ Founder • 2022-2023 +

+

+ EdTech platform with 10K+ users, acquired by major + educational publisher +

+
+
+

+ DevTools Pro +

+

+ Co-Founder • 2021-2022 +

+

+ Developer productivity suite, $500K ARR before successful + exit +

+
+
+
+
+

+ Investment & Advisory +

+
+
+

+ Angel Investor +

+

+ 15+ early-stage investments in AI and sustainability + startups +

+

+ 3 successful exits, 2 unicorns in portfolio +

+
+
+

+ Startup Accelerator Mentor +

+

+ Y Combinator, Techstars, 500 Startups +

+

+ Mentored 50+ startups, $100M+ in follow-on funding +

+
+
+

+ Innovation Consultant +

+

+ Fortune 500 digital transformation advisor +

+

+ Led innovation workshops for 20+ enterprises +

+
+
+
+
+
+ )} + + ); }; -export default EntrepreneurshipSection; +export default EntrepreuneurshipSection; \ No newline at end of file diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 267477d..043c25c 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,43 +1,46 @@ -interface FooterProps { - isDarkMode: boolean; - textClasses: string; +import { Mail, Linkedin, Github } from 'lucide-react'; + +interface Props { + isOutOfCollege?: boolean; } -const Footer = ({ isDarkMode, textClasses }: FooterProps) => { - return ( -
-
-
-

- Let's Connect -

-

- Ready to collaborate on exciting projects or discuss opportunities? -

-
- -
-

- © 2025 Maaz Khokhar. All rights reserved. -

- - khokharmaaz@gmail.com - -
-
-
- ); +const Footer: React.FC = ({ isOutOfCollege }) => { + return ( +
+
+

Let's Connect

+

+ Ready to collaborate on something amazing? I'm always excited to + discuss new opportunities and innovative projects. +

+
+ + + Email Me + + {isOutOfCollege && ( + + + LinkedIn + + )} + + + GitHub + +
+
+
+ ); }; -export default Footer; +export default Footer; \ No newline at end of file diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx index 8912ae4..e28474e 100644 --- a/src/components/HeroSection.tsx +++ b/src/components/HeroSection.tsx @@ -1,108 +1,41 @@ -import { ChevronDown, Trophy, Code, Rocket } from "lucide-react"; +import { Mail, MapPin, Phone } from 'lucide-react'; -interface HeroSectionProps { - isDarkMode: boolean; - scrollToSection: (sectionId: string) => void; - textClasses: string; -} - -const HeroSection = ({ - isDarkMode, - scrollToSection, - textClasses, -}: HeroSectionProps) => { +const HeroSection: React.FC = () => { return ( -
-
- - {/* Animated background particles */} -
- {[...Array(20)].map((_, i) => ( -
- ))} -
- -
-
-
-
- Maaz's Avatar +
+
+
+ Maaz Khokhar +
+

+ Maaz Khokhar +

+

+ Full-Stack Developer +

+
+
+ + khokharmaaz@gmail.com +
+
+ + (214) 732-2569 +
+
+ + Dallas, TX +
+
-

- Hi! I'm Maaz -

-

- A curious, ambitious, and multidisciplinary student passionate about - science, - technology, - leadership, and - athletics -

- -
- - {/* Floating Elements */} -
- -
-
- -
-
- -
-
- ); + + ) }; -export default HeroSection; +export default HeroSection; \ No newline at end of file diff --git a/src/components/LeadershipSection.tsx b/src/components/LeadershipSection.tsx index 1d17e32..6659711 100644 --- a/src/components/LeadershipSection.tsx +++ b/src/components/LeadershipSection.tsx @@ -1,74 +1,88 @@ -import { Award, Star, Users } from "lucide-react"; +import { Users } from 'lucide-react'; interface LeadershipSectionProps { - isDarkMode: boolean; - textClasses: string; - cardClasses: string; + isOutOfCollege?: boolean; } -const LeadershipSection = ({ - isDarkMode, - textClasses, - cardClasses, -}: LeadershipSectionProps) => { - return ( -
-
-
-

- 📚 Leadership, Service & School -

-
-
- -
-
- -

- NJHS Inductee -

-

- National Junior Honor Society recognition for academic excellence, - leadership, and community commitment. -

+const LeadershipSection: React.FC = ({ isOutOfCollege = false }) => { + return ( +
+
+ +

+ Leadership & Service +

- -
- -

Tutoring

-

- Volunteered regularly to tutor peers in math, science, and - programming—fostering academic growth in others. -

+
+
+
+

+ Leadership Roles +

+
+
+

+ NJHS Inductee +

+

+ National Junior Honor Society Inductee • 2024 +

+

+ Recognized for academic excellence, leadership, and + community service in middle school +

+
+
+

+ "Fabulous Falcon" Award +

+

+ Forestwood Middle School • 2024 +

+

+ Awarded for outstanding contributions to school community + and leadership in student activities +

+
+
+

+ Peer Learning Mentor +

+

+ Forestwood Middle School • 2023-2024 +

+

+ Mentored 50+ students in computer science fundamentals, + fostering a collaborative learning environment +

+
+
+
+ {isOutOfCollege && ( +
+

+ Community Service +

+
+
+

+ Code for Good Volunteer +

+

+ 2020-Present • 500+ hours +

+

+ Built digital solutions for 10+ nonprofits, impacting + 10,000+ lives +

+
+
+
+ )} +
- -
- -

- Fabulous Falcon Award -

-

- Honored for outstanding school spirit, positive contributions to - campus life, and consistent character. -

-
-
-
-
- ); + + ); }; -export default LeadershipSection; +export default LeadershipSection; \ No newline at end of file diff --git a/src/components/ReviewSection.tsx b/src/components/ReviewSection.tsx new file mode 100644 index 0000000..6902d5e --- /dev/null +++ b/src/components/ReviewSection.tsx @@ -0,0 +1,65 @@ +import { Star, Plus } from 'lucide-react'; +import { type JSX } from 'react'; +import { type Review } from '../reviewsApi'; + +interface Props { + setShowModal: (show: boolean) => void; + reviews: Review[]; + renderStars: (rating: number) => JSX.Element[]; +} + +const ReviewSection: React.FC = ({ setShowModal, renderStars, reviews }) => { + return ( +
+
+
+ +

+ Professional Reviews +

+
+ +
+
+ {reviews.length > 1 ? ( + reviews.map((review, index) => ( +
+
+
+ +
+
+

+ {review.name} +

+

+ {review.position} +

+
+
+
+ {renderStars(review.rating)} +
+

{review.text}

+
+ )) + ) : ( +
+ No reviews yet. Be the first to add one! +
+ )} +
+
+ ); +}; + +export default ReviewSection; \ No newline at end of file diff --git a/src/components/ReviewsSection.tsx b/src/components/ReviewsSection.tsx deleted file mode 100644 index 546758b..0000000 --- a/src/components/ReviewsSection.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import { useEffect, useState } from "react"; -import { fetchReviews, addReview } from "../reviewsApi"; -import type { Review } from "../reviewsApi"; -import { Star } from "lucide-react"; - -const ReviewsSection = ({ - cardClasses, - textClasses, - isDarkMode, -}: { - cardClasses: string; - textClasses: string; - isDarkMode: boolean; -}) => { - const [reviews, setReviews] = useState([]); - const [name, setName] = useState(""); - const [message, setMessage] = useState(""); - const [rating, setRating] = useState(5); - const [hoverRating, setHoverRating] = useState(0); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - const [success, setSuccess] = useState(""); - const [isModalOpen, setIsModalOpen] = useState(false); - - useEffect(() => { - fetchReviews().then(setReviews); - }, []); - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - setLoading(true); - setError(""); - setSuccess(""); - try { - await addReview({ name, message, rating }); - setSuccess("Review submitted!"); - setName(""); - setMessage(""); - setRating(5); - setReviews(await fetchReviews()); - // Close modal immediately after successful submission - setIsModalOpen(false); - } catch (err) { - setError("Failed to submit review."); - } finally { - setLoading(false); - } - }; - - const openModal = () => { - setIsModalOpen(true); - setError(""); - setSuccess(""); - }; - - return ( -
-
-

- Reviews -

- -
- -
- - {/* Review Modal */} - {isModalOpen && ( -
-
- -

- Share Your Review -

{" "} -
- setName(e.target.value)} - required - /> -
- -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} -
-
-