pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

undoeing messed up

Browse Source
This commit is contained in:
zmeyer44 2023-10-14 23:41:59 -04:00
parent 667eaf2fbb
commit ac6d24afb8
1 changed files with 13 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/(app)/_layout/BottomNav.tsx
View File

@ -5,12 +5,6 @@ import {
RiQuestionAnswerFill, RiQuestionAnswerFill,
} from "react-icons/ri"; } from "react-icons/ri";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
export default function BottomNav() { export default function BottomNav() {
const navigationItems = [ const navigationItems = [
@ -19,66 +13,36 @@ export default function BottomNav() {
name: "home", name: "home",
icon: RiHome6Fill, icon: RiHome6Fill,
current: true, current: true,
active: true,
}, },
{ {
href: "", href: "",
name: "explore", name: "explore",
icon: RiCompass3Fill, icon: RiCompass3Fill,
current: false, current: false,
active: false,
}, },
{ {
href: "", href: "",
name: "messages", name: "messages",
icon: RiQuestionAnswerFill, icon: RiQuestionAnswerFill,
current: false, current: false,
active: false,
}, },
]; ];
return ( return (
<footer className="z-header- flex h-[var(--bottom-nav-height)] w-full bg-background sm:hidden"> <footer className="z-header- flex h-[var(--bottom-nav-height)] w-full bg-background sm:hidden">
<div className="fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t bg-background px-4"> <div className="fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t bg-background px-4">
{navigationItems.map((item) => { {navigationItems.map((item) => (
if (item.active) { <Link href={item.href} className="center group group flex-1">
return ( <item.icon
<Link href={item.href} className="center group flex-1"> className={cn(
<item.icon item.current
className={cn( ? "text-foreground"
item.current : "text-muted-foreground group-hover:text-foreground",
? "text-foreground" "h-6 w-6 shrink-0",
: "text-muted-foreground group-hover:text-foreground", )}
"h-6 w-6 shrink-0", aria-hidden="true"
)} />
aria-hidden="true" </Link>
/> ))}
</Link>
);
} else {
return (
<TooltipProvider key={item.name}>
<Tooltip delayDuration={100}>
<TooltipTrigger className="center group flex-1">
<div className="center group flex-1">
<item.icon
className={cn(
item.current
? "text-foreground"
: "text-muted-foreground group-hover:text-foreground",
"h-6 w-6 shrink-0",
)}
aria-hidden="true"
/>
</div>
</TooltipTrigger>
<TooltipContent align="center">
<p>Coming Soon</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
})}
<div className="standalone:block hidden h-[20px] w-full"></div> <div className="standalone:block hidden h-[20px] w-full"></div>
</div> </div>
</footer> </footer>