11import React from 'react' ;
2- import { FaReact , FaPlayCircle , FaCss3 , FaJs } from 'react-icons/fa' ;
3- import clsx from 'clsx' ;
2+ import { FaReact , FaPlayCircle , FaJs , FaCss3 } from 'react-icons/fa' ;
43import Layout from '@theme/Layout' ;
5- import Link from '@docusaurus/Link' ;
64import useDocusaurusContext from '@docusaurus/useDocusaurusContext' ;
5+ import { ThemeProvider } from '@availity/theme-provider' ;
6+ import { Card , CardActionArea , CardHeader , CardContent } from '@availity/mui-card' ;
7+ import { Grid , Container } from '@availity/mui-layout' ;
8+ import { Typography } from '@availity/mui-typography' ;
9+ import { Alert } from '@availity/mui-alert' ;
710import styles from './styles.module.css' ;
811
912const features = [
@@ -16,11 +19,11 @@ const features = [
1619 target : '_self' ,
1720 } ,
1821 {
19- title : 'React Components ' ,
22+ title : 'Element ' ,
2023 icon : FaReact ,
2124 // linkStyle: 'reactIcon',
22- description : < > React components built with the Availity UI Kit and Reactstrap </ > ,
23- href : 'https://availity.github.io/availity-react ' ,
25+ description : < > React components built with Material UI using Availity's Element Design System. </ > ,
26+ href : 'https://availity.github.io/element ' ,
2427 target : '_self' ,
2528 } ,
2629 {
@@ -32,68 +35,74 @@ const features = [
3235 target : '_self' ,
3336 } ,
3437 {
35- title : 'Availity UI Kit' ,
38+ title : 'Availity React' ,
39+ icon : FaReact ,
40+ // linkStyle: 'reactIcon',
41+ description : < > React components and hooks. React components are built with the Availity UI Kit and Reactstrap 8.</ > ,
42+ href : 'https://availity.github.io/availity-react' ,
43+ target : '_self' ,
44+ } ,
45+ {
46+ title : 'Legacy Availity UI Kit' ,
3647 icon : FaCss3 ,
3748 // linkStyle: 'reactIcon', styles[linkStyle] || styles.featureLink for <a />
38- description : < > Our custom CSS kit that is built on top of Bootstrap 4</ > ,
49+ description : (
50+ < >
51+ Our custom CSS kit that is built on top of Bootstrap 4.{ ' ' }
52+ < Alert severity = "error" > This library will be retired 01/01/26</ Alert >
53+ </ >
54+ ) ,
3955 href : 'https://availity.github.io/availity-uikit' ,
4056 target : '_blank' , // uikit does not link back to docs
4157 } ,
4258] ;
4359
4460function Feature ( { title, description, icon : Icon , href, target } ) {
4561 return (
46- < div className = { clsx ( 'col col--6' , styles . feature ) } >
47- { Icon && (
48- < Link href = { href } target = { target } aria-label = { title } >
49- < div className = "text--center" >
50- < Icon className = { styles . featureImage } alt = { title } />
51- </ div >
52- </ Link >
53- ) }
54- < h3 > { title } </ h3 >
55- < p > { description } </ p >
56- </ div >
62+ < Card sx = { { marginBottom : 2 , marginRight : 2 } } >
63+ < CardActionArea href = { href } target = { target } sx = { { height : '100%' } } >
64+ < CardHeader
65+ title = {
66+ < Grid container alignItems = "center" >
67+ < Icon className = { styles . featureImage } alt = { title } />
68+ < span > { title } </ span >
69+ </ Grid >
70+ }
71+ />
72+ { Icon && < CardContent > { description } </ CardContent > }
73+ </ CardActionArea >
74+ </ Card >
5775 ) ;
5876}
5977
6078function Home ( ) {
6179 const context = useDocusaurusContext ( ) ;
6280 const { siteConfig = { } } = context ;
6381 return (
64- < Layout
65- title = { `${ siteConfig . title } }
66- description = "Homepage for Availity's Workflow, React, SDK-JS, and UI Kit documentation"
67- >
68- < header className = { clsx ( 'hero hero--primary' , styles . heroBanner ) } >
69- < div className = "container" >
70- < h1 className = "hero__title" > { siteConfig . title } </ h1 >
71- < p className = "hero__subtitle" > { siteConfig . tagline } </ p >
72- < div className = { styles . buttons } >
73- < Link
74- className = { clsx ( 'button button--outline button--secondary button--lg' , styles . getStarted ) }
75- href = "https://availity.github.io/availity-workflow"
76- target = "_self"
77- >
78- Get Started
79- </ Link >
80- </ div >
81- </ div >
82- </ header >
83- < main >
84- { features ?. length > 0 && (
85- < section className = { styles . features } >
86- < div className = "container" >
87- < div className = "row" >
82+ < ThemeProvider >
83+ < Layout
84+ title = { `${ siteConfig . title } }
85+ description = "Homepage for Availity's Workflow, React, SDK-JS, and UI Kit documentation"
86+ >
87+ < Container >
88+ < header >
89+ < Typography variant = "h1" marginTop = { 2 } >
90+ { siteConfig . title }
91+ </ Typography >
92+ < Typography variant = "subtitle1" > { siteConfig . tagline } </ Typography >
93+ </ header >
94+ < main >
95+ { features ?. length > 0 && (
96+ < Grid margin = { 2 } container marginTop = { 4 } >
8897 { features . map ( ( props , idx ) => (
8998 < Feature key = { idx } { ...props } />
9099 ) ) }
91- </ div >
92- </ div >
93- </ section >
94- ) }
95- </ main >
96- </ Layout >
100+ </ Grid >
101+ ) }
102+ </ main >
103+ </ Container >
104+ </ Layout >
105+ </ ThemeProvider >
97106 ) ;
98107}
99108
0 commit comments