From 47318caf7c155c7d4dc3e85bd01e585a418d1f1a Mon Sep 17 00:00:00 2001 From: Sandeep Maddheshiya <113048079+Itz-Sandy@users.noreply.github.com> Date: Mon, 21 Oct 2024 22:20:17 +0530 Subject: [PATCH 1/2] Added Searchbar in FAQ's and fixed the Navbar issue- Unexpected Navbar token --- app/faq/page.tsx | 115 +++++++++++++++---------- app/front-navbar.tsx | 200 +++---------------------------------------- 2 files changed, 84 insertions(+), 231 deletions(-) diff --git a/app/faq/page.tsx b/app/faq/page.tsx index d5c3f31..d59abd5 100644 --- a/app/faq/page.tsx +++ b/app/faq/page.tsx @@ -1,7 +1,7 @@ "use client"; -import React, { useEffect, useState } from "react"; -import Link from "next/link"; import { useTheme } from "next-themes"; +import Link from "next/link"; +import { useEffect, useState } from "react"; import NavbarComponent from "../front-navbar"; const faqs = [ @@ -57,6 +57,7 @@ const FAQ = () => { const { systemTheme, theme } = useTheme(); const currentTheme = theme === "dark" ? systemTheme : theme; const [darkMode, setDarkMode] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); useEffect(() => { setDarkMode(currentTheme === 'dark'); @@ -66,6 +67,12 @@ const FAQ = () => { setActiveIndex(index === activeIndex ? null : index); }; + // Filter FAQs based on search term + const filteredFaqs = faqs.filter((faq) => + faq.question.toLowerCase().includes(searchTerm.toLowerCase()) || + faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) + ); + return (
{ > Frequently Asked Questions + + {/* Search Bar */} +
+ setSearchTerm(e.target.value)} + /> +
+
- {faqs.map((faq, index) => ( -
toggleFAQ(index)} - > -
-

- {faq.question} -

- - ▼ - + {filteredFaqs.length > 0 ? ( + filteredFaqs.map((faq, index) => ( +
toggleFAQ(index)} + > +
+

+ {faq.question} +

+ + ▼ + +
+ {activeIndex === index && ( +

+ {faq.answer} +

+ )}
- {activeIndex === index && ( -

- {faq.answer} -

- )} -
- ))} + )) + ) : ( +

+ No FAQs match your search. +

+ )}
diff --git a/app/front-navbar.tsx b/app/front-navbar.tsx index 2b008bb..cbe432c 100644 --- a/app/front-navbar.tsx +++ b/app/front-navbar.tsx @@ -1,22 +1,22 @@ -import React, { useEffect, useState } from "react"; +import ThemeSwitcher from "@/components/ui/ThemeSwitcher"; +import Logo from "@/public/assets/design-deck-logo.png"; // Correct logo import import { + Button, + Dropdown, + DropdownItem, + DropdownMenu, + DropdownTrigger, Navbar, NavbarBrand, NavbarContent, NavbarItem, - Button, - Dropdown, - DropdownTrigger, - DropdownMenu, - DropdownItem } from "@nextui-org/react"; import { ChevronDown, Menu, X } from "lucide-react"; -import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im"; import { useTheme } from "next-themes"; -import ThemeSwitcher from "@/components/ui/ThemeSwitcher"; -import Link from "next/link"; -import Logo from "@/public/assets/design-deck-logo.png"; import Image from 'next/image'; +import Link from "next/link"; +import React, { useEffect, useState } from "react"; +import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im"; interface NavbarComponentProps { isLoggedIn: boolean; @@ -45,7 +45,6 @@ const menuItems = [ { name: "Log Out", href: "/logout" }, ]; - export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen }: NavbarComponentProps) { const { theme } = useTheme(); const [isMobile, setIsMobile] = useState(false); @@ -61,7 +60,7 @@ export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen -

DesignDesk

+ DesignDeck Logo @@ -84,13 +83,7 @@ export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen - + DesignDesk Jam @@ -182,175 +175,8 @@ export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen )} - -const NavbarComponent: React.FC = ({ isLoggedIn, setIsMenuOpen, isMenuOpen }) => { - const { systemTheme, theme } = useTheme(); - const currentTheme = theme === "dark" ? systemTheme : theme; - const [darkMode, setDarkMode] = useState(false); - const [isMobile, setIsMobile] = useState(false); - - useEffect(() => { - setDarkMode(currentTheme === 'dark'); - - const handleResize = () => { - setIsMobile(window.innerWidth < 768); - }; - - handleResize(); - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - }; - }, [currentTheme]); - - return ( -
- - - - {!isMobile && ( - - DesignDeck Logo - {/* Increased height and removed background */} - - )} - - - {/* Adjusted spacing here */} - - - - Home - - - - - - - - - - - - - - - DesignDesk Jam - - - - - - - - Dev Mode - - - - - - - - DesignDesk Slides - - - - - - - - Download - - - - - - - - - - - Contact - - - - - - - - FAQ - - - - - - - - {!isLoggedIn && ( - <> - - - - Login - - - - - - {/* */} - - - - )} - - - - - - {/* Mobile Menu */} - - setIsMenuOpen(!isMenuOpen)}> - menu - - - {isMenuOpen && ( -
- {menuItems.map((item, index) => ( - setIsMenuOpen(false)}> - - {item.name} - - - ))} -
- )} - - -
)} ); -} \ No newline at end of file +} From b450b7558ceee86698f27a83f5cb12582c12df73 Mon Sep 17 00:00:00 2001 From: Sandeep Maddheshiya <113048079+Itz-Sandy@users.noreply.github.com> Date: Tue, 22 Oct 2024 21:12:24 +0530 Subject: [PATCH 2/2] conflict resolved --- app/front-navbar.tsx | 200 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 187 insertions(+), 13 deletions(-) diff --git a/app/front-navbar.tsx b/app/front-navbar.tsx index cbe432c..2b008bb 100644 --- a/app/front-navbar.tsx +++ b/app/front-navbar.tsx @@ -1,22 +1,22 @@ -import ThemeSwitcher from "@/components/ui/ThemeSwitcher"; -import Logo from "@/public/assets/design-deck-logo.png"; // Correct logo import +import React, { useEffect, useState } from "react"; import { - Button, - Dropdown, - DropdownItem, - DropdownMenu, - DropdownTrigger, Navbar, NavbarBrand, NavbarContent, NavbarItem, + Button, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem } from "@nextui-org/react"; import { ChevronDown, Menu, X } from "lucide-react"; +import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im"; import { useTheme } from "next-themes"; -import Image from 'next/image'; +import ThemeSwitcher from "@/components/ui/ThemeSwitcher"; import Link from "next/link"; -import React, { useEffect, useState } from "react"; -import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im"; +import Logo from "@/public/assets/design-deck-logo.png"; +import Image from 'next/image'; interface NavbarComponentProps { isLoggedIn: boolean; @@ -45,6 +45,7 @@ const menuItems = [ { name: "Log Out", href: "/logout" }, ]; + export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen }: NavbarComponentProps) { const { theme } = useTheme(); const [isMobile, setIsMobile] = useState(false); @@ -60,7 +61,7 @@ export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen - DesignDeck Logo +

DesignDesk

 @@ -83,7 +84,13 @@ export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen - + DesignDesk Jam @@ -175,8 +182,175 @@ export default function NavbarComponent({ isLoggedIn, setIsMenuOpen, isMenuOpen )} + +const NavbarComponent: React.FC = ({ isLoggedIn, setIsMenuOpen, isMenuOpen }) => { + const { systemTheme, theme } = useTheme(); + const currentTheme = theme === "dark" ? systemTheme : theme; + const [darkMode, setDarkMode] = useState(false); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + setDarkMode(currentTheme === 'dark'); + + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + + handleResize(); + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [currentTheme]); + + return ( +
+ + + + {!isMobile && ( + + DesignDeck Logo + {/* Increased height and removed background */} + + )} + + + {/* Adjusted spacing here */} + + + + Home + + + + + + + + + + + + + + + DesignDesk Jam + + + + + + + + Dev Mode + + + + + + + + DesignDesk Slides + + + + + + + + Download + + + + + + + + + + + Contact + + + + + + + + FAQ + + + + + + + + {!isLoggedIn && ( + <> + + + + Login + + + + + + {/* */} + + + + )} + + + + + + {/* Mobile Menu */} + + setIsMenuOpen(!isMenuOpen)}> + menu + + + {isMenuOpen && ( +
+ {menuItems.map((item, index) => ( + setIsMenuOpen(false)}> + + {item.name} + + + ))} +
+ )} + + +
)} ); -} +} \ No newline at end of file