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