Skip to content

Commit

Permalink
Light Mode Changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@AayusBhat26
AayusBhat26 committed Oct 31, 2024
1 parent 8bd40a0 commit e9920b8
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 67 deletions.
200 changes: 135 additions & 65 deletions app/(root)/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand All @@ -20,67 +20,82 @@ interface NavbarProps {

function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
const [searchTerm, setSearchTerm] = useState<string>("");
const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
const searchInputRef = useRef<HTMLInputElement | null>(null);

const searchInputRef = useRef<HTMLInputElement | null>(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 (
<nav
className={`border-gray-400 p-2 fixed w-full z-10 shadow-lg ${
darkMode ? "bg-[#020611]" : "bg-violet-700"
} text-white`}
darkMode ? "bg-[#020611] text-white" : "bg-white text-black"
}`}
>
<div className="container mx-auto flex justify-between items-center">
<Link href="/" className="flex items-center space-x-2">
<Image
src="/icon.ico"
width={40}
height={40}
alt="ML4E"
priority
quality={90}
/>
<span className="text-xl font-bold tracking-wider">ML4E</span>
</Link>

<div className="flex items-center space-x-4">
{/* New navigation links */}
<Link href="/about" className="hidden md:block">About</Link>
<Link href="/community" className="hidden md:block">Community</Link>
<Link href="/datasets" className="hidden md:block">Datasets</Link>
<Link href="/learn" className="hidden md:block">Learn</Link>
<Link href="/models" className="hidden md:block">Models</Link>
{/* logo */}
<div className="flex items-center space-x-6">
<Link href="/" className="flex items-center space-x-2">
<Image
src="/icon.ico"
width={40}
height={40}
alt="ML4E"
priority
quality={90}
/>
<span className="text-xl font-bold tracking-wider">ML4E</span>
</Link>
<Link href="/learn" className="hidden md:block">
Learn
</Link>
<Link href="/datasets" className="hidden md:block">
Datasets
</Link>
<Link href="/community" className="hidden md:block">
Community
</Link>
</div>

<div className="flex items-center justify-start space-x-4">
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button
variant="outline"
className="hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl bg-[#1f2937] border-none outline-none hover:bg-[#425167]"
className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
darkMode ? "bg-[#1f2937]" : "bg-[#f0f0f0]"
} border-none outline-none hover:bg-[#425167]`}
onClick={() => setIsOpen(true)}
>
<Search
className={darkMode ? "text-gray-400" : "text-violet-700"}
/>
<Search className={darkMode ? "text-gray-400" : "text-black"} />
<span className="ml-2 text-[#999595]">Search</span>
<span className="ml-24 text-gray-400 text-sm">Command + K</span>
</Button>
Expand All @@ -89,10 +104,10 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
className={`p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
darkMode ? "bg-[#020611]" : "bg-white"
}`}
style={{ marginTop: "20px", position: "absolute", top: "60px" }} // Adjust top position
style={{ marginTop: "20px", position: "absolute", top: "60px" }}
>
<DialogTitle className="sr-only">Search</DialogTitle>
<div className="relative flex items-center w-full ">
<div className="relative flex items-center w-full">
<button className="absolute left-3 text-gray-400">
<Search />
</button>
Expand All @@ -102,10 +117,10 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
ref={searchInputRef}
className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit outline-none border-none text-lg ${
className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit text-lg ${
darkMode
? "text-white bg-[#1f2937] border-gray-600"
: "text-gray-900 bg-white border-gray-300"
: "text-black bg-white border-gray-300"
}`}
style={{
transition: "color 0.3s ease, background-color 0.3s ease",
Expand All @@ -120,24 +135,79 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
</div>
</DialogContent>
</Dialog>
<button
onClick={() => setIsOpen(true)}
className={`md:hidden p-2 rounded-full ${
darkMode ? "text-white" : "text-black"
}`}
>
<Search />
</button>
<button
className="md:hidden focus:outline-none"
onClick={toggleDropdown}
>
<MoreVertical className="text-black" />
</button>
{/* Dropdown Menu for Small Screens */}
{dropdownOpen && (
<div
className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
}`}
>
<Link
href="/"
onClick={handleDropdownItemClick}
className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
>
Home
</Link>
<Link
href="/learn"
onClick={handleDropdownItemClick}
className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
>
Learn
</Link>
<Link
href="/about"
onClick={handleDropdownItemClick}
className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
>
About
</Link>
<div className="flex items-center justify-between w-full px-4 py-2">
<span>Theme</span>
<button
onClick={() => {
handleDropdownItemClick();
toggleDarkMode();
}}
className="p-1"
>
{darkMode ? (
<Sun className="text-yellow-500" />
) : (
<Moon className="text-blue-500" />
)}
</button>
</div>
</div>
)}

{/* Theme Toggle Button for Large Screens */}
<button
onClick={toggleDarkMode}
className="hidden md:flex p-2 rounded-full hover:bg-violet-500 focus:outline-none"
className="hidden md:flex items-center p-2 rounded-full hover:bg-gray-200 focus:outline-none"
>
<span className="mr-2">Theme</span>
{darkMode ? (
<Sun className="text-yellow-500" />
) : (
<Moon className="text-blue-500" />
)}
</button>

<button
className="md:hidden focus:outline-none"
onClick={() => setIsOpen(!isOpen)}
>
<Menu className="text-white" />
</button>
</div>
</div>
</nav>
Expand All @@ -156,8 +226,16 @@ export default function Home() {
<div
className={`${
darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
} ${isOpen ? "blur-sm" : ""}`}
} ${isOpen ? "blur-sm" : ""} relative`}
style={{ overflowX: "hidden" }} // Prevent horizontal overflow
>
<div className="grid-background"></div> {/* Add the grid background */}
<div
className={`flare-effect ${darkMode ? "dark-flare" : "light-flare"}`}
></div>
<div
className={`flare-effect-1 ${darkMode ? "dark-flare" : "light-flare"}`}
></div>
<Navbar
darkMode={darkMode}
toggleDarkMode={toggleDarkMode}
Expand All @@ -169,7 +247,6 @@ export default function Home() {
darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
} flex justify-center items-center flex-col min-h-screen pt-16`}
>
{/* Hero Section with Grid Background */}
<section className="custom-grid w-full flex justify-center items-center flex-col h-[75vh] relative">
<p className="font-bold">The road to knowledge starts from here.</p>
<div className="relative grid grid-cols-1 grid-rows-1 p-4 text-center z-10">
Expand All @@ -178,21 +255,14 @@ export default function Home() {
</p>
</div>
<Link href="/learn">
<Button className="learn-button mt-8 z-10 p-6 bg-white text-black text-2xl relative overflow-hidden">
<span className="learn-text transition-transform duration-300">
Learn Now
</span>
<span className="learn-emoji absolute inset-0 flex items-center justify-center transition-transform duration-300 transform translate-x-full opacity-0">
👨‍💻
</span>
<Button
className={`learn-button mt-8 z-10 hover:shadow-2xl ${
darkMode ? "bg-[#020617] text-white" : "bg-[#28292d] text-white"
} text-lg px-8 py-4 rounded-lg`}
>
Start Learning
</Button>
</Link>

{/* Dark/Light mode background grid */}
<div className="absolute inset-0 pointer-events-none grid-background"></div>
{/* Flare Effect */}
<div className="flare-effect"></div>
<div className="flare-effect-1"></div>
</section>
</main>
</div>
Expand Down
27 changes: 25 additions & 2 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit e9920b8

Please sign in to comment.