XeNote/components/ListItem.tsx

42 lines
820 B
TypeScript
Raw Normal View History

import { useRef, useEffect, type ElementType } from "react";
2024-01-01 03:10:16 +00:00
import { Border } from "./Border";
2023-12-29 06:03:35 +00:00
import ExternalLinkIcon from "./ExternalLinkIcon";
2023-12-30 16:42:21 +00:00
export interface ListItemProps {
label: string
2023-12-30 16:42:21 +00:00
date?: string
url: string
}
2023-12-30 16:42:21 +00:00
export default function ListItem({ label, date, url }: ListItemProps) {
2023-12-26 01:28:08 +00:00
return (
<div className="flex-row flex-between y-bottom gap-1">
<Link {...{ url, label }} />
<Divider />
<Date {...{ date }} />
<ExternalLinkIcon />
2023-12-26 01:28:08 +00:00
</div>
)
}
function Link({ url, label }) {
return (
<a href={url} target="_blank">
{label}
</a>
)
}
function Divider() {
return (
<div style={{ border: '1px dashed #fff2' }} className="flex-1" />
)
}
function Date({ date }) {
if (!date) return null
return <i className="font-muted" >{date}</i>
}