Invite.js
this is my invite component in which invite button is outside of the form and delete button is inside of form.I want if delete button is click form should be deleted In this I've used use state and I've have taken this form from material-ui help me if any one can how I can solve my problem ?
import * as React from "react";
import Box from "#mui/material/Box";
import FormControl from "#mui/material/FormControl";
import TextField from "#mui/material/TextField";
import AccountCircle from "#mui/icons-material/AccountCircle";
import Button from "#mui/material/Button";
import DeleteIcon from "#mui/icons-material/Delete";
import AddIcon from "#mui/icons-material/Add";
import Stack from "#mui/material/Stack";
const Invites = () => {
const [ addForm,setAddForm]=React.useState(false)
const [deleteForm, setdeleteForm]=React.useState(false)
const setAddFormHandler = () => {
console.log("clicked");
setAddForm(true);
};
const deleteHandler=()=>{
setdeleteForm(true)
}
return (
<>
<Stack direction="row" spacing={2}>
<Button
variant="contained"
color="info"
startIcon={<AddIcon />}
onClick={setAddFormHandler}
>
ADD INVITE
</Button>
</Stack>
{addForm ?<Box sx={{ "& > :not(style)": { m: 1 } }}>
<FormControl>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Stack
direction="row"
spacing={4}
style={{ marginLeft: 30, marginTop: 18, width: 500 }}
>
<Button variant="contained" size="large" startIcon={<DeleteIcon />} onClick=
{deleteHandler}>
Delete
</Button>
</Stack>
</FormControl>
</Box>:null}
</>
);
};
export default Invites;
First of all your question is confusing. So i'm adding two solutions here which addresses two perspectives of the problem, you can choose the one matching yours.
Sol 1: You want to create new form for each click on invite button (multiple forms)
The below solution will add new forms to the same page every time the invite button is clicked and delete the respective form once the delete button is clicked.
import * as React from "react";
import Box from "#mui/material/Box";
import FormControl from "#mui/material/FormControl";
import TextField from "#mui/material/TextField";
import AccountCircle from "#mui/icons-material/AccountCircle";
import Button from "#mui/material/Button";
import DeleteIcon from "#mui/icons-material/Delete";
import AddIcon from "#mui/icons-material/Add";
import Stack from "#mui/material/Stack";
const Invites = () => {
const [forms, setForm] = React.useState({ val: []});
function createcustomForms() {
return forms.val.map((el, i) =>
<div key={i}>
<Box sx={{ "& > :not(style)": { m: 1 } }}>
<FormControl>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Stack
direction="row"
spacing={4}
style={{ marginLeft: 30, marginTop: 18, width: 500 }}
>
<Button variant="contained" size="large" startIcon={<DeleteIcon />}
onClick={(e) => removeForm(i)}>
Delete
</Button>
</Stack>
</FormControl>
</Box>
</div>
);
}
const addForm = () => {
setForm({ val: [...forms.val, '']})
}
const removeForm = (i) => {
let vals = [...forms.val];
vals.splice(i,1);
setForm({ val: vals });
}
return (
<>
<Stack direction="row" spacing={2}>
<Button
variant="contained"
color="info"
startIcon={<AddIcon />}
onClick={addForm}
>
ADD INVITE
</Button>
</Stack>
{createcustomForms()}
</>
);
};
export default Invites;
Sol 2 : You want to create a form when invite button is clicked and delete it when delete button is clicked (currently in your code delete is not working)
const deleteHandler=()=>{
setdeleteForm(true)
}
should be changed to
const deleteHandler=()=>{
setAddForm(false);
}
Related
I have a custom TextField component in my app but I am not able to increase the value of first TextField since it has onChange method whereas the second TextField doesn't have onChange method hence I am able to increase it's value.
import React, { useContext, useRef, useCallback, useState } from "react";
import {
Card,
CardContent,
CardActions,
TextField,
Button,
CardHeader,
Select,
MenuItem,
InputAdornment,
} from "#mui/material";
import CircularProgress from "#mui/material/CircularProgress";
import { alpha, styled } from "#mui/material/styles";
import UserContext from "../../context";
import polygonLogo from "../../assets/polygon-matic-token-icon.png";
import usdcTokenLogo from "../../assets/usdc-token-icon.png";
import "./index.css";
function UniSwapWidget() {
const [inputToken, setInputToken] = useState("Matic");
const [outputToken, setOutputToken] = useState("USDC");
const [inputTokenValue, setInputTokenValue] = useState("0.0");
const [outputTokenValue, setOutputTokenValue] = useState(0.0);
const [fetchPriceWaiter, setFetchPriceWaiter] = useState(false);
const { signerAddress, logIn, loginWaiter } = useContext(UserContext);
const UNI = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";
const connectors = useRef(null);
const focusConnectors = useCallback(() => connectors.current?.focus(), []);
const CustomCard = styled(Card)(({ theme }) => ({
borderRadius: "24px",
padding: "8px",
boxShadow:
"rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px, rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px",
}));
const CustomCardContent = styled(CardContent)(({ theme }) => ({
display: "flex",
flexDirection: "column",
gap: "0.3rem",
}));
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: "rgb(253, 234, 241)",
color: "rgb(213, 0, 102)",
width: "100%",
boxShadow: "none",
fontWeight: 500,
padding: "16px",
borderRadius: 20,
"&:hover": {
backgroundColor: "rgb(252, 220, 232)",
boxShadow: "none",
},
}));
const CustomSelect = styled(Select)(({ theme }) => ({
borderRadius: "16px",
height: "fit-content",
backgroundColor: "rgb(237, 238, 242)",
borderColor: "white",
"#demo-simple-select": {
display: "flex",
alignItems: "center",
gap: "0.3rem",
fontSize: "18px",
fontWeight: 500,
},
"&:hover": {
backgroundColor: "rgb(232, 0, 111)",
},
}));
const onHandleInputTokenValueChange = (e)=>{
e.preventDefault();
setInputTokenValue(e.target.value);
// setFetchPriceWaiter(true);
}
return (
<div className="uniswap">
<CustomCard sx={{ minWidth: 275 }}>
<CardHeader
title={
<span>
<b>Swap</b>
</span>
}
/>
<CustomCardContent>
<div className="input-token-div">
<TextField
id="outlined-basic"
placeholder="0.0"
// label={inputTokenValue === "" ? "0.0" : ""}
onChange={onHandleInputTokenValueChange}
// value={inputTokenValue}
fullWidth
required
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={inputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
}}
onChange={(e) => {
setInputToken(e.target.value);
setOutputToken(
e.target.value === "Matic" ? "USDC" : "Matic"
);
}}
>
<MenuItem
value={"Matic"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
<div className="output-token-div">
<TextField
placeholder="0.0"
id="outlined-basic"
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={outputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
backgroundColor: "rgb(232, 0, 111)",
color: "white",
}}
onChange={() => console.log("chaning")}
>
<MenuItem
value={"Matic"}
disabled={inputToken === "Matic" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
disabled={inputToken === "USDC" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
{fetchPriceWaiter ? (
<div className="price-div">
<CircularProgress sx={{ margin:0 }} size={25} />
Fetching Best Price...
</div>
) : null}
</CustomCardContent>
<CardActions>
{signerAddress !== "" ? (
<CustomButton variant="contained">
Swap
</CustomButton>
) : (
<CustomButton
variant="contained"
disabled={loginWaiter}
onClick={logIn}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{loginWaiter ? (
<CircularProgress sx={{ marginRight: 1 }} size={25} />
) : null}
Connect Wallet
</CustomButton>
)}
</CardActions>
</CustomCard>
</div>
);
}
export default UniSwapWidget;
I don't know why it's happening. I am using Material UI 5.10.3. May anyone knows what's wrong here?
Solution
Finally I have found the solution. Need to pass onChange function to InputProps. Reference: Mask Textfield component in Material-UI
I am trying to centralize a modal inside a specific div but it automatically centralizes the modal to the complete screen center. I don't want to center it as per complete screen but as per a specific div only. I feel like I am failing to attach that specific div with my modal. Any help will be appreciated.
'check-mate' is the div I am targeting in which I want to place my modal.
File.js
<React.Fragment>
<div
className="check-mate"
style={{
backgroundColor: 'red',
position: 'relative',
}}
>
<>
<Stack
spacing={2}
className="absolute right-0 mt-10 mr-10"
>
<Fab
id="zoom_in"
tooltip="Zoom In"
size="small"
color="primary"
aria-label="zoom-in"
>
<Tooltip title="Zoom In">
<ZoomInSharpIcon />
</Tooltip>
</Fab>
<Fab
id="collapse-all"
size="small"
color="primary"
aria-label="collapse-all"
tooltip="Collapse All"
>
<Tooltip title="Collapse All">
<FuseSvgIcon>material-outline:call_merge</FuseSvgIcon>
</Tooltip>
</Fab>
</Stack>
<>
{Object.keys(props.treeData).length > 1 ? (
<Box
t={2}
ref={svgRef}
className={"chart-container"}
sx={{ flexGrow: 1 }}
/>
) : (
<FuseLoading />
)}
<PopupChart
onClose={popupCloseHandler}
show={visibility}
data={popupData}
title=""
popupTabs={popupTabs}
popupPosition={popupPosition}
nodeName={nodeName}
theme={theme}
/>
</>
</>
{/* } */}
{/* /> */}
</div>
</React.Fragment>
Modal.js
import { useEffect, useState, useRef } from "react";
import popupStyles from "./Popup.module.css";
import PropTypes from "prop-types";
// import amcharts_drillable_bar_chart from "./charts/popupChart";
import CircularProgress from "#mui/material/CircularProgress";
import * as am4core from "#amcharts/amcharts4/core";
import * as am4charts from "#amcharts/amcharts4/charts";
import Backdrop from "#mui/material/Backdrop";
import Modal from "#mui/material/Modal";
import Fade from "#mui/material/Fade";
import Typography from "#mui/material/Typography";
let margin = { top: 30, right: 50, bottom: 0, left: 100 },
height = 320 - margin.top - margin.bottom;
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 600,
bgcolor: "background.paper",
// bgcolor: "#31333f",
border: "2px solid #000",
boxShadow: 24,
borderRadius: "5%",
p: 2,
display: "flex",
flexDirection: "column",
};
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={show}
onClose={closeHandler}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={show}>
<Box sx={style}>
<Typography
variant="h6"
sx={{ textAlign: "center" }}
>
{nodeName}
</Typography>
{props.data.length > 0 ? (
<Box sx={{ width: "100%" }}>
<Tabs
value={tabValue}
onChange={(event, value) => setTabValue(value)}
textColor="secondary"
indicatorColor="secondary"
aria-label="secondary tabs example"
onClick={(e) => {
console.log("Came here 01");
}}
>
{props.popupTabs.map((element, i) => (
<Tab
key={element}
onClick={(e) => {
console.log("Came here");
setActiveTab(element);
}}
label={element}
value={element}
/>
))}
</Tabs>
{
<Box
id="popup_chart"
sx={{
height: height + margin.top + margin.bottom + "px",
alignItems: "center",
}}
className={"svgWrapper"}
></Box>
}
</Box>
) : (
<Typography
variant="p"
gutterBottom
component="div"
sx={{ textAlign: "center" }}
>
No Drills available for this node
</Typography>
)}
{loading && (
<Box
sx={{
display: "flex",
flexGrow: 1,
justifyContent: "center",
alignItems: "center",
position: "absolute",
top: "50%",
right: "50%",
}}
>
<CircularProgress color="success" />
</Box>
)}
{/* <Box id='popup_chart' sx={{
height: height + margin.top + margin.bottom + 'px',
alignItems: 'center'}} >
</Box> */}
</Box>
</Fade>
</Modal>
</div>
);
I am relatively new to React and Javascript. I am trying to declare a temporary variable and assign the value companyData.name to it as I need to collect the 2 variables like companyData.name.
This is my code.
<Box sx={{ flexGrow: 3 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={2.5}>
<Grid container spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 16 }} display="flex"
justifyContent="center"
alignItems="center" >
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 1:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>
</Box>
</Grid>
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 2:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
{chartData ? <CompanyChart dataset={chartData} companyName={companyData.name} companyName2={companyData.name}/>:<div> Loading chart...</div>}
I need to assign companyData.name of Company 1 to companyName in the above line.
I have tried using React.useState for this purpose. But I am unable to set the state inside a UI component.
const [company1,setCompany1]=React.useState([]);
setCompany1(companyData.name)
Any help regarding how to proceed would be appreciated. I just need to pass the names of 2 companies to .
You are using an array as default state ([]) and then trying to pass a string as a value setCompany(companyData.name).
Try this:
const [company1,setCompany1]=React.useState('');
setCompany1(companyData.name)
I'm in my first project with Material UI and React and there's a problem I've encountered in terms of design, I want to make sure that each AppBar is in a separate row, and stays the same size as in the image.
Note that I've already tried changing the container direction to columns'/rows, then it does each in a separate row but each AppBar takes up all the screen width and if I try to change the width to a certain percentage of the screen it loses proportion.
I would appreciate your assistance!
I'm attaching a picture of what my current situation is (I just want to put the slider under the Buttons AppBar )
this is the problem
return (
<main className={classes.content}>
{/* <div className={classes.toolbar} /> */}
<Grid container spacing={2} justify='center'>
<Grid item>
<AppBar
position='static'
sx={{
backgroundColor: '#212121 !important ',
borderRadius: 8,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
// width: "min",
// margin: "auto",
}}
style={{
border: 'solid white 0.1px',
}}
>
<Toolbar>
<Button
className={classes.btn}
sx={{
m: 2,
textTransform: 'capitalize',
}}
variant='outlined'
size='small'
//onClick={handleCategoryClicked}
>
filter by category
</Button>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'price')}
>
filter by price
</Button>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'rating')}
>
filter by rating
</Button>
</Toolbar>
</AppBar>
</Grid>
<Grid>
<AppBar
position='static'
sx={{
backgroundColor: '#212121 !important ',
borderRadius: 8,
}}
style={{ border: 'solid white 0.1px' }}
>
<Box sx={{ width: 300 }}>
<Slider
getAriaLabel={() => 'Temperature range'}
value={value}
onChange={handleChange}
valueLabelDisplay='auto'
getAriaValueText={valuetext}
/>
<Button
className={classes.btn}
sx={{ m: 2, textTransform: 'capitalize' }}
variant='outlined'
size='small'
onClick={(e) => sortResults(e, 'pricerange')}
>
filter by Price Range
</Button>
</Box>
</AppBar>
</Grid>
I am creating a Appbar with material UI. When I use a custom hook. to control the child component it also controls the whole parent component...
My purpose is to use this hook to disappear the component whenever a click is made outside of the component
Here is my custom hook
useListener.js
import { useEffect, useState, useRef } from "react";
export const useListener = (active, ref) => {
ref = useRef();
const [open, setOpen] = useState((active = false));
useEffect(() => {
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
setOpen(!open);
return;
}
}
// Bind the event listener
document.body.addEventListener("click", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.body.removeEventListener("click", handleClickOutside);
};
}, [open, ref]);
return [open, ref];
};
when I use it in the component by destructing it with
const [open, ref] = useListener()
and use it inside the component, I set open to appear and disappear the component, with CSS..
display: open ? 'block' : 'none'
Now when I use this component in which this hook is being used, When I click on this component it appears, and when I click outside of the component (any where else in the body) it disappears, which is totally fine...
But the issue is when I click on the parent component in with this component is being used it also makes appear this child component...
Here is my child component...
Profile.js
import React from "react";
import Paper from "#mui/material/Paper";
import Box from "#mui/material/Box";
import cover from "../assets/cover.webp";
import profilepic from "../assets/profilepic.webp";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
import { LogoutIcon } from "../assets/LogoutIcon";
import { ChangePasswordIcon } from "../assets/ChangePasswordIcon";
import { useListener } from "../../../hooks/useListener";
const logout = () => {
localStorage.removeItem("authorization");
localStorage.removeItem("user");
localStorage.removeItem("permissions");
window.location.reload(false);
};
const Profile = () => {
const [open, profileRef] = useListener();
console.log(profileRef.current);
return (
<Box
ref={profileRef}
sx={{
display: open ? "inline" : "none",
width: "190px",
}}
>
<Paper elevation={2}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<img src={cover} alt="Cover" style={{ width: "190px" }}></img>
<img
src={profilepic}
alt="Profile"
style={{ height: "62px", width: "62px", borderRadius: "50%" }}
></img>
<Typography variant="button" display="block" gutterBottom>
Username
</Typography>
<Button>
<Box sx={{ display: "flex", flexDirection: "row" }}>
<ChangePasswordIcon sx={{ height: "18px", width: "18px" }} />
<Typography variant="body1" gutterBottom>
Change password
</Typography>
</Box>
</Button>
<Button onClick={logout}>
<Box sx={{ display: "flex", flexDirection: "row" }}>
<LogoutIcon sx={{ width: "16px", height: "16px" }} />
<Typography variant="body1" gutterBottom>
Logout
</Typography>
</Box>
</Button>
</Box>
</Paper>
</Box>
);
};
export default Profile;
And this is the parent component...
TopbarContents.js
import React, { useState } from "react";
import Box from "#mui/material/Box";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
import profilepic from "../assets/profilepic.webp";
import Profile from "./Profile";
export const TopbarContents = () => {
const [profileActive, toggleProfile] = useState(false);
const openProfile = () => {
toggleProfile(true);
};
return (
<Box sx={{ width: "100%" }}>
<Box
sx={{
width: "100%",
display: "flex",
alignItems: "center",
}}
>
<Box sx={{ flexGrow: 1 }}>
<Typography
sx={{ color: "#494343" }}
variant="h6"
noWrap
component="div"
>
Dashboard
</Typography>
</Box>
<Box
sx={{
height: "45px",
width: "160px",
borderRadius: 2,
display: "flex",
flexDirection: "column",
justifyContent: "center",
border: "1px solid #e0e0e0",
pl: "8px",
}}
>
<Typography sx={{ color: "#2E4299", pt: 1 }} variant="caption">
Case study
</Typography>
<Typography sx={{ color: "#494343" }} variant="overline">
Trial ID: NC48023194
</Typography>
</Box>
<Button
color="guava"
variant="contained"
size="medium"
sx={{ fontFamily: "Poppins", mr: 6, ml: 3 }}
>
Case Study
</Button>
<Button onClick={openProfile}>
<img
src={profilepic}
alt="Profile"
style={{ height: "62px", width: "62px", borderRadius: "50%" }}
></img>
</Button>
</Box>
<Box
sx={{
display: profileActive ? "inline" : "none",
flexDirection: "column",
}}
>
<Profile />
</Box>
</Box>
);
};