|
| 1 | +import { LinkGrid } from '@site/src/components/LinkGrid' |
1 | 2 | import React from 'react'
|
2 |
| -import Link from '@docusaurus/Link' |
3 |
| -import './AuthMethodsGrid.css' |
4 | 3 |
|
5 |
| -export function AuthMethodsGrid() { |
6 |
| - const authMethods = [ |
7 |
| - { |
8 |
| - title: 'Email', |
9 |
| - description: 'Email verification, password reset, etc.', |
10 |
| - linkToDocs: './email', |
11 |
| - }, |
12 |
| - { |
13 |
| - title: 'Username & Password', |
14 |
| - description: 'The simplest way to get started', |
15 |
| - linkToDocs: './username-and-pass', |
16 |
| - }, |
17 |
| - { |
18 |
| - title: 'Google', |
19 |
| - description: 'Users sign in with their Google account', |
20 |
| - linkToDocs: './social-auth/google', |
21 |
| - }, |
22 |
| - { |
23 |
| - title: 'Github', |
24 |
| - description: 'Users sign in with their Github account', |
25 |
| - linkToDocs: './social-auth/github', |
26 |
| - }, |
27 |
| - { |
28 |
| - title: 'Keycloak', |
29 |
| - description: 'Users sign in with their Keycloak account', |
30 |
| - linkToDocs: './social-auth/keycloak', |
31 |
| - }, |
32 |
| - { |
33 |
| - title: 'Discord', |
34 |
| - description: 'Users sign in with their Discord account', |
35 |
| - linkToDocs: './social-auth/discord', |
36 |
| - }, |
37 |
| - ] |
38 |
| - return ( |
39 |
| - <> |
40 |
| - <div className="auth-methods-grid"> |
41 |
| - {authMethods.map((authMethod) => ( |
42 |
| - <AuthMethodBox |
43 |
| - title={authMethod.title} |
44 |
| - description={authMethod.description} |
45 |
| - linkToDocs={authMethod.linkToDocs} |
46 |
| - /> |
47 |
| - ))} |
48 |
| - </div> |
49 |
| - <p className="auth-methods-info"> |
50 |
| - <small>Click on each auth method for more details.</small> |
51 |
| - </p> |
52 |
| - </> |
53 |
| - ) |
54 |
| -} |
| 4 | +const authMethods = [ |
| 5 | + { |
| 6 | + title: 'Email', |
| 7 | + description: 'Email verification, password reset, etc.', |
| 8 | + linkTo: './email', |
| 9 | + }, |
| 10 | + { |
| 11 | + title: 'Username & Password', |
| 12 | + description: 'The simplest way to get started', |
| 13 | + linkTo: './username-and-pass', |
| 14 | + }, |
| 15 | + { |
| 16 | + title: 'Google', |
| 17 | + description: 'Users sign in with their Google account', |
| 18 | + linkTo: './social-auth/google', |
| 19 | + }, |
| 20 | + { |
| 21 | + title: 'Github', |
| 22 | + description: 'Users sign in with their Github account', |
| 23 | + linkTo: './social-auth/github', |
| 24 | + }, |
| 25 | + { |
| 26 | + title: 'Keycloak', |
| 27 | + description: 'Users sign in with their Keycloak account', |
| 28 | + linkTo: './social-auth/keycloak', |
| 29 | + }, |
| 30 | + { |
| 31 | + title: 'Discord', |
| 32 | + description: 'Users sign in with their Discord account', |
| 33 | + linkTo: './social-auth/discord', |
| 34 | + }, |
| 35 | +] |
55 | 36 |
|
56 |
| -function AuthMethodBox({ |
57 |
| - linkToDocs, |
58 |
| - title, |
59 |
| - description, |
60 |
| -}: { |
61 |
| - linkToDocs: string |
62 |
| - title: string |
63 |
| - description: string |
64 |
| -}) { |
| 37 | +export function AuthMethodsGrid() { |
65 | 38 | return (
|
66 |
| - <Link to={linkToDocs} className="auth-method-box"> |
67 |
| - <h3>{title} »</h3> |
68 |
| - <p>{description}</p> |
69 |
| - </Link> |
| 39 | + <LinkGrid |
| 40 | + caption="Click on each auth method for more details." |
| 41 | + links={authMethods} |
| 42 | + /> |
70 | 43 | )
|
71 | 44 | }
|
0 commit comments