52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import { cn } from "@/shared/lib/utils"
|
|
import { ChevronRight } from "lucide-react"
|
|
import type * as React from "react"
|
|
|
|
interface ListItemProps {
|
|
title: string
|
|
subtitle?: string
|
|
media?: React.ReactNode
|
|
after?: React.ReactNode
|
|
link?: boolean
|
|
onClick?: () => void
|
|
className?: string
|
|
}
|
|
|
|
export function ListItem({
|
|
title,
|
|
subtitle,
|
|
media,
|
|
after,
|
|
link,
|
|
onClick,
|
|
className,
|
|
}: ListItemProps) {
|
|
const Comp = onClick ? "button" : "div"
|
|
|
|
return (
|
|
<Comp
|
|
type={onClick ? "button" : undefined}
|
|
onClick={onClick}
|
|
className={cn(
|
|
"flex w-full items-center gap-3 px-4 py-3 text-left",
|
|
onClick && "hover:bg-accent active:bg-accent/80",
|
|
className,
|
|
)}
|
|
>
|
|
{media && <div className="shrink-0">{media}</div>}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-medium">{title}</div>
|
|
{subtitle && (
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{after && <div className="shrink-0">{after}</div>}
|
|
{link && (
|
|
<ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
|
|
)}
|
|
</Comp>
|
|
)
|
|
}
|