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
| import React, { useState, useRef, useEffect, useMemo } from "react";
| import {
| Box,
| Button,
| } from '@mui/material';
| import { darken } from '@mui/system';
| import FacebookIcon from '@mui/icons-material/Facebook';
| import GoogleIcon from '@mui/icons-material/Google';
| import EmailIcon from '@mui/icons-material/Email';
| import GitHubIcon from '@mui/icons-material/GitHub';
|
| const ProviderButton = (props) => {
| const { name, color, type, icon } = props;
|
| return (
| <>
| <Button startIcon={icon} sx={{
| backgroundColor: color,
| color: '#FFFFFF',
| mb: 1,
| boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
| '&:hover': {
| backgroundColor: darken(color, 0.2),
| }
| }}>
| {type} WITH {name}
| </Button>
| </>
| )
| }
|
| const ProviderChoices = (props) => {
| const { type = "LOG IN" } = props;
|
| return (
| <>
| <ProviderButton type={type} name='EMAIL' color="#1da1f2" icon={<EmailIcon />} />
| <ProviderButton type={type} name='GITHUB' color="#24292e" icon={<GitHubIcon />} />
| <ProviderButton type={type} name='FACEBOOK' color="#3b5998" icon={<FacebookIcon />} />
| <ProviderButton type={type} name='GOOGLE' color="#4285F4" icon={<GoogleIcon />} />
| </>
| )
| }
|
| export default ProviderChoices;
|
|
