git.iko.soy/urbit.org
on e8ee718 help sign in
urbit.org/components/Contact.js
102 lines 3.7 kB history raw
1import NewsletterSignup from "./NewletterSignup";
2import { name, contact } from "../lib/constants";
3import { useCopyToClipboard } from "../lib/hooks";
5export default function Contact({ emphasize }) {
6 const [copyStatus, copy] = useCopyToClipboard(contact.urbitCommunity);
8 const buttonIcon =
9 copyStatus === "inactive" ? (
10 <svg
11 width="16"
12 height="16"
13 viewBox="0 0 16 16"
14 fill="none"
15 xmlns="http://www.w3.org/2000/svg"
16 >
17 <path
18 fillRule="evenodd"
19 clipRule="evenodd"
20 d="M3.2 1.6C3.2 0.716344 3.91634 0 4.8 0H11.3615L14.9333 2.38124V12.2667C14.9333 13.1503 14.217 13.8667 13.3333 13.8667H12.8V14.4C12.8 15.2837 12.0837 16 11.2 16H2.66667C1.78301 16 1.06667 15.2837 1.06667 14.4V3.73333C1.06667 2.84968 1.78301 2.13333 2.66667 2.13333H3.2V1.6ZM3.2 3.2H2.66667C2.37211 3.2 2.13333 3.43878 2.13333 3.73333V14.4C2.13333 14.6946 2.37211 14.9333 2.66667 14.9333H11.2C11.4946 14.9333 11.7333 14.6946 11.7333 14.4V13.8667H4.8C3.91634 13.8667 3.2 13.1503 3.2 12.2667V3.2Z"
21 fill="#32302D"
22 />
23 </svg>
24 ) : copyStatus === "copied" ? (
25 <svg
26 width="16"
27 height="16"
28 viewBox="0 0 16 16"
29 fill="none"
30 xmlns="http://www.w3.org/2000/svg"
31 >
32 <path
33 fillRule="evenodd"
34 clipRule="evenodd"
35 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM7.54325 11.4247L12.1498 5.66647L11.3169 5.00013L7.39013 9.90859L4.60812 7.59025L3.92526 8.40969L7.54325 11.4247Z"
36 fill="#32302D"
37 />
38 </svg>
39 ) : (
40 <svg
41 width="16"
42 height="16"
43 viewBox="0 0 16 16"
44 fill="none"
45 xmlns="http://www.w3.org/2000/svg"
46 >
47 <path
48 fillRule="evenodd"
49 clipRule="evenodd"
50 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM10.8229 11.5772L8.00004 8.75429L5.17716 11.5772L4.42292 10.8229L7.24579 8.00004L4.42292 5.17716L5.17716 4.42292L8.00004 7.24579L10.8229 4.42292L11.5772 5.17716L8.75429 8.00004L11.5772 10.8229L10.8229 11.5772Z"
51 fill="#32302D"
52 />
53 </svg>
54 );
56 const linkText = emphasize ? "text-green" : "text-black";
57 const border = emphasize ? "green" : "black";
59 return (
60 <div>
61 <div className="measure">
62 <h4 className="pb-6">
63 If you’d like to follow our progress, we send monthly updates via
64 email:
65 </h4>
66 </div>
67 <NewsletterSignup color={border} />
68 <h4 className="mt-12 text-gray">
69 Follow us on{" "}
70 <a className={linkText} href={contact.twitter}>
71 Twitter
72 </a>
73 </h4>
74 <h4 className="mt-6 text-gray">
75 Explore code on{" "}
76 <a className={linkText} href={contact.github}>
77 Github
78 </a>
79 </h4>
80 <h4 className="mt-6 text-gray">
81 Ask questions in our{" "}
82 <a className={linkText} href={contact.discord}>
83 Discord
84 </a>
85 </h4>
86 <h4 className="mt-6 text-gray flex items-baseline flex-wrap">
87 Boot Urbit and join{" "}
88 <div className="md:ml-2 rounded-lg flex items-stretch">
89 <code className="rounded-l-lg px-2 md:px-4 py-2 bg-wall flex items-center h-full">
90 {contact.urbitCommunity}
91 </code>
92 <button
93 className="rounded-r-lg px-4 bg-wall ml-0.5 flex-1 flex justify-center items-center"
94 onClick={() => copy()}
95 >
96 {buttonIcon}
97 </button>
98 </div>
99 </h4>
100 </div>
101 );