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(() =>
paddingRight: 0,
border: '2px #DCDFE5 solid',
borderRadius: borderRadiusSize,
maxWidth: '100%',
},
faqIcon: {
position: 'absolute',
......@@ -99,8 +100,8 @@ export default function DashboardFAQs() {
const renderFAQs = faqItems.map((item, index) => (
<List className={classes.faqItemCtn} key={index}>
<ListItem className={classes.faqQuestion}>
<ListItemText primary={item.question} onClick={() => handleClick(index)} />
<ListItem className={classes.faqQuestion} onClick={() => handleClick(index)}>
<ListItemText primary={item.question} />
<ListItemIcon className={classes.faqExpandIcon}>
{shouldCollapse[index] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</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 PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import DescriptionIcon from '@material-ui/icons/Description';
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import { brightBlue, brightOrange, darkGray, darkOrange, iconGray } from '../../../Constants/Constants';
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
const useStyles = makeStyles(() =>
createStyles({
main: { padding: '90px 0 0' },
overviewCtn: {
display: 'flex',
marginTop: 40,
padding: 0,
justifyContent: 'space-between',
},
overviewCard: {
width: '22%',
minWidth: 220,
margin: '25px 10px 20px 10px',
height: 90,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
......@@ -106,7 +101,7 @@ export default function DashboardOverview() {
];
const renderOverviewItems = overviewItemData.map((item) => (
<Card className={classes.overviewCard}>
<Card key={item.title} className={classes.overviewCard}>
<Link className={classes.overviewAnchor} href={item.href}>
{item.icon}
<Typography className={classes.overviewTitle} component="h6" variant="h6">
......@@ -117,9 +112,8 @@ export default function DashboardOverview() {
));
return (
<Container className={classes.main}>
<Typography variant="h4">Overview</Typography>
<Container className={classes.overviewCtn}>{renderOverviewItems}</Container>
</Container>
<SectionCtn title="Overview" id="overview">
{renderOverviewItems}
</SectionCtn>
);
}
import { Typography } from '@material-ui/core';
export default function DashboardProjectsAndWG() {
return (
<div
style={{
paddingTop: 90,
}}
id="projects-wg"
>
<Typography variant="h4">Projects and Working Groups</Typography>
import { CircularProgress } from '@material-ui/core';
import { darkOrange } from '../../../Constants/Constants';
import CustomCard from '../../UIComponents/CustomCard/CustomCard';
import { useEffect } from 'react';
import { useState } from 'react';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
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
}
<div
style={{
display: 'flex',
marginTop: 40,
justifyContent: 'space-between',
}}
>
<div
style={{
width: '22%',
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>
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
],
},
{
subtitle: 'Working Groups You Might be Interested in',
listItems: [
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
{
name: '- Lorem Ipsum',
url: '#',
},
],
},
];
<div
style={{
width: '22%',
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>
interface ProjectsAndWG {
subtitle: string;
listItems: Array<{
name: string;
url: string;
}>;
}
<div
style={{
width: '22%',
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>
export default function DashboardProjectsAndWG() {
const [projectsAndWGData, setProjectsAndWG] = useState<Array<ProjectsAndWG>>([]);
useEffect(() => {
// To do
// Add fetch here
setProjectsAndWG(projectsAndWGDemoData);
}, []);
<div
style={{
width: '22%',
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>
</div>
const renderResourcesItems = projectsAndWGData.map((item, index) => (
<CustomCard
key={item.subtitle + index}
subtitle={item.subtitle}
color={darkOrange}
icon={<BusinessCenterIcon />}
listItems={item.listItems}
/>
));
return (
<SectionCtn title="Projects and Working Groups" id="projects-wg">
{projectsAndWGData.length > 0 ? renderResourcesItems : <CircularProgress />}
</SectionCtn>
);
}
import { Typography } from '@material-ui/core';
export default function DashboardResources() {
return (
<div
style={{
paddingTop: 90,
}}
id="resources"
>
<Typography variant="h4">Resources</Typography>
import { CircularProgress } from '@material-ui/core';
import { brightOrange } from '../../../Constants/Constants';
import DescriptionIcon from '@material-ui/icons/Description';
import CustomCard from '../../UIComponents/CustomCard/CustomCard';
import { useEffect } from 'react';
import { useState } from 'react';
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
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
style={{
display: 'flex',
marginTop: 40,
justifyContent: 'space-between',
}}
>
<div
style={{
width: '22%',
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>
interface ResourcesData {
subtitle: string;
listItems: Array<{
name: string;
url: string;
}>;
}
export default function DashboardResources() {
const [resourcesData, setResourcesData] = useState<Array<ResourcesData>>([]);
<div
style={{
width: '22%',
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>
useEffect(() => {
// To do
// Add fetch here
setResourcesData(resourcesDemoData);
}, []);
<div
style={{
width: '22%',
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>
const renderResourcesItems = resourcesData.map((item, index) => (
<CustomCard
key={item.subtitle + index}
subtitle={item.subtitle}
color={brightOrange}
icon={<DescriptionIcon />}
listItems={item.listItems}
/>
));
<div
style={{
width: '22%',
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>
</div>
return (
<SectionCtn title="Resources" id="resources">
{resourcesData.length > 0 ? renderResourcesItems : <CircularProgress />}
</SectionCtn>
);
}
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;
}
export default function SectionCtn(props: SectionCtnProps) {
const classes = useStyles();
return (
<Container className={classes.main} id={props.id}>
<Typography variant="h4">{props.title}</Typography>
<Container className={classes.projectAndWGCtn}>{props.children}</Container>
</Container>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment