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