git.iko.soy/urbit.org
on master help sign in
urbit.org/components/Snippets.js
111 lines 2.5 kB history raw
1import Link from "next/link";
2import {
3 formatDate,
4 formatTime,
5 formatTimeZone,
6} from "@urbit/foundation-design-system";
8export function Name({ children, className }) {
9 return <b className={`font-normal ${className || ""}`}>{children}</b>;
12export function Patp({ children, className }) {
13 return (
14 <Link href={`/ids/${children}`} passHref>
15 <a>
16 <code className={`font-mono ${className || ""}`}>{children}</code>
17 </a>
18 </Link>
19 );
22// Used to render a human name alongside their @p
23export function Person({
24 name,
25 patp,
26 nameClassNames,
27 patpClassNames,
28 className,
29}) {
30 return (
31 <>
32 {patp && name ? (
33 <>
34 <Name className={nameClassNames}>{name}</Name>{" "}
35 <Patp className={patpClassNames + " opacity-60"}>{patp}</Patp>
36 </>
37 ) : patp ? (
38 <Patp className={patpClassNames}>{patp}</Patp>
39 ) : name ? (
40 <Name className={nameClassNames}>{name}</Name>
41 ) : null}
42 </>
43 );
46// This goes inside a <p/> tag
47export function ReadableList({ children, serial = ",", conjunction = "and" }) {
48 return (
49 <>
50 {children.map((Child, index) => {
51 if (index < children.length - 2) {
52 return (
53 <>
54 {Child}
55 {serial}
56 </>
57 );
58 } else if (index < children.length - 1) {
59 return (
60 <>
61 {Child} {conjunction}{" "}
62 </>
63 );
64 }
65 return <>{Child}</>;
66 })}
67 </>
68 );
71export function ShowOrHide({ children, condition }) {
72 if (condition) {
73 return children;
74 }
75 return null;
78export function DateRange({ starts, ends, className, short }) {
79 // For events which have no end datetime
80 if (!ends.isValid) {
81 return (
82 <div>
83 <p className={className}>
84 {`${formatDate(starts)} • ${formatTime(starts)} ${formatTimeZone(
85 starts
86 )}`}
87 </p>
88 </div>
89 );
90 }
91 // For events which start and end on the same day
92 if (starts.hasSame(ends, "day")) {
93 return (
94 <div>
95 <p className={className}>
96 {`${formatDate(starts)} • ${formatTime(starts)} to ${formatTime(
97 ends
98 )} ${formatTimeZone(starts)}`}
99 </p>
100 </div>
101 );
102 }
103 // For multi-day events
104 return (
105 <div>
106 <p className={className}>{`${starts.toFormat(
107 "cccc, LLLL d"
108 )} to ${formatDate(ends)}`}</p>
109 </div>
110 );