rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
tsiry-sandratraina.com
1import { Button } from "baseui/button";
2import { Input } from "baseui/input";
3import { Modal, ModalBody, ModalHeader } from "baseui/modal";
4import { LabelMedium } from "baseui/typography";
5import { useState } from "react";
6
7interface SignInModalProps {
8 isOpen: boolean;
9 onClose: () => void;
10 like?: boolean;
11 follow?: boolean;
12}
13
14function SignInModal(props: SignInModalProps) {
15 const { isOpen, onClose, like, follow } = props;
16 const [handle, setHandle] = useState("");
17
18 const onLogin = async () => {
19 if (!handle.trim()) {
20 return;
21 }
22
23 onClose();
24
25 window.location.href = `https://rocksky.pages.dev/loading?handle=${handle}`;
26 };
27
28 return (
29 <>
30 <Modal
31 size={"auto"}
32 onClose={onClose}
33 isOpen={isOpen}
34 overrides={{
35 Root: {
36 style: {
37 zIndex: 50,
38 },
39 },
40 Dialog: {
41 style: {
42 backgroundColor: "var(--color-background)",
43 },
44 },
45 Close: {
46 style: {
47 color: "var(--color-text)",
48 ":hover": {
49 color: "var(--color-text)",
50 opacity: 0.8,
51 },
52 },
53 },
54 }}
55 >
56 <ModalHeader></ModalHeader>
57 <ModalBody style={{ padding: 10 }}>
58 <h1 style={{ color: "#ff2876", textAlign: "center" }}>Rocksky</h1>
59 <p className="text-[var(--color-text)] text-[18px] mt-[40px] mb-[20px]">
60 {!like
61 ? !follow
62 ? "Sign in or create your account to join the conversation!"
63 : "Sign in or create your account to follow users!"
64 : "Sign in or create your account to like songs!"}
65 </p>
66 <div style={{ marginBottom: 20 }}>
67 <div style={{ marginBottom: 15 }}>
68 <LabelMedium className="!text-[var(--color-text)]">
69 Handle
70 </LabelMedium>
71 </div>
72 <Input
73 name="handle"
74 startEnhancer={
75 <div className="text-[var(--color-text-muted)] bg-[var(--color-input-background)]">
76 @
77 </div>
78 }
79 placeholder="<username>.bsky.social"
80 value={handle}
81 onChange={(e) => setHandle(e.target.value)}
82 overrides={{
83 Root: {
84 style: {
85 backgroundColor: "var(--color-input-background)",
86 borderColor: "var(--color-input-background)",
87 },
88 },
89 StartEnhancer: {
90 style: {
91 backgroundColor: "var(--color-input-background)",
92 },
93 },
94 InputContainer: {
95 style: {
96 backgroundColor: "var(--color-input-background)",
97 },
98 },
99 Input: {
100 style: {
101 color: "var(--color-text)",
102 caretColor: "var(--color-text)",
103 },
104 },
105 }}
106 />
107 </div>
108 <Button
109 onClick={onLogin}
110 overrides={{
111 BaseButton: {
112 style: {
113 width: "100%",
114 backgroundColor: "#ff2876",
115 ":hover": {
116 backgroundColor: "#ff2876",
117 },
118 ":focus": {
119 backgroundColor: "#ff2876",
120 },
121 },
122 },
123 }}
124 >
125 Sign In
126 </Button>
127 <LabelMedium
128 marginTop={"20px"}
129 className="!text-[var(--color-text-muted)] text-center"
130 >
131 Don't have an atproto handle yet?
132 </LabelMedium>
133 <div className="text-[var(--color-text-muted)] text-center text-[16px]">
134 You can create one at{" "}
135 <a
136 href="https://bsky.app"
137 className="text-[var(--color-primary)] no-underline cursor-pointer text-center"
138 target="_blank"
139 >
140 Bluesky
141 </a>{" "}
142 or any other AT Protocol service.
143 </div>
144 </ModalBody>
145 </Modal>
146 </>
147 );
148}
149
150export default SignInModal;