mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-10-26 15:49:50 +03:00
316f1db756
- RenderTree component - /lib.js now in fds
112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
import Link from "next/link";
|
|
import {
|
|
formatDate,
|
|
formatTime,
|
|
formatTimeZone,
|
|
} from "@urbit/foundation-design-system";
|
|
|
|
export function Name({ children, className }) {
|
|
return <b className={`font-normal ${className || ""}`}>{children}</b>;
|
|
}
|
|
|
|
export function Patp({ children, className }) {
|
|
return (
|
|
<Link href={`https://urbit.org/ids/${children}`} passHref>
|
|
<a>
|
|
<code className={`font-mono ${className || ""}`}>{children}</code>
|
|
</a>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// Used to render a human name alongside their @p
|
|
export function Person({
|
|
name,
|
|
patp,
|
|
nameClassNames,
|
|
patpClassNames,
|
|
className,
|
|
}) {
|
|
return (
|
|
<>
|
|
{patp && name ? (
|
|
<>
|
|
<Name className={nameClassNames}>{name}</Name>{" "}
|
|
<Patp className={patpClassNames + " opacity-60"}>{patp}</Patp>
|
|
</>
|
|
) : patp ? (
|
|
<Patp className={patpClassNames}>{patp}</Patp>
|
|
) : name ? (
|
|
<Name className={nameClassNames}>{name}</Name>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// This goes inside a <p/> tag
|
|
export function ReadableList({ children, serial = ",", conjunction = "and" }) {
|
|
return (
|
|
<>
|
|
{children.map((Child, index) => {
|
|
if (index < children.length - 2) {
|
|
return (
|
|
<>
|
|
{Child}
|
|
{serial}
|
|
</>
|
|
);
|
|
} else if (index < children.length - 1) {
|
|
return (
|
|
<>
|
|
{Child} {conjunction}{" "}
|
|
</>
|
|
);
|
|
}
|
|
return <>{Child}</>;
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ShowOrHide({ children, condition }) {
|
|
if (condition) {
|
|
return children;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
export function DateRange({ starts, ends, className, short }) {
|
|
// For events which have no end datetime
|
|
if (!ends.isValid) {
|
|
return (
|
|
<div>
|
|
<p className={className}>
|
|
{`${formatDate(starts)} • ${formatTime(starts)} ${formatTimeZone(
|
|
starts
|
|
)}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
// For events which start and end on the same day
|
|
if (starts.hasSame(ends, "day")) {
|
|
return (
|
|
<div>
|
|
<p className={className}>
|
|
{`${formatDate(starts)} • ${formatTime(starts)} to ${formatTime(
|
|
ends
|
|
)} ${formatTimeZone(starts)}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
// For multi-day events
|
|
return (
|
|
<div>
|
|
<p className={className}>{`${starts.toFormat(
|
|
"cccc, LLLL d"
|
|
)} to ${formatDate(ends)}`}</p>
|
|
</div>
|
|
);
|
|
}
|