ysandler/midrashim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: created back button, added to breadcrumb

Browse Source
This commit is contained in:
Yehoshua Sandler 2025-05-01 14:00:07 -05:00
parent 1ebbf524be
commit 7deb02391a
2 changed files with 70 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/NavigateBackButton.tsx Normal file
View File

@ -0,0 +1,20 @@
'use client'
import { ArrowUturnLeftIcon } from '@heroicons/react/20/solid'
import { Button } from './ui/button'
const NaviagteBackButton = () => {
const handleClick = () => {
window.history.back()
}
return (
<Button
className="cursor-pointer text-muted-foreground hover:text-foreground bg-transparent hover:bg-muted-foreground/10 border border-muted-foreground/10"
onClick={handleClick}
>
<ArrowUturnLeftIcon className="size-6" />
</Button>
)
}
export default NaviagteBackButton

94
src/components/PageBreadCrumb.tsx
View File

@ -15,6 +15,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from './ui/dropdown-menu' } from './ui/dropdown-menu'
import { Fragment } from 'react' import { Fragment } from 'react'
import NaviagteBackButton from './NavigateBackButton'
export type Route = { export type Route = {
href: string href: string
@ -49,50 +50,55 @@ export function PageBreadCrumb(props: Props) {
const { routes } = props const { routes } = props
const groups = groupBreadCrumbHistory(routes) const groups = groupBreadCrumbHistory(routes)
return ( return (
<Breadcrumb> <div className="">
<BreadcrumbList> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbList>
<BreadcrumbLink href={groups.root.href}>{groups.root.label}</BreadcrumbLink> <BreadcrumbItem>
</BreadcrumbItem> <NaviagteBackButton />
<BreadcrumbSeparator /> </BreadcrumbItem>
{!!groups.inBetween.length && ( <BreadcrumbItem>
<> <BreadcrumbLink href={groups.root.href}>{groups.root.label}</BreadcrumbLink>
<BreadcrumbItem> </BreadcrumbItem>
<DropdownMenu> <BreadcrumbSeparator />
<DropdownMenuTrigger className="flex items-center gap-1"> {!!groups.inBetween.length && (
<BreadcrumbEllipsis className="h-4 w-4" /> <>
<span className="sr-only">Toggle menu</span> <BreadcrumbItem>
</DropdownMenuTrigger> <DropdownMenu>
<DropdownMenuContent align="start"> <DropdownMenuTrigger className="flex items-center gap-1">
{groups.inBetween.map((r) => ( <BreadcrumbEllipsis className="h-4 w-4" />
<DropdownMenuItem key={r.label + r.href}> <span className="sr-only">Toggle menu</span>
<Link href={r.href}>{r.label}</Link> </DropdownMenuTrigger>
</DropdownMenuItem> <DropdownMenuContent align="start">
))} {groups.inBetween.map((r) => (
</DropdownMenuContent> <DropdownMenuItem key={r.label + r.href}>
</DropdownMenu> <Link href={r.href}>{r.label}</Link>
</BreadcrumbItem> </DropdownMenuItem>
<BreadcrumbSeparator /> ))}
</> </DropdownMenuContent>
)} </DropdownMenu>
{groups.mostRecent.map((r, index) => {
if (index != groups.mostRecent.length - 1)
return (
<Fragment key={r.label + r.href}>
<BreadcrumbItem>
<BreadcrumbLink href={r.href}>{r.label}</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
</Fragment>
)
else
return (
<BreadcrumbItem key={r.label + r.href}>
<BreadcrumbPage>{r.label}</BreadcrumbPage>
</BreadcrumbItem> </BreadcrumbItem>
) <BreadcrumbSeparator />
})} </>
</BreadcrumbList> )}
</Breadcrumb> {groups.mostRecent.map((r, index) => {
if (index != groups.mostRecent.length - 1)
return (
<Fragment key={r.label + r.href}>
<BreadcrumbItem>
<BreadcrumbLink href={r.href}>{r.label}</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
</Fragment>
)
else
return (
<BreadcrumbItem key={r.label + r.href}>
<BreadcrumbPage>{r.label}</BreadcrumbPage>
</BreadcrumbItem>
)
})}
</BreadcrumbList>
</Breadcrumb>
</div>
) )
} }