XeNote/components/portfolio/ListItem.tsx

38 lines
743 B
TypeScript
Raw Normal View History

2024-01-07 18:05:04 +00:00
import ExternalLinkIcon from './ExternalLinkIcon'
2023-12-29 06:03:35 +00:00
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">
2024-01-07 18:05:04 +00:00
<Link {...{ url, label }} />
<Divider />
<Date {...{ date }} />
<ExternalLinkIcon />
2023-12-26 01:28:08 +00:00
</div>
)
}
function Link({ url, label }: any) {
return (
<a href={url} target="_blank">
{label}
</a>
)
}
function Divider() {
return (
<div style={{ border: '1px dashed #fff2' }} className="flex-1" />
)
}
2024-01-07 18:05:04 +00:00
function Date({ date }: { date?: string }) {
if (!date) return null
2024-01-07 18:05:04 +00:00
return <i className="font-muted" >{date}</i>
}