11"use client" ;
2+ import Link from "next/link" ;
23import { useEffect , useRef , useState } from "react" ;
4+ import PackageIcon from "./Icons" ;
35
46const Navbar = ( ) => {
5- const [ activeLink , setActiveLink ] = useState ( "about " ) ;
7+ const [ activeLink , setActiveLink ] = useState ( "home " ) ;
68 const [ bgStyles , setBgStyles ] = useState ( { } ) ;
79 const [ scrolled , setScrolled ] = useState ( false ) ;
810 const linkRefs = useRef < { [ key : string ] : HTMLAnchorElement | null } > ( { } ) ;
@@ -56,57 +58,47 @@ const Navbar = () => {
5658
5759 < div
5860 className = { `flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
59- scrolled ? "w-[480px ]" : "w-[350px ]"
61+ scrolled ? "w-[420px ]" : "w-[280px ]"
6062 } `}
6163 >
6264 < div
6365 className = "absolute transition-all duration-300 ease-in-out bg-white/5 border border-white/10 rounded-full py-2"
6466 style = { bgStyles }
6567 />
66- { /* biome-ignore lint/a11y/useValidAnchor: <explanation> */ }
67- < a
68- href = "#about"
68+ < Link
69+ href = "/"
6970 ref = { ( ref ) => {
70- linkRefs . current . about = ref ;
71+ linkRefs . current . home = ref ;
7172 } }
72- onClick = { ( ) => setActiveLink ( "about " ) }
73+ onMouseOver = { ( ) => setActiveLink ( "home " ) }
7374 className = "text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
7475 >
75- About
76- </ a >
77- { /* biome-ignore lint/a11y/useValidAnchor: <explanation> */ }
78- < a
79- href = "#careers "
76+ Home
77+ </ Link >
78+ < Link
79+ href = "https://www.github.com/better-t-stack/create-better-t-stack"
80+ target = "_blank "
8081 ref = { ( ref ) => {
81- linkRefs . current . careers = ref ;
82+ linkRefs . current . github = ref ;
8283 } }
83- onClick = { ( ) => setActiveLink ( "careers" ) }
84- className = "text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
85- >
86- Careers
87- </ a >
88- { /* biome-ignore lint/a11y/useValidAnchor: <explanation> */ }
89- < a
90- href = "#blog"
91- ref = { ( ref ) => {
92- linkRefs . current . blog = ref ;
93- } }
94- onClick = { ( ) => setActiveLink ( "blog" ) }
95- className = "text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
84+ onMouseOver = { ( ) => setActiveLink ( "github" ) }
85+ onMouseLeave = { ( ) => setActiveLink ( "home" ) }
86+ className = "text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
9687 >
97- Blog
98- </ a >
99- { /* biome-ignore lint/a11y/useValidAnchor: <explanation> */ }
100- < a
101- href = "#changelog "
88+ < PackageIcon pm = "github" className = "w-4 h-4" /> Github
89+ </ Link >
90+ < Link
91+ href = "https://www.npmjs.com/package/create-better-t-stack"
92+ target = "_blank "
10293 ref = { ( ref ) => {
103- linkRefs . current . changelog = ref ;
94+ linkRefs . current . npm = ref ;
10495 } }
105- onClick = { ( ) => setActiveLink ( "changelog" ) }
106- className = "text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
96+ onMouseOver = { ( ) => setActiveLink ( "npm" ) }
97+ onMouseLeave = { ( ) => setActiveLink ( "home" ) }
98+ className = "text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
10799 >
108- Changelog
109- </ a >
100+ < PackageIcon pm = "npm" className = "w-4 h-4 rounded-full" /> Npm
101+ </ Link >
110102 < span
111103 className = "text-gray-500 transition-all duration-300"
112104 style = { {
@@ -116,13 +108,13 @@ const Navbar = () => {
116108 >
117109 |
118110 </ span >
119- { /* biome-ignore lint/a11y/useValidAnchor: <explanation> */ }
120- < a
121- href = "#documentation"
111+ < Link
112+ href = "/docs"
122113 ref = { ( ref ) => {
123114 linkRefs . current . documentation = ref ;
124115 } }
125- onClick = { ( ) => setActiveLink ( "documentation" ) }
116+ onMouseOver = { ( ) => setActiveLink ( "documentation" ) }
117+ onMouseLeave = { ( ) => setActiveLink ( "home" ) }
126118 style = { {
127119 transform : scrolled ? "translateY(0)" : "translateY(-8px)" ,
128120 } }
@@ -133,7 +125,7 @@ const Navbar = () => {
133125 } `}
134126 >
135127 Documentation
136- </ a >
128+ </ Link >
137129 </ div >
138130
139131 < div
0 commit comments