t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
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}
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 }}
39 >
40 <ModalHeader></ModalHeader>
41 <ModalBody style={{ padding: 10 }}>
42 <h1 style={{ color: "#ff2876", textAlign: "center" }}>Rocksky</h1>
43 <p
44 style={{
45 fontSize: 18,
46 marginTop: 40,
47 marginBottom: 20,
48 }}
49 >
50 Sign in or create your account to join the conversation!
51 </p>
52 <div style={{ marginBottom: 20 }}>
53 <div style={{ marginBottom: 15 }}>
54 <LabelMedium>Bluesky handle</LabelMedium>
55 </div>
56 <Input
57 name="handle"
58 startEnhancer={<div style={{ color: "#42576ca6" }}>@</div>}
59 placeholder="<username>.bsky.social"
60 value={handle}
61 onChange={(e) => setHandle(e.target.value)}
62 />
63 </div>
64 <Button
65 onClick={onLogin}
66 overrides={{
67 BaseButton: {
68 style: {
69 width: "100%",
70 backgroundColor: "#ff2876",
71 ":hover": {
72 backgroundColor: "#ff2876",
73 },
74 ":focus": {
75 backgroundColor: "#ff2876",
76 },
77 },
78 },
79 }}
80 >
81 Sign In
82 </Button>
83 <LabelMedium
84 marginTop={"20px"}
85 style={{
86 textAlign: "center",
87 color: "#42576ca6",
88 }}
89 >
90 Don't have an account?
91 </LabelMedium>
92 <div
93 style={{
94 color: "#42576ca6",
95 textAlign: "center",
96 }}
97 >
98 <a
99 href="https://bsky.app"
100 style={{
101 color: "#ff2876",
102 textDecoration: "none",
103 cursor: "pointer",
104 textAlign: "center",
105 }}
106 target="_blank"
107 >
108 Sign up for Bluesky
109 </a>{" "}
110 to create one now!
111 </div>
112 </ModalBody>
113 </Modal>
114 </>
115 );
116}
117
118export default SignInModal;