All files / Rindu/components/LoginButton LoginButton.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
 
19x
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ReactElement } from "react";
 
import { useTranslations } from "hooks";
import { getSpotifyLoginURL, isServer } from "utils";
 
export default function LoginButton(): ReactElement {
  const { translations } = useTranslations();
 
  const handleClick = async () => {
    Iif (isServer()) return;
    const url = await getSpotifyLoginURL();
    window.location.href = url;
  };
 
  return (
    <>
      <button onClick={handleClick}>
        {translations.pages.home.loginButton}
      </button>
      <style jsx>{`
        button {
          border-radius: 500px;
          text-decoration: none;
          color: #fff;
          cursor: pointer;
          display: inline-block;
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 1.76px;
          line-height: 18px;
          padding: 12px 34px;
          text-align: center;
          text-transform: uppercase;
          transition: all 33ms cubic-bezier(0.3, 0, 0, 1);
          white-space: nowrap;
          background-color: #000000;
          border: 1px solid #ffffffb3;
          will-change: transform;
        }
        button:focus,
        button:hover {
          transform: scale(1.06);
          background-color: #000;
          border: 1px solid #fff;
        }
        button:active {
          transform: scale(1);
        }
        @media screen and (min-width: 0px) and (max-width: 780px) {
          button {
            padding: 8px 24px;
          }
        }
      `}</style>
    </>
  );
}