import Link from 'next/link' import styles from './item.module.css' import UpVote from './upvote' import { useRef } from 'react' import { AD_USER_ID, UNKNOWN_LINK_REL } from '@/lib/constants' import Pin from '@/svgs/pushpin-fill.svg' import reactStringReplace from 'react-string-replace' import PollIcon from '@/svgs/bar-chart-horizontal-fill.svg' import BountyIcon from '@/svgs/bounty-bag.svg' import ActionTooltip from './action-tooltip' import ImageIcon from '@/svgs/image-fill.svg' import { numWithUnits } from '@/lib/format' import ItemInfo from './item-info' import Prism from '@/svgs/prism.svg' import { commentsViewedAt } from '@/lib/new-comments' import { useRouter } from 'next/router' import { Badge } from 'react-bootstrap' import AdIcon from '@/svgs/advertisement-fill.svg' import { DownZap } from './dont-link-this' import { timeLeft } from '@/lib/time' export function SearchTitle ({ title }) { return reactStringReplace(title, /\*\*\*([^*]+)\*\*\*/g, (match, i) => { return {match} }) } export default function Item ({ item, rank, belowTitle, right, full, children, siblingComments, onQuoteReply, pinnable }) { const titleRef = useRef() const router = useRouter() const image = item.url && item.url.startsWith(process.env.NEXT_PUBLIC_IMGPROXY_URL) return ( <> {rank ? (
{rank}
) :
}
{item.position && (pinnable || !item.subName) ? : item.meDontLikeSats > item.meSats ? : Number(item.user?.id) === AD_USER_ID ? : }
{ const viewedAt = commentsViewedAt(item) if (viewedAt) { e.preventDefault() if (e.ctrlKey || e.metaKey) { window.open( `/items/${item.id}`, '_blank', 'noopener,noreferrer' ) } else { router.push( `/items/${item.id}?commentsViewedAt=${viewedAt}`, `/items/${item.id}`) } } }} ref={titleRef} className={`${styles.title} text-reset me-2`} > {item.searchTitle ? : item.title} {item.pollCost && } {item.bounty > 0 && } {item.forwards?.length > 0 && } {image && } {item.url && !image && // eslint-disable-next-line {item.url.replace(/(^https?:|^)\/\//, '')} }
AD} /> {belowTitle}
{right}
{children && (
{children}
)} ) } export function ItemSkeleton ({ rank, children }) { return ( <> {rank ? (
{rank}
) :
}
{children && (
{children}
)} ) } function PollIndicator ({ item }) { const hasExpiration = !!item.pollExpiresAt const timeRemaining = timeLeft(new Date(item.pollExpiresAt)) const isActive = !hasExpiration || !!timeRemaining return ( ) }