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