import React from "react" ; import { Box , CardActionArea , CardActions , CardContent , Container , Divider , Grid , Paper , Theme , Typography } from "@mui/material" ; import createStyles from "@mui/styles/createStyles" ; import makeStyles from "@mui/styles/makeStyles" ; import ArrowForwardIcon from "@mui/icons-material/ArrowForward" ; import PlaylistPlayIcon from "@mui/icons-material/PlaylistPlay" ; import { Link as ReactLink } from "react-router-dom" ; import { computeTopNavigation , TopNavigationEntry } from "../util/navigation_utils" ; import { Markdown } from "../../preview" ; import { useNavigation } from "../../hooks" ; export const useStyles = makeStyles ( ( theme ) => createStyles ( { card : { display : "flex" , flexDirection : "column" , alignItems : "flex-start" , minHeight : 248 } , flexGrow : { flexGrow : 1 } } ) ) ; constructor category export function FireCMSHomePage ( ) { const classes = useStyles ( ) ; const navigationContext = useNavigation ( ) ; if ( ! navigationContext . navigation ) return < > < />; const { navigationEntries , groups } = computeTopNavigation ( navigationContext , true ) ; const allGroups = [ ... groups ] ; if ( navigationEntries . filter ( e => ! e . group ) . length > 0 ) { allGroups . push ( null ) ; } function buildNavigationCard ( entry ) { return ( < Grid item xs = { 12 } sm = { 6 } md = { 4 } key = { `nav_${ entry . group }_${ entry . name }` } > < Paper variant = { "outlined" } > < CardActionArea className = { classes . card } component = { ReactLink } to = { entry . url } > < CardContent className = { classes . flexGrow } > < PlaylistPlayIcon color = { "disabled" } /> < Typography gutterBottom variant = "h5" component = "h2" > { entry . name } < /Typography> { entry . description && < Typography variant = "body2" color = "textSecondary" component = "div" > < Markdown source = { entry . description } /> < /Typography>} < /CardContent> < CardActions style = { { alignSelf : "flex-end" } } > < Box p = { 1 } > < ArrowForwardIcon color = "primary" / > < /Box> < /CardActions> < /CardActionArea> < /Paper> < /Grid>); } return ( < Container > { allGroups . map ( ( group , index ) => ( < Box mt = { 6 } mb = { 6 } key = { `group_${ index }` } > { allGroups . length > 0 && < > < Typography color = { "textSecondary" } className = { "weight-500" } > { group ?. toUpperCase ( ) ?? "Collections" . toUpperCase ( ) } < /Typography> < Divider / > < />} < Box mt = { 2 } > < Grid container spacing = { 2 } > { group && navigationEntries . filter ( ( entry ) => entry . group === group ) . map ( ( entry ) => buildNavigationCard ( entry ) ) } { ! group && navigationEntries . filter ( ( entry ) => ! entry . group ) . map ( ( entry ) => buildNavigationCard ( entry ) ) } < /Grid> < /Box> < /Box>))} < /Container>); }