From e9920b83297334e33dc4dd0c2fc94cd1c0b95a42 Mon Sep 17 00:00:00 2001 From: Aayush Kumar Bhat Date: Thu, 31 Oct 2024 09:51:41 +0530 Subject: [PATCH] Light Mode Changes --- app/(root)/page.tsx | 200 ++++++++++++++++++++++++++++++-------------- app/globals.css | 27 +++++- 2 files changed, 160 insertions(+), 67 deletions(-) diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx index 257242e..08ef14c 100644 --- a/app/(root)/page.tsx +++ b/app/(root)/page.tsx @@ -1,6 +1,6 @@ "use client"; import Link from "next/link"; -import { useState, useEffect, useRef } from "react"; // Import useRef +import { useState, useEffect, useRef, useCallback } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, @@ -9,7 +9,7 @@ import { DialogTitle, } from "@/components/ui/dialog"; import Image from "next/image"; -import { Search, Moon, Sun, Menu } from "lucide-react"; +import { Search, Moon, Sun, MoreVertical } from "lucide-react"; interface NavbarProps { darkMode: boolean; @@ -20,67 +20,82 @@ interface NavbarProps { function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) { const [searchTerm, setSearchTerm] = useState(""); + const [dropdownOpen, setDropdownOpen] = useState(false); + const searchInputRef = useRef(null); - const searchInputRef = useRef(null); // Create a ref for the input - - const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === "Escape") { - setIsOpen(false); - } - }; + const handleKeyDown = useCallback( + (event: KeyboardEvent) => { + if (event.key === "Escape") { + setIsOpen(false); + setDropdownOpen(false); + } + }, + [setIsOpen, setDropdownOpen] + ); useEffect(() => { window.addEventListener("keydown", handleKeyDown); - return () => { window.removeEventListener("keydown", handleKeyDown); }; - }, []); + }, [handleKeyDown]); - // Effect to autofocus the input when the modal opens useEffect(() => { if (isOpen && searchInputRef.current) { - searchInputRef.current.focus(); // Autofocus the input + searchInputRef.current.focus(); } }, [isOpen]); + const toggleDropdown = () => { + setDropdownOpen((prev) => !prev); + }; + + const handleDropdownItemClick = () => { + setDropdownOpen(false); + }; + return ( @@ -156,8 +226,16 @@ export default function Home() {
+
{/* Add the grid background */} +
+
- {/* Hero Section with Grid Background */}

The road to knowledge starts from here.

@@ -178,21 +255,14 @@ export default function Home() {

- - - {/* Dark/Light mode background grid */} -
- {/* Flare Effect */} -
-
diff --git a/app/globals.css b/app/globals.css index fff683c..a037927 100644 --- a/app/globals.css +++ b/app/globals.css @@ -89,10 +89,33 @@ height: 100%; z-index: 0; pointer-events: none; - /* position: relative; Ensure the parent element is positioned */ - overflow: hidden; /* Clip any overflow to maintain the circular shape */ } +.dark .grid-background { + background-image: + linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), + linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); +} + +.light .grid-background { + background-image: + linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), + linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); +} + +.flare-effect, .flare-effect-1 { + /* Existing flare-effect styling */ +} + +.dark .flare-effect, .dark .flare-effect-1 { + background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(128, 0, 128, 0.4) 100%); +} + +.light .flare-effect, .light .flare-effect-1 { + background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(128, 128, 255, 0.4) 100%); +} + + .grid-background::before { content: ''; position: absolute;