Unverified Commit 4c493ace authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

Portal-Added resources and projectsAndWG sections (#230)

parent f2c2f4f6
...@@ -48,6 +48,7 @@ const useStyles = makeStyles(() => ...@@ -48,6 +48,7 @@ const useStyles = makeStyles(() =>
paddingRight: 0, paddingRight: 0,
border: '2px #DCDFE5 solid', border: '2px #DCDFE5 solid',
borderRadius: borderRadiusSize, borderRadius: borderRadiusSize,
maxWidth: '100%',
}, },
faqIcon: { faqIcon: {
position: 'absolute', position: 'absolute',
...@@ -99,8 +100,8 @@ export default function DashboardFAQs() { ...@@ -99,8 +100,8 @@ export default function DashboardFAQs() {
const renderFAQs = faqItems.map((item, index) => ( const renderFAQs = faqItems.map((item, index) => (
<List className={classes.faqItemCtn} key={index}> <List className={classes.faqItemCtn} key={index}>
<ListItem className={classes.faqQuestion}> <ListItem className={classes.faqQuestion} onClick={() => handleClick(index)}>
<ListItemText primary={item.question} onClick={() => handleClick(index)} /> <ListItemText primary={item.question} />
<ListItemIcon className={classes.faqExpandIcon}> <ListItemIcon className={classes.faqExpandIcon}>
{shouldCollapse[index] ? <ExpandLessIcon /> : <ExpandMoreIcon />} {shouldCollapse[index] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItemIcon> </ListItemIcon>
......
import { createStyles, makeStyles, Card, Container, Typography, Link } from '@material-ui/core'; import { createStyles, makeStyles, Card, Typography, Link } from '@material-ui/core';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter'; import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt'; import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import DescriptionIcon from '@material-ui/icons/Description'; import DescriptionIcon from '@material-ui/icons/Description';
import ContactSupportIcon from '@material-ui/icons/ContactSupport'; import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import { brightBlue, brightOrange, darkGray, darkOrange, iconGray } from '../../../Constants/Constants'; import { brightBlue, brightOrange, darkGray, darkOrange, iconGray } from '../../../Constants/Constants';
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
const useStyles = makeStyles(() => const useStyles = makeStyles(() =>
createStyles({ createStyles({
main: { padding: '90px 0 0' },
overviewCtn: {
display: 'flex',
marginTop: 40,
padding: 0,
justifyContent: 'space-between',
},
overviewCard: { overviewCard: {
width: '22%', width: '22%',
minWidth: 220,
margin: '25px 10px 20px 10px',
height: 90, height: 90,
backgroundColor: '#fff', backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
...@@ -106,7 +101,7 @@ export default function DashboardOverview() { ...@@ -106,7 +101,7 @@ export default function DashboardOverview() {
]; ];
const renderOverviewItems = overviewItemData.map((item) => ( const renderOverviewItems = overviewItemData.map((item) => (
<Card className={classes.overviewCard}> <Card key={item.title} className={classes.overviewCard}>
<Link className={classes.overviewAnchor} href={item.href}> <Link className={classes.overviewAnchor} href={item.href}>
{item.icon} {item.icon}
<Typography className={classes.overviewTitle} component="h6" variant="h6"> <Typography className={classes.overviewTitle} component="h6" variant="h6">
...@@ -117,9 +112,8 @@ export default function DashboardOverview() { ...@@ -117,9 +112,8 @@ export default function DashboardOverview() {
)); ));
return ( return (
<Container className={classes.main}> <SectionCtn title="Overview" id="overview">
<Typography variant="h4">Overview</Typography> {renderOverviewItems}
<Container className={classes.overviewCtn}>{renderOverviewItems}</Container> </SectionCtn>
</Container>
); );
} }
import { Typography } from '@material-ui/core'; import { CircularProgress } from '@material-ui/core';
import { darkOrange } from '../../../Constants/Constants';
export default function DashboardProjectsAndWG() { import CustomCard from '../../UIComponents/CustomCard/CustomCard';
return ( import { useEffect } from 'react';
<div import { useState } from 'react';
style={{ import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
paddingTop: 90, import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
}}
id="projects-wg"
>
<Typography variant="h4">Projects and Working Groups</Typography>
const projectsAndWGDemoData = [
{
subtitle: 'Your Projects',
listItems: [
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
],
},
{
subtitle: 'Your Working Groups',
listItems: [
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
],
},
{
subtitle: 'Projects You May be Interested in',
listItems: [
{
name: '- Lorem Ipsum',
url: '#',
},
{ {
// below are placeholders name: '- Lorem Ipsum',
} url: '#',
<div },
style={{ {
display: 'flex', name: '- Lorem Ipsum',
marginTop: 40, url: '#',
justifyContent: 'space-between', },
}} ],
> },
<div {
style={{ subtitle: 'Working Groups You Might be Interested in',
width: '22%', listItems: [
height: 180, {
backgroundColor: '#fff', name: '- Lorem Ipsum',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', url: '#',
display: 'flex', },
justifyContent: 'center', {
alignItems: 'center', name: '- Lorem Ipsum',
}} url: '#',
> },
<h5>Lorem Ipsum</h5> {
</div> name: '- Lorem Ipsum',
url: '#',
},
],
},
];
<div interface ProjectsAndWG {
style={{ subtitle: string;
width: '22%', listItems: Array<{
height: 180, name: string;
backgroundColor: '#fff', url: string;
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', }>;
display: 'flex', }
justifyContent: 'center',
alignItems: 'center',
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div export default function DashboardProjectsAndWG() {
style={{ const [projectsAndWGData, setProjectsAndWG] = useState<Array<ProjectsAndWG>>([]);
width: '22%',
height: 180, useEffect(() => {
backgroundColor: '#fff', // To do
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', // Add fetch here
display: 'flex', setProjectsAndWG(projectsAndWGDemoData);
justifyContent: 'center', }, []);
alignItems: 'center',
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div const renderResourcesItems = projectsAndWGData.map((item, index) => (
style={{ <CustomCard
width: '22%', key={item.subtitle + index}
height: 180, subtitle={item.subtitle}
backgroundColor: '#fff', color={darkOrange}
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', icon={<BusinessCenterIcon />}
display: 'flex', listItems={item.listItems}
justifyContent: 'center', />
alignItems: 'center', ));
}}
> return (
<h5>Lorem Ipsum</h5> <SectionCtn title="Projects and Working Groups" id="projects-wg">
</div> {projectsAndWGData.length > 0 ? renderResourcesItems : <CircularProgress />}
</div> </SectionCtn>
</div>
); );
} }
import { Typography } from '@material-ui/core'; import { CircularProgress } from '@material-ui/core';
import { brightOrange } from '../../../Constants/Constants';
export default function DashboardResources() { import DescriptionIcon from '@material-ui/icons/Description';
return ( import CustomCard from '../../UIComponents/CustomCard/CustomCard';
<div import { useEffect } from 'react';
style={{ import { useState } from 'react';
paddingTop: 90, import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
}}
id="resources"
>
<Typography variant="h4">Resources</Typography>
const resourcesDemoData = [
{
subtitle: 'Social Kits',
listItems: [
{
name: '- Eclipse Ditto Whitepaper',
url: '#',
},
{
name: '- Eclipse Hono Case Study',
url: '#',
},
{
name: '- Eclipse Hawkbit',
url: '#',
},
],
},
{
subtitle: 'Web Images',
listItems: [
{
name: '- Eclipse IoT',
url: '#',
},
{
name: '- Edge Native Working Group',
url: '#',
},
{
name: '- Sparkplug',
url: '#',
},
],
},
{
subtitle: 'Lorem Ipsum',
listItems: [
{ {
// below are placeholders name: '- Lorem Ipsum',
} url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
],
},
{
subtitle: 'Lorem Ipsum',
listItems: [
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
],
},
];
<div interface ResourcesData {
style={{ subtitle: string;
display: 'flex', listItems: Array<{
marginTop: 40, name: string;
justifyContent: 'space-between', url: string;
}} }>;
> }
<div
style={{ export default function DashboardResources() {
width: '22%', const [resourcesData, setResourcesData] = useState<Array<ResourcesData>>([]);
height: 180,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div useEffect(() => {
style={{ // To do
width: '22%', // Add fetch here
height: 180, setResourcesData(resourcesDemoData);
backgroundColor: '#fff', }, []);
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div const renderResourcesItems = resourcesData.map((item, index) => (
style={{ <CustomCard
width: '22%', key={item.subtitle + index}
height: 180, subtitle={item.subtitle}
backgroundColor: '#fff', color={brightOrange}
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', icon={<DescriptionIcon />}
display: 'flex', listItems={item.listItems}
justifyContent: 'center', />
alignItems: 'center', ));
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div return (
style={{ <SectionCtn title="Resources" id="resources">
width: '22%', {resourcesData.length > 0 ? renderResourcesItems : <CircularProgress />}
height: 180, </SectionCtn>
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<h5>Lorem Ipsum</h5>
</div>
</div>
</div>
); );
} }
import {
createStyles,
makeStyles,
Container,
List,
Typography,
ListItemProps,
ListItem,
ListItemText,
} from '@material-ui/core';
import { darkGray, iconGray } from '../../../Constants/Constants';
const useStyles = makeStyles(() =>
createStyles({
resourcesCard: {
margin: '25px 10px 20px 10px',
padding: 0,
position: 'relative',
width: '22%',
minWidth: 220,
height: 200,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
borderRadius: 4,
},
resourcesIconCtn: {
position: 'absolute',
top: -27,
left: 14,
width: 54,
height: 54,
padding: 0,
'& svg': {
color: iconGray,
width: '100%',
height: '100%',
paddingBottom: 2,
// borderBottom: `4px solid ${brightOrange}`,
},
},
resourcesContent: {
margin: '30px 15px 25px 60px',
width: 'calc(100% - 60px)',
},
resourcesSubtitle: {
fontWeight: 600,
color: darkGray,
},
resourcesItem: {
padding: 0,
},
})
);
const ListItemLink = (props: ListItemProps<'a', { button?: true }>) => {
return <ListItem button component="a" {...props} />;
};
interface CustomCardProps {
subtitle: string;
color: string;
icon: any;
listItems: Array<{
name: string;
url: string;
}>;
}
export default function CustomCard(props: CustomCardProps) {
const classes = useStyles();
return (
<Container className={classes.resourcesCard}>
<Container className={classes.resourcesIconCtn} style={{ borderBottom: `4px solid ${props.color}` }}>
{props.icon}
</Container>
<Container className={classes.resourcesContent}>
<Typography variant="subtitle1" className={classes.resourcesSubtitle}>
{props.subtitle}
</Typography>
<List aria-label="resources list">
{props.listItems.map((listItem, index) => (
<ListItemLink key={listItem.name + index} className={classes.resourcesItem} href={listItem.url}>
<ListItemText primary={listItem.name} />
</ListItemLink>
))}
</List>
</Container>
</Container>
);
}
import { Typography, createStyles, makeStyles, Container } from '@material-ui/core';
const useStyles = makeStyles(() =>
createStyles({
main: { padding: '90px 0 0', margin: 0, maxWidth: '100%' },
projectAndWGCtn: {
maxWidth: '100%',
display: 'flex',
flexWrap: 'wrap',
marginTop: 40,
padding: 0,
justifyContent: 'space-between',
},
})
);
interface SectionCtnProps {
id: string;
title: string;
children: any;
}