Skip to content

Commit

Permalink
Merge pull request #13 from AirWalk-Digital/feature-refactor
Browse files Browse the repository at this point in the history 
Feature refactor
  • Loading branch information
@PAYNEA03
PAYNEA03 authored Jan 8, 2024
2 parents 3352fbc + de337bf commit 7d53f3e
Show file tree
Hide file tree
Showing 24 changed files with 1,600 additions and 444 deletions.
4 changes: 0 additions & 4 deletions .babelrc.old
View file

This file was deleted.

6 changes: 6 additions & 0 deletions cache/config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"telemetry": {
"notifiedAt": "1704571575835",
"enabled": false
}
}
221 changes: 148 additions & 73 deletions components/buttons/Tiles.js
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,148 @@
import { Box, Typography, Stack, Chip, Link, Grid, Card } from '@mui/material';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import { CardActionArea } from '@mui/material';
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import Chip from "@mui/material/Chip";
import Link from "@mui/material/Link";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import CardActionArea from "@mui/material/CardActionArea";

export function Tile({ name, url, image, description='', isHero=false }) {
export function Tile({ name, url, image, description = "", isHero = false }) {
return (
<Grid item xs={12} sm={6} md={4} lg={3} sx={{ mb: '20px', display: 'flex' }}>
<Link href={url} underline="none" sx={{ width: '100%' }}>
<Card variant="outlined" sx={{ minHeight: 120, maxWidth: 345, bgcolor: image ? 'background.paper' : 'background.primary' }} >
<CardActionArea>
{ image && <div style={{height:"194px"}}><CardMedia
component="img"
// height="140px"
image={image}
alt=""
<Grid item xs={12} sm={4} md={3} minHeight={300} maxWidth={300}>
{/* // <div style={{ flexBasis: "100%", maxWidth: "100%", padding: "8px" }}> */}
{/* sx={{ mb: '20px', display: 'flex', flex: 1 }}> */}
<Link
href={url}
underline="none"
sx={{
width: "100%",
color: "inherit",
"&:visited": {
color: "inherit",
},
}}
>
<Card
variant="outlined"
sx={{
height: '100%',
px: isHero ? 0 : 1,
// width: isHero ? '100%' : 'unset', // Adjust width based on background
maxWidth: '100%',
objectFit: isHero ? 'cover' : 'contain' , // Use 'contain' for white background
minHeight: 120,
height: "100%",
bgcolor: image ? "background.paper" : "background.primary",
}}
>
<CardActionArea>
{image && (
<div style={{ height: "194px" }}>
<CardMedia
component="img"
// height="140px"
image={image}
alt=""
sx={{
height: "100%",
px: isHero ? 0 : 1,
py: isHero ? 0 : 2,
// width: isHero ? '100%' : 'unset', // Adjust width based on background
maxWidth: "100%",
objectFit: isHero ? "cover" : "contain", // Use 'contain' for white background
}}
/>
</div>
)}
<CardContent
sx={{
mt: isHero ? 0 : 1,
bgcolor: isHero ? "background.paper" : "background.primary",
}}
/></div>}
<CardContent sx={{ mt: isHero ? 0 : 1, bgcolor: isHero ? 'background.paper' : 'background.primary'}}>
<Typography gutterBottom variant="h5" component="div" sx={{ textAlign: 'center', wordWrap: 'break-word' }} color={(image && isHero) ? 'text.primary' :'text.invtext'}>
{name}
</Typography>
<Typography variant="body2" color={(image && isHero) ? 'text.primary' :'text.invtext'} >
{description}
</Typography>
</CardContent>
</CardActionArea>
</Card>
>
<Typography
gutterBottom
variant="h5"
component="div"
sx={{ textAlign: "center", wordWrap: "break-word" }}
color={image && isHero ? "text.primary" : "text.invtext"}
>
{name}
</Typography>
<Typography
variant="body2"
color={image && isHero ? "text.primary" : "text.invtext"}
>
{description}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Link>
</Grid>
);
}

export function Tile22({ name, url, image, description = "", isHero = false }) {
return (
<Grid
item
xs={12}
// sm={6}
// md={4}
// lg={3}
// sx={{ mb: "20px", display: "flex" }}
>
<h1>{name}</h1>
</Grid>
);



export function TileOld({ name, url, image }) {
return (
<Grid item xs={12} sm={6} md={4} lg={3} sx={{ mb: '20px', display: 'flex' }}>
<Link href={url} underline="none" sx={{ width: '100%' }}>
<Grid
item
xs={12}
sm={6}
md={4}
lg={3}
sx={{ mb: "20px", display: "flex" }}
>
<Link href={url} underline="none" sx={{ width: "100%" }}>
<Box
sx={{
position: 'relative',
bgcolor: image ? 'background.paper' : 'background.primary',
position: "relative",
bgcolor: image ? "background.paper" : "background.primary",
boxShadow: 0,
borderColor: 'primary.main',
borderColor: "primary.main",
border: 1,
borderRadius: 2,
p: 2,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%'
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
}}
>
{image && (
<Box
component="img"
src={image}
alt=''
alt=""
sx={{
maxHeight: '140px',
maxWidth: '100%',
objectFit: 'contain',
maxHeight: "140px",
maxWidth: "100%",
objectFit: "contain",
mb: 1,
}}
/>
)}
<Typography variant="h5" sx={{ mt: 2, color: image ? 'text.primary' :'white', textAlign: 'center', wordWrap: 'break-word' }}>
<Typography
variant="h5"
sx={{
mt: 2,
color: image ? "text.primary" : "white",
textAlign: "center",
wordWrap: "break-word",
}}
>
{name}
</Typography>
</Box>
Expand All @@ -83,32 +152,38 @@ export function TileOld({ name, url, image }) {
}

export function ServiceTile({ frontmatter, file }) {

return (
<Grid item xs={3} md={3} sx={{ mb: '20px' }}>
<Link href={file.replace("/index.mdx", "")} underline="none"><Box
sx={{
bgcolor: 'background.paper',
boxShadow: 0,
borderColor: 'primary', //icon.color,
border: 1,
borderRadius: 2,
p: 2,
height: '100%'
// minWidth: 300,
}}
>
<Box sx={{ color: 'text.primary', fontSize: 18, fontWeight: '400' }}>
{frontmatter.title}
</Box>
<Box sx={{ color: 'text.primary', fontSize: 14, fontWeight: 'light' }}>
{frontmatter.description}
<Grid item xs={3} md={3} sx={{ mb: "20px" }}>
<Link href={file.replace("/index.mdx", "")} underline="none">
<Box
sx={{
bgcolor: "background.paper",
boxShadow: 0,
borderColor: "primary", //icon.color,
border: 1,
borderRadius: 2,
p: 2,
height: "100%",
// minWidth: 300,
}}
>
<Box sx={{ color: "text.primary", fontSize: 18, fontWeight: "400" }}>
{frontmatter.title}
</Box>
<Box
sx={{ color: "text.primary", fontSize: 14, fontWeight: "light" }}
>
{frontmatter.description}
</Box>
<Stack direction="row" spacing={1} sx={{ pt: "2%" }}>
{frontmatter.status === "approved" ? (
<Chip label="Approved for use" color="success" />
) : (
<Chip label="Unapproved" color="error" />
)}
</Stack>
</Box>
<Stack direction="row" spacing={1} sx={{ pt: '2%' }}>
{frontmatter.status === 'approved' ? <Chip label="Approved for use" color="success" /> : <Chip label="Unapproved" color="error" />}
</Stack>
</Box>
</Link>
</Grid>
)
}
);
}
20 changes: 8 additions & 12 deletions components/compliance/MiniStatisticsCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// @mui material components
import Card from "@mui/material/Card";
// import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
// import Icon from "@mui/material/Icon";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import Typography from "@mui/material/Typography";
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export function MiniStatisticsCard({
bgColor,
Expand All @@ -21,6 +21,8 @@ export function MiniStatisticsCard({
const darkMode = false;
const iconcolor = icon.color + ".main";

const Icon = icon.icon

return (
<Box
sx={{
Expand All @@ -46,10 +48,7 @@ export function MiniStatisticsCard({
alignItems="center"
>
{/* <Icon fontSize="small" color="inherit"> */}
<FontAwesomeIcon
icon={["fas", "fa-" + icon.icon]}
style={{ width: "40px", height: "40px" }}
/>
<Icon style={{ width: "40px", height: "40px" }}/>
{/* </Icon> */}
</Box>
</Grid>
Expand Down Expand Up @@ -93,10 +92,7 @@ export function MiniStatisticsCard({
alignItems="center"
>
{/* <Icon fontSize="small" color="inherit"> */}
<FontAwesomeIcon
icon={["fas", "fa-" + icon.icon]}
style={{ color: icon.color, width: "40px", height: "40px" }}
/>
<Icon style={{ width: "40px", height: "40px" }}/>
{/* </Icon> */}
</Box>
</Grid>
Expand Down
Loading

0 comments on commit 7d53f3e

Please sign in to comment.