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