-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
113 additions
and
33 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,107 @@ | ||
'use client'; | ||
|
||
import React, { useState } from 'react'; | ||
import Link from 'next/link'; | ||
import { ModeToggle } from '@/components/mode-toggle'; | ||
import { Button } from '@/components/ui/button'; | ||
import { | ||
DropdownMenu, | ||
DropdownMenuTrigger, | ||
DropdownMenuContent, | ||
DropdownMenuItem, | ||
} from '@/components/ui/dropdown-menu'; | ||
import { Github, Menu } from 'lucide-react'; | ||
import { Sponsor } from '@/components/Sponsor'; | ||
|
||
import { Github, Menu, X, Heart } from 'lucide-react'; | ||
import StylizedSiteName from './StylizedSiteName'; | ||
|
||
export default function Navbar() { | ||
const [isMenuOpen, setIsMenuOpen] = useState(false); | ||
|
||
const toggleMenu = () => setIsMenuOpen(!isMenuOpen); | ||
|
||
const navItems = [ | ||
{ name: 'Home', path: '/' }, | ||
{ name: 'Blog', path: '/blog' }, | ||
]; | ||
|
||
return ( | ||
<nav className="border-b border-gray-200 dark:border-gray-700 bg-black dark:bg-gray-900"> | ||
<div className="container mx-auto flex items-center justify-between py-4 px-6"> | ||
<div className="flex items-center space-x-4"> | ||
<Link href="/" className="text-lg font-semibold text-white-900 dark:text-gray-100 hover:underline"> | ||
Home | ||
</Link> | ||
<Link href="/blog" className="text-lg font-semibold text-white-900 dark:text-gray-100 hover:underline"> | ||
Blog | ||
</Link> | ||
{/* <Link href="/contribute" className="text-lg font-semibold text-white-900 dark:text-gray-100 hover:underline"> | ||
Contribute | ||
</Link>*/} | ||
</div> | ||
<div className="flex items-center space-x-4"> | ||
<Sponsor /> | ||
<Button | ||
onClick={() => window.open("https://github.com/tyaga001/devtoolsacademy", "_blank", "noopener,noreferrer")} | ||
variant="outline" | ||
className="flex items-center space-x-2" | ||
> | ||
<Github className="w-5 h-5" /> | ||
<span>Star on GitHub</span> | ||
</Button> | ||
<nav className="bg-black text-white"> | ||
<div className="container mx-auto px-4 sm:px-6 lg:px-8"> | ||
<div className="flex items-center justify-between h-20"> | ||
<StylizedSiteName /> | ||
<div className="hidden md:block"> | ||
<div className="ml-10 flex items-baseline space-x-4"> | ||
{navItems.map((item) => ( | ||
<Link | ||
key={item.name} | ||
href={item.path} | ||
className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 transition duration-150 ease-in-out" | ||
> | ||
{item.name} | ||
</Link> | ||
))} | ||
<Button | ||
onClick={() => window.open("https://github.com/tyaga001/devtoolsacademy", "_blank", "noopener,noreferrer")} | ||
variant="outline" | ||
className="flex items-center space-x-2 bg-transparent border border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-gray-900 transition duration-150 ease-in-out" | ||
> | ||
<Github className="w-5 h-5" /> | ||
<span>Star on GitHub</span> | ||
</Button> | ||
<Button | ||
asChild | ||
variant="outline" | ||
className="flex items-center space-x-2 bg-transparent border border-pink-400 text-pink-400 hover:bg-pink-400 hover:text-gray-900 transition duration-150 ease-in-out" | ||
> | ||
<Link href="/sponsor"> | ||
<Heart className="w-5 h-5" /> | ||
<span>Sponsor</span> | ||
</Link> | ||
</Button> | ||
</div> | ||
</div> | ||
<div className="md:hidden"> | ||
<button | ||
onClick={toggleMenu} | ||
className="inline-flex items-center justify-center p-2 rounded-md text-purple-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-400" | ||
> | ||
<span className="sr-only">Open main menu</span> | ||
{isMenuOpen ? ( | ||
<X className="block h-6 w-6" aria-hidden="true" /> | ||
) : ( | ||
<Menu className="block h-6 w-6" aria-hidden="true" /> | ||
)} | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
{isMenuOpen && ( | ||
<div className="md:hidden"> | ||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | ||
{navItems.map((item) => ( | ||
<Link | ||
key={item.name} | ||
href={item.path} | ||
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 transition duration-150 ease-in-out" | ||
onClick={toggleMenu} | ||
> | ||
{item.name} | ||
</Link> | ||
))} | ||
<a | ||
href="https://github.com/tyaga001/devtoolsacademy" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
className="block px-3 py-2 rounded-md text-base font-medium text-purple-400 hover:bg-gray-800 transition duration-150 ease-in-out" | ||
onClick={toggleMenu} | ||
> | ||
<Github className="inline-block mr-2 h-5 w-5" /> | ||
Star on GitHub | ||
</a> | ||
<Link | ||
href="/sponsor" | ||
className="block px-3 py-2 rounded-md text-base font-medium text-pink-400 hover:bg-gray-800 transition duration-150 ease-in-out" | ||
onClick={toggleMenu} | ||
> | ||
<Heart className="inline-block mr-2 h-5 w-5" /> | ||
Sponsor | ||
</Link> | ||
</div> | ||
</div> | ||
)} | ||
</nav> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import Link from 'next/link'; | ||
import Image from 'next/image'; | ||
|
||
const StylizedSiteName = () => { | ||
return ( | ||
<Link href="/" className="flex items-center space-x-2 group"> | ||
<Image src="/images/T.png" alt="DevToolsAcademy Logo" width={40} height={40} className="rounded-full" /> | ||
<div className="flex items-baseline"> | ||
<span className="text-2xl font-extrabold tracking-tighter text-white group-hover:text-purple-400 transition-colors duration-300">Dev</span> | ||
<span className="text-lg font-bold tracking-tight bg-gradient-to-r from-purple-400 to-pink-500 text-transparent bg-clip-text group-hover:from-purple-300 group-hover:to-pink-400 transition-colors duration-300">Tools</span> | ||
<span className="text-sm font-medium tracking-wide text-gray-300 group-hover:text-pink-300 transition-colors duration-300 ml-0.5">Academy</span> | ||
</div> | ||
</Link> | ||
); | ||
}; | ||
|
||
export default StylizedSiteName; |