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