isuggest.selfce.st
alternative tangled frontend (extremely wip)
1import { LucideLogIn } from "lucide-react";
2import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink";
3import { StrandIcon } from "@/components/Icons/Branding/StrandIcon";
4
5export const NavBarUnauthed = () => {
6 return (
7 <div className="bg-base flex w-full items-center justify-between p-3">
8 <div className="flex items-center gap-1">
9 <UnderlineIconRouterLink
10 to="/"
11 label="Strand"
12 icon={StrandIcon()}
13 iconClassName="text-text"
14 labelClassName="text-text"
15 underlineClassName="bg-text"
16 className="pl-2 text-lg font-semibold"
17 />
18 </div>
19 <div className="mr-3 flex items-center gap-1">
20 <UnderlineIconRouterLink
21 to="/login"
22 label="Sign In"
23 icon={<LucideLogIn height={16} width={16} />}
24 iconClassName="text-crust"
25 labelClassName="text-crust"
26 underlineClassName="bg-crust"
27 className="bg-accent rounded-sm p-1.5 pr-3 pl-3 transition-all hover:bg-accent/90"
28 position="right"
29 iconTransitions={{ duration: 0.2, ease: "easeInOut" }}
30 iconVariants={{
31 active: {
32 x: [0, 10, -10, 0],
33 opacity: [1, 0, 0, 1],
34 },
35 }}
36 />
37 </div>
38 </div>
39 );
40};