isuggest.selfce.st / strand
alternative tangled frontend (extremely wip)
fork atom

feat: initial navbar

serenity 189eba98 f5d65204

+41 -3
unified split
+38 -2
src/components/Nav/NavBarUnauthed.tsx
··· 1 + import { StrandIcon } from "@/components/Icons/Branding/StrandIcon"; 2 + import { Link } from "@tanstack/react-router"; 3 + import { motion } from "motion/react"; 4 + 1 5 export const NavBarUnauthed = () => { 2 6 return ( 3 - <div> 4 - <p>Unauthed Nav Bar</p> 7 + <div className="bg-surface0 flex w-full items-center justify-between p-4"> 8 + <div className="flex items-center gap-1"> 9 + <motion.div initial="initial" whileHover="hover"> 10 + <Link 11 + to="/" 12 + className="flex cursor-pointer items-center gap-1 pl-2 text-xl font-semibold" 13 + > 14 + <motion.div 15 + variants={{ 16 + hover: { rotate: [0, -10, 10, -10, 10, 0] }, 17 + }} 18 + whileTap={{ scale: 0.8 }} 19 + transition={{ duration: 0.5, ease: "easeInOut" }} 20 + > 21 + <StrandIcon /> 22 + </motion.div> 23 + <motion.div className="text-text relative inline-block"> 24 + <h1>Strand</h1> 25 + <motion.span 26 + className="bg-text absolute bottom-1 left-0 h-0.25 w-full origin-center" 27 + variants={{ 28 + initial: { scaleX: 0 }, 29 + hover: { scaleX: 1 }, 30 + }} 31 + transition={{ 32 + type: "spring", 33 + duration: 0.25, 34 + bounce: 0.3, 35 + }} 36 + /> 37 + </motion.div> 38 + </Link> 39 + </motion.div> 40 + </div> 5 41 </div> 6 42 ); 7 43 };
+3 -1
src/routes/index.tsx
··· 1 + import { NavBarUnauthed } from "@/components/Nav/NavBarUnauthed"; 1 2 import { createFileRoute, Link } from "@tanstack/react-router"; 2 3 3 4 export const Route = createFileRoute("/")({ component: App }); 4 5 5 6 function App() { 6 7 return ( 7 - <div className="flex min-w-screen flex-col items-center justify-center gap-4 pt-8"> 8 + <div className="flex min-w-screen flex-col items-center justify-center gap-4"> 9 + <NavBarUnauthed /> 8 10 <h1 className="text-xl font-bold"> 9 11 The better frontend for the better forge. 10 12 </h1>