components#ItemGrid JavaScript Examples
The following examples show how to use
components#ItemGrid.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: icopublish.jsx From crypto-manager with MIT License | 6 votes |
|
function icoPublished({ ...props }) {
return (
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<RegularCard
cardTitle="All ICO's Table"
// cardSubtitle="Here is a subtitle for this table"
content={
<Table
tableHeaderColor="primary"
// tableHead={["Name", "ETA", "TEAM", "CONCEPT", "WHITE", "SOCIAL"]}
tableData={[
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
// ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
// ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"],
// ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"],
// ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"],
// ["Mason Porter", "Chile", "Gloucester", "$78,615"]
]}
/>
}
/>
</ItemGrid>
</Grid>
);
}
Example #2
| Source File: Icons.jsx From crypto-manager with MIT License | 5 votes |
|
function Icons({ ...props }) {
return (
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<RegularCard
plainCard
cardTitle="Material Design Icons"
cardSubtitle={
<P>
Handcrafted by our friends from{" "}
<A
href="https://design.google.com/icons/"
target="_blank"
rel="noopener noreferrer"
>
Google
</A>
</P>
}
content={
<div>
<Hidden only={["sm", "xs"]}>
<iframe
className={props.classes.iframe}
src="https://material.io/icons/"
title="Icons iframe"
>
<p>Your browser does not support iframes.</p>
</iframe>
</Hidden>
<Hidden only={["lg", "md"]}>
<ItemGrid xs={12} sm={12} md={6}>
<h5>
The icons are visible on Desktop mode inside an iframe.
Since the iframe is not working on Mobile and Tablets please
visit the icons on their original page on Google. Check the
<a
href="https://design.google.com/icons/"
target="_blank"
rel="noopener noreferrer"
>
Material Icons
</a>
</h5>
</ItemGrid>
</Hidden>
</div>
}
/>
</ItemGrid>
</Grid>
);
}
Example #3
| Source File: icotablelist.jsx From crypto-manager with MIT License | 5 votes |
|
function icoTableList({ ...props }) {
return (
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<RegularCard
cardTitle="All ICO's Table"
// cardSubtitle="Here is a subtitle for this table"
content={
<Table
tableHeaderColor="primary"
// tableHead={["Name", "ETA", "TEAM", "CONCEPT", "WHITE", "SOCIAL"]}
tableData={[
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
// ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738","Dakota Rice", "Niger", "Oud-Turnhout", "$36,738", "$36,738"],
// ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"],
// ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"],
// ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"],
// ["Mason Porter", "Chile", "Gloucester", "$78,615"]
]}
/>
}
/>
</ItemGrid>
{/* <ItemGrid xs={12} sm={12} md={12}>
<RegularCard
cardTitle="UPCOMING Table"
// cardSubtitle="Here is a subtitle for this table"
content={
<Table
tableHeaderColor="primary"
// tableHead={["Name", "ETA", "OVERALL", "SOCIAL"]}
tableData={[
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738",],
]}
/>
}
/>
</ItemGrid> */}
</Grid>
);
}
Example #4
| Source File: Dashboard.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
return (
<div>
{/* TODO: Make chart position static w.r.t other components */}
<Card className="doughnutCard">
<CardContent>
<Typography variant="title" component="h1">
Portfolio
</Typography>
</CardContent>
<Grid container>
{/* Left Side */}
<ItemGrid xs={12} sm={6}>
<div className="doughnutChart">
<DoughnutChart />
</div>
</ItemGrid>
{/* Right Side */}
<ItemGrid xs={12} sm={6}>
<div className="dataOverview">
<Grid container>
{/* Overall score */}
<Grid container item xs={12} className="avgScoreGrid">
<div className="avgScore">
<div>
Avgerage Sentiment:
</div>
<div className={this.state.sentiment === "Bearish" ? "bearishScore" : "bullishScore"}>
{this.state.sentiment}
</div>
</div>
</Grid>
{/* Technical Analysis */}
<Grid container item xs={12}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={emailsSubscriptionChart.data}
type="Bar"
options={emailsSubscriptionChart.options}
responsiveOptions={emailsSubscriptionChart.responsiveOptions}
listener={emailsSubscriptionChart.animation}
/>
}
chartColor="orange"
title="Sentiment Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
{/* Sentimental Analysis */}
<Grid container item xs={12}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={completedTasksChart.data}
type="Line"
options={completedTasksChart.options}
listener={completedTasksChart.animation}
/>
}
chartColor="red"
title="Technical Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
</Grid>
</div>
</ItemGrid>
</Grid>
</Card>
<Grid container>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={ContentCopy}
iconColor="orange"
title="Crypto Currencies"
description="1600/2000"
// small="GB"
statIcon={LocalOffer}
statText="Tracked from Coindesk"
// statIconColor="danger"
// statLink={{ text: "Get More Space...", href: "#pablo" }}
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={Store}
iconColor="green"
title="Active ICO's"
description="3"
statIcon={DateRange}
statText="Last 24 Hours"
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={Store}
iconColor="blue"
title="Upcoming ICO's"
description="5"
statIcon={DateRange}
statText="Last 24 Hours"
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={Store}
iconColor="red"
title="Ended ICO's"
description="14"
statIcon={DateRange}
statText="Last 24 Hours"
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={InfoOutline}
iconColor="red"
title="Current P/L"
description="+$7.5K"
statIcon={LocalOffer}
statText="Tracked from Wallet"
/>
</ItemGrid>
</Grid>
{/* <Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={dailySalesChart.data}
type="Line"
options={dailySalesChart.options}
listener={dailySalesChart.animation}
/>
}
chartColor="green"
title="Live Chart"
text={
<span>
<span className={this.props.classes.successText}>
<ArrowUpward
className={this.props.classes.upArrowCardCategory}
/>{" "}
55%
</span>{" "}
increase in crypto value.
</span>
}
statIcon={AccessTime}
statText="Updated 4 minutes ago"
/>
</ItemGrid>
</Grid> */}
</div>
);
}
Example #5
| Source File: Notifications.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
return (
<RegularCard
cardTitle="Notifications"
cardSubtitle={
<P>
Handcrafted by our friends from{" "}
<A target="_blank" href="https://material-ui-next.com/">
Material UI
</A>{" "}
and styled by{" "}
<A target="_blank" href="https://www.creative-tim.com/">
Creative Tim
</A>. Please checkout the{" "}
<A href="#pablo" target="_blank">
full documentation
</A>.
</P>
}
content={
<div>
<Grid container>
<ItemGrid xs={12} sm={12} md={6}>
<h5>Notifications Style</h5>
<br />
<SnackbarContent message={"This is a plain notification"} />
<br />
<SnackbarContent
message={"This is a notification with close button."}
close
/>
<br />
<SnackbarContent
message={"This is a notification with close button and icon."}
close
icon={AddAlert}
/>
<br />
<SnackbarContent
message={
"This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style."
}
close
icon={AddAlert}
/>
<br />
</ItemGrid>
<ItemGrid xs={12} sm={12} md={6}>
<h5>Notifications States</h5>
<br />
<SnackbarContent
message={
'INFO - This is a regular notification made with color="info"'
}
close
color="info"
/>
<br />
<SnackbarContent
message={
'SUCCESS - This is a regular notification made with color="success"'
}
close
color="success"
/>
<br />
<SnackbarContent
message={
'WARNING - This is a regular notification made with color="warning"'
}
close
color="warning"
/>
<br />
<SnackbarContent
message={
'DANGER - This is a regular notification made with color="danger"'
}
close
color="danger"
/>
<br />
<SnackbarContent
message={
'PRIMARY - This is a regular notification made with color="primary"'
}
close
color="primary"
/>
<br />
</ItemGrid>
</Grid>
<br />
<br />
<Grid container justify="center">
<ItemGrid xs={12} sm={12} md={6} style={{ textAlign: "center" }}>
<h5>
Notifications Places
<Small>Click to view notifications</Small>
</h5>
</ItemGrid>
</Grid>
<Grid container justify="center">
<ItemGrid xs={12} sm={12} md={10} lg={8}>
<Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("tl")}
>
Top Left
</Button>
<Snackbar
place="tl"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.tl}
closeNotification={() => this.setState({ tl: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("tc")}
>
Top Center
</Button>
<Snackbar
place="tc"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.tc}
closeNotification={() => this.setState({ tc: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("tr")}
>
Top Right
</Button>
<Snackbar
place="tr"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.tr}
closeNotification={() => this.setState({ tr: false })}
close
/>
</ItemGrid>
</Grid>
</ItemGrid>
</Grid>
<Grid container justify={"center"}>
<ItemGrid xs={12} sm={12} md={10} lg={8}>
<Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("bl")}
>
Bottom Left
</Button>
<Snackbar
place="bl"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.bl}
closeNotification={() => this.setState({ bl: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("bc")}
>
Bottom Center
</Button>
<Snackbar
place="bc"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.bc}
closeNotification={() => this.setState({ bc: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("br")}
>
Bottom Right
</Button>
<Snackbar
place="br"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.br}
closeNotification={() => this.setState({ br: false })}
close
/>
</ItemGrid>
</Grid>
</ItemGrid>
</Grid>
</div>
}
/>
);
}
Example #6
| Source File: Recommendations.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
const { shouldOpen, value, suggestions, sentiment, currName, currTick, close, open, high, low, newsAvailable } = this.state;
const inputProps = {
placeholder: "Search",
value,
onChange: this.onChange,
// TODO: Need to figure out responsive width of search bar
style: { width: '400%',
height: '200%',
minWidth: '100%'}
};
return (
<div className="local-bootstrap">
<Card>
<div className="mainRecommendationsContainer">
<CardContent>
<Typography variant="h1" component="h1">Investment Recommendations</Typography>
</CardContent>
<CardContent>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">Load Quote</span>
</div>
<div aria-describedby="basic-addon1">
<div className="recommendationsSearchBar">
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps}
wrapperStyle={{ width: 1000}} />
</div>
</div>
</div>
</CardContent>
{
shouldOpen ?
<div>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={6} md={6}>
<Typography variant="h3" component="h3">Latest Quote</Typography>
<Card>
<div className="latestQuoteCard">
<CardContent>
<div className="recommendationHeader">
<Typography variant="h3" component="h3" style={{
fontWeight: 800,
color: '#000000'
}}>
{currTick + ": "}
</Typography>
<div className="cryptoName">
<Typography variant="h3" component="h3" style={{
fontWeight: 800,
color: '#000000'
}}>
{currName}
</Typography>
</div>
</div>
</CardContent>
<CardContent>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
Close:
</Typography>
<div className="cryptoName1">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{close}
</Typography>
</div>
</div>
</div>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
Open:
</Typography>
<div className="cryptoName2">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{open}
</Typography>
</div>
</div>
</div>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
High:
</Typography>
<div className="cryptoName3">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{high}
</Typography>
</div>
</div>
</div>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
Low:
</Typography>
<div className="cryptoName4">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{low}
</Typography>
</div>
</div>
</div>
</CardContent>
</div>
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#0080FF",
padding: "15px 30px",
fontSize: "18px",
color: '#ffffff',
width: '90%',
margin: '20px'
}}
>
Show Previous Quotes
</Button>
</Card>
{/* News */}
<div className="newsHeader">
<Typography variant="h3" component="h3" style={{
marginBottom: '20px'
}}>Latest News</Typography>
</div>
<Card>
{
newsAvailable ?
<div className="mainRecommendationsContainer">
<div>
{
this.state.rows.map(row => (
<div>
<Typography variant="h3" component="h3" style={{
marginTop: '10px'
}}>{row.title}</Typography>
<Typography variant="h6" component="h6" style={{
marginTop: '20px',
textTransform: 'capitalize'
}}>{row.desc}</Typography>
<a href={"https://" + row.link}>{row.link}</a>
<Typography style={{
marginBottom: 40
}}></Typography>
</div>
))
}
</div>
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#0080FF",
padding: "15px 30px",
fontSize: "18px",
color: '#ffffff',
width: '90%',
margin: '20px'
}}
>
Show All
</Button>
</div>
:
<Typography variant="h4" component="h4" style={{
padding: '30px'
}}> No news available at present</Typography>
}
</Card>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={6}>
<div className="dataOverview">
<Grid container spacing={1}>
{/* Overall score */}
<Grid container item xs={12} spacing={3} className="avgScoreGrid">
<div className="avgScore">
<div>
Avgerage Sentiment:
</div>
<div className={this.state.sentiment === "Bearish" ? "bearishScore" : "bullishScore"}>
{sentiment}
</div>
</div>
</Grid>
{/* Technical Analysis */}
<Grid container item xs={12} spacing={3}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={emailsSubscriptionChart.data}
type="Bar"
options={emailsSubscriptionChart.options}
responsiveOptions={emailsSubscriptionChart.responsiveOptions}
listener={emailsSubscriptionChart.animation}
/>
}
chartColor="orange"
title="Sentiment Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
{/* Sentimental Analysis */}
<Grid container item xs={12} spacing={3}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={completedTasksChart.data}
type="Line"
options={completedTasksChart.options}
listener={completedTasksChart.animation}
/>
}
chartColor="red"
title="Technical Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
</Grid>
</div>
</ItemGrid>
</Grid>
</CardContent>
</div> :
<div className="noActivity">
</div>
}
</div>
</Card>
</div>
)
}
Example #7
| Source File: Transactions.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
const { classes } = this.props;
return (
<div>
<div className="local-bootstrap">
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<Card className="fundsMain">
<Grid container>
<ItemGrid xs={12} sm={4} >
<CardContent>
<Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Margin Available </Typography>
<Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 5000.50 </Typography>
</CardContent>
</ItemGrid>
<ItemGrid xs={12} sm={4} >
<CardContent>
<Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Margin Used </Typography>
<Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 0.0 </Typography>
</CardContent>
</ItemGrid>
<ItemGrid xs={12} sm={4} >
<CardContent>
<Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Opening Balance </Typography>
<Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 5000.50 </Typography>
</CardContent>
</ItemGrid>
</Grid>
<CardContent>
<div className="addWithdrawButtons">
<div className="addFunds">
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#0080FF",
padding: "15px 30px",
fontSize: "18px"
}}
startIcon={<Add />}
color="primary"
>
Add Funds
</Button>
</div>
<div className="withdrawFunds">
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#FF2400",
padding: "15px 30px",
fontSize: "18px"
}}
startIcon={<SettingsBackupRestore />}
color="secondary"
>
Withdraw
</Button>
</div>
</div>
</CardContent>
</Card>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={12}>
<div className="watchList">
<Card className="watchListChart">
<CardContent>
<Typography component="h3" variant="h1">Current Holdings</Typography>
</CardContent>
<CardContent>
<div className="local-bootstrap">
<div className="container">
<div className="searchFilters">
<div className="searchWatchList">
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">Search</span>
</div>
<input type="text" className="form-control" placeholder="Filter Holdings" aria-label="Search" aria-describedby="basic-addon1"/>
</div>
</div>
</div>
<table className="table">
<thead className='thead-dark'>
<tr>
<th scope="col">Tick</th>
<th scope="col">Name</th>
<th scope="col">Buy Price</th>
<th scope="col">Invested</th>
<th scope="col">Quantity</th>
<th scope="col">Current Value</th>
<th scope="col">% Change (24 hrs)</th>
<th scope="col">% Change (Overall)</th>
</tr>
</thead>
<tbody>
{ this.state.rows.map(row => (
<tr>
<td className="holdingsRow">{row.tick}</td>
<td className="holdingsRow">{row.name}</td>
<td className="holdingsRow">{row.price}</td>
<td className="holdingsRow">{row.investmentPrice}</td>
<td className="holdingsRow">{row.quantity}</td>
<td className={row.overallChange > 0 ? 'bullishTrend' : (row.overallChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.currentValue}</td>
<td className={row.todayChange > 0 ? 'bullishTrend' : (row.todayChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.todayChange + " %"}</td>
<td className={row.overallChange > 0 ? 'bullishTrend' : (row.overallChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.overallChange + " %"}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</CardContent>
</Card>
</div>
</ItemGrid>
</Grid>
</div>
</div>
);
}
Example #8
| Source File: UserProfile.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
const { userID, email, first_name, last_name, aadharNo, panNo, mobileNo } = this.state;
const { classes } = this.props;
return (
<div>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<Card>
<CardHeader
classes={{
root: classes.cardHeader,
avatar: classes.cardAvatar
}}
avatar={<img src={avatar} alt="..." className={classes.img} />}
/>
<div className="local-bootstrap">
<div className="nameHeader">
<CardContent>
<Typography variant="h2" component="h2"> {first_name + " " + last_name} </Typography>
</CardContent>
</div>
<div className="profileDetails">
<CardContent>
<Typography variant="subtitle" component="h3"> Personal </Typography>
</CardContent>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> E-mail </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> {email} </Typography>
</div>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Aadhar Number </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> {"XXXX" + aadharNo.substr(aadharNo.length-4,aadharNo.length)} </Typography>
</div>
</ItemGrid>
</Grid>
<div className="secondRow">
<Grid container>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Phone </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> {mobileNo} </Typography>
</div>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Pan Number </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 130
}}> {"XXXX" + panNo.substr(panNo.length-4,panNo.length)} </Typography>
</div>
</ItemGrid>
</Grid>
</div>
</CardContent>
</div>
<div className="profileDetails">
<CardContent>
<Typography variant="subtitle" component="h3"> Account </Typography>
</CardContent>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Products </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> CNC, NRML, MIS, BO, CO </Typography>
</div>
</ItemGrid>
</Grid>
<div className="secondRow">
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Order Types </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 70
}}> MARKET, LIMIT, SL, SL-M </Typography>
</div>
</ItemGrid>
</Grid>
</div>
</CardContent>
</div>
<div className="profileDetails">
<CardContent>
<Typography variant="subtitle" component="h3"> Bank Details </Typography>
</CardContent>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Bank Accounts </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 60
}}> *7000 </Typography>
</div>
</ItemGrid>
</Grid>
<div className="secondRow">
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Bank </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 150
}}> ICICI LTD </Typography>
</div>
</ItemGrid>
</Grid>
</div>
</CardContent>
</div>
</div>
<div className="signOutButton">
<Button color="primary" round onClick={this.handleButtonClick}
style={{
borderRadius: 5,
// backgroundColor: "#FF2400",
padding: "10px 25px",
fontSize: "18px"
}}>
Sign Out
</Button>
</div>
</Card>
</ItemGrid>
</Grid>
</div>
);
}
