mirror of
https://github.com/linsa-io/linsa.git
synced 2026-04-24 09:18:37 +02:00
1a6c2ab420
* feat: add item scroll to active * fix: reset enterkey and scroll to view * fix: link item displayName * refactor: remove keyboard page nav * chore: fix scrolling, perf, keys, highlight active item etc * chore: use new hook for create a page * chore: disabled auto delete page * wip * chore: add learning selector * chore: learning selector update
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from "react"
|
|
import Link from "next/link"
|
|
import { cn } from "@/lib/utils"
|
|
import { PersonalPage } from "@/lib/schema"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { useMedia } from "react-use"
|
|
import { useColumnStyles } from "../hooks/use-column-styles"
|
|
import { format } from "date-fns"
|
|
import { Column } from "@/components/custom/column"
|
|
|
|
interface PageItemProps {
|
|
page: PersonalPage
|
|
isActive: boolean
|
|
}
|
|
|
|
export const PageItem = React.forwardRef<HTMLAnchorElement, PageItemProps>(({ page, isActive }, ref) => {
|
|
const isTablet = useMedia("(max-width: 640px)")
|
|
const columnStyles = useColumnStyles()
|
|
|
|
return (
|
|
<Link
|
|
ref={ref}
|
|
tabIndex={isActive ? 0 : -1}
|
|
className={cn("relative block cursor-default outline-none", "min-h-12 py-2 max-lg:px-4 sm:px-6", {
|
|
"bg-muted-foreground/5": isActive,
|
|
"hover:bg-muted/50": !isActive
|
|
})}
|
|
href={`/pages/${page.id}`}
|
|
role="listitem"
|
|
>
|
|
<div className="flex h-full items-center gap-4">
|
|
<Column.Wrapper style={columnStyles.title}>
|
|
<Column.Text className="truncate text-[13px] font-medium">{page.title || "Untitled"}</Column.Text>
|
|
</Column.Wrapper>
|
|
|
|
{!isTablet && (
|
|
<Column.Wrapper style={columnStyles.topic}>
|
|
{page.topic && <Badge variant="secondary">{page.topic.prettyName}</Badge>}
|
|
</Column.Wrapper>
|
|
)}
|
|
|
|
<Column.Wrapper style={columnStyles.updated} className="flex justify-end">
|
|
<Column.Text className="text-[13px]">{format(new Date(page.updatedAt), "d MMM yyyy")}</Column.Text>
|
|
</Column.Wrapper>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})
|
|
|
|
PageItem.displayName = "PageItem"
|