parent
9368cfcf96
commit
1e2ab85cdc
35 changed files with 729 additions and 461 deletions
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,20 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export default function GenderSwitch(props) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<div className="gender d-flex"> |
||||||
|
<button onClick={}>پسر</button> |
||||||
|
<button>دختر</button> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="mobile-gender d-flex"> |
||||||
|
<button>پسر</button> |
||||||
|
<button>دختر</button> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,27 +1,40 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import TextField from '@material-ui/core/TextField'; |
import TextField from "@material-ui/core/TextField"; |
||||||
import { makeStyles } from '@material-ui/core/styles'; |
import { makeStyles } from "@material-ui/core/styles"; |
||||||
|
|
||||||
|
export default function FormPropsTextFields(props) { |
||||||
const useStyles = makeStyles((theme) => ({ |
const useStyles = makeStyles((theme) => ({ |
||||||
root: { |
root: { |
||||||
'& .MuiTextField-root': { |
"& .MuiTextField-root": { |
||||||
|
width: "100%", |
||||||
width: '100%', |
position: "relative", |
||||||
position : 'relative', |
|
||||||
marginRight: 10, |
marginRight: 10, |
||||||
|
"& input": { |
||||||
|
textAlign: props.align, |
||||||
|
direction: props.align === "right" ? "rtl" : "ltr", |
||||||
|
}, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
})); |
})); |
||||||
|
|
||||||
export default function FormPropsTextFields(props) { |
|
||||||
const classes = useStyles(); |
const classes = useStyles(); |
||||||
|
const { parent, defaultValue } = props; |
||||||
return ( |
return ( |
||||||
<form className={classes.root} noValidate autoComplete="off"> |
<form className={classes.root} noValidate autoComplete="off"> |
||||||
<div> |
<div> |
||||||
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" /> |
<TextField |
||||||
|
id="outlined-basic" |
||||||
|
name={props.name} |
||||||
|
label={props.label} |
||||||
|
variant="outlined" |
||||||
|
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||||
|
defaultValue={defaultValue} |
||||||
|
/> |
||||||
</div> |
</div> |
||||||
</form> |
</form> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
|
FormPropsTextFields.defaultProps = { |
||||||
|
align: "right", |
||||||
|
}; |
||||||
|
|||||||
@ -0,0 +1,79 @@ |
|||||||
|
import React from "react"; |
||||||
|
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: { |
||||||
|
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Upload(props) { |
||||||
|
const { parent } = props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3"> |
||||||
|
{parent.state.file === null ? ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name="file" |
||||||
|
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||||
|
/> |
||||||
|
<AddAPhotoIcon |
||||||
|
style={{ width: 40, height: 40, color: "white" }} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name="file" |
||||||
|
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||||
|
/> |
||||||
|
<img src={this.props.user.icon} alt={"کاربر"} /> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<div className="auth-profile__upload d-flex justify-content-center-align-items-center"> |
||||||
|
{parent.state.file === null ? ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
label={props.label} |
||||||
|
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||||
|
name={props.name} |
||||||
|
defaultValue="" |
||||||
|
type="file" |
||||||
|
/> |
||||||
|
<AddAPhotoIcon |
||||||
|
style={{ |
||||||
|
width: 40, |
||||||
|
height: 40, |
||||||
|
color: "grey", |
||||||
|
position: "absolute", |
||||||
|
left: "calc(50% - 20px)", |
||||||
|
top: "calc(50% - 20px)", |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
label={props.label} |
||||||
|
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||||
|
name={props.name} |
||||||
|
defaultValue="" |
||||||
|
type="file" |
||||||
|
/> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,32 +1,57 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
mobile: { |
||||||
|
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, |
||||||
|
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32, |
||||||
|
}, |
||||||
|
desktop: { |
||||||
|
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 75, |
||||||
|
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 95, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
import './index.scss'; |
|
||||||
export default function Links(props) { |
export default function Links(props) { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{ |
{window.innerWidth > 1000 ? ( |
||||||
window.innerWidth > 1000 ?
|
|
||||||
<div className="links-box d-flex flex-column" id="links"> |
<div className="links-box d-flex flex-column" id="links"> |
||||||
<h2>{props.data.title}</h2> |
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{props.data.title}</h2> |
||||||
</div> : null |
</div> |
||||||
} |
) : null} |
||||||
{ |
{window.innerWidth < 1000 ? ( |
||||||
window.innerWidth < 1000 ?
|
|
||||||
<div className="mobile-links-box d-flex flex-column" id="links"> |
<div className="mobile-links-box d-flex flex-column" id="links"> |
||||||
<h2><span></span>لینکها</h2> |
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
||||||
|
<span></span>لینکها |
||||||
|
</h2> |
||||||
<ul> |
<ul> |
||||||
{props.data.links.map((item, i) => ( |
{props.data.links.map((item, i) => ( |
||||||
<Item data={item} key={i} /> |
<Item data={item} key={i} /> |
||||||
))} |
))} |
||||||
</ul> |
</ul> |
||||||
</div> : null |
</div> |
||||||
}
|
) : null} |
||||||
</> |
</> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
const Item = (props) => { |
const Item = (props) => { |
||||||
return ( |
return ( |
||||||
<li><a href={props.data.link}>{props.data.title}</a></li> |
<li> |
||||||
|
<a |
||||||
|
style={{ |
||||||
|
fontSize: |
||||||
|
window.innerWidth > 1000 ? fontSize.desktop.a : fontSize.mobile.a, |
||||||
|
}} |
||||||
|
href={props.data.link} |
||||||
|
> |
||||||
|
{props.data.title} |
||||||
|
</a> |
||||||
|
</li> |
||||||
); |
); |
||||||
} |
}; |
||||||
|
|||||||
Loading…
Reference in new issue