parent
4de8f441c9
commit
51258aa00b
15 changed files with 791 additions and 18 deletions
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 925 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 584 B |
After Width: | Height: | Size: 961 B |
@ -0,0 +1,54 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
const Trophy = ({}) => { |
||||
const [dropdown, setDropdown] = React.useState(true); |
||||
return ( |
||||
<div |
||||
className={`w-full flex py-5 px-3 justify-between items-center flex-row bg-yellow4 bg-opacity-40`} |
||||
> |
||||
<div className={`flex flex-row items-center`}> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width={23.862} height={23.862}> |
||||
<g fill="none" stroke="#d6d020" data-name="vuesax/linear/cup"> |
||||
<path |
||||
d="M12.08 16.405v2.088" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth="1.5" |
||||
/> |
||||
<path |
||||
data-name="Vector" |
||||
strokeWidth="1.5" |
||||
d="M7.109 21.874h9.942v-.995a1.994 1.994 0 0 0-1.988-1.988H9.097a1.994 1.994 0 0 0-1.988 1.988v.994Z" |
||||
/> |
||||
<path |
||||
data-name="Vector" |
||||
d="M6.115 21.873h11.931M11.931 15.907a6.955 6.955 0 0 1-6.96-6.959V5.965a3.976 3.976 0 0 1 3.977-3.977h5.965a3.976 3.976 0 0 1 3.977 3.977v2.983a6.955 6.955 0 0 1-6.959 6.959Z" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth="1.5" |
||||
/> |
||||
<path |
||||
data-name="Vector" |
||||
d="M5.438 11.583a4.831 4.831 0 0 1-1.919-1.193 5.3 5.3 0 0 1-1.491-3.579 2.461 2.461 0 0 1 2.486-2.486h.646a3.734 3.734 0 0 0-.3 1.491v2.983a7.007 7.007 0 0 0 .578 2.784ZM18.423 11.583a4.831 4.831 0 0 0 1.919-1.193 5.3 5.3 0 0 0 1.491-3.579 2.461 2.461 0 0 0-2.485-2.486h-.647a3.734 3.734 0 0 1 .3 1.491v2.983a7.007 7.007 0 0 1-.578 2.784Z" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth="1.5" |
||||
/> |
||||
</g> |
||||
</svg> |
||||
<strong className="text-sm mr-2.5 text-green4F"> |
||||
{"امتیاز شما" + " " + 14560} |
||||
</strong> |
||||
</div> |
||||
<Link to="#" className="text-sm text-green4F"> |
||||
مشاهده جوایز |
||||
</Link> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
export default connect(mapStateToProps)(Trophy); |
@ -0,0 +1,72 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
const User = ({ user, mobile }) => { |
||||
const [dropdown, setDropdown] = React.useState(true); |
||||
return ( |
||||
<div className={`w-full`}> |
||||
<button |
||||
className={`w-full mt-2 mb-2 flex flex-row justify-between items-center border-none`} |
||||
onClick={() => setDropdown(!dropdown)} |
||||
> |
||||
<div className={`flex items-center flex-row`}> |
||||
{user?.picFileIds ? ( |
||||
<img |
||||
src={"https://dnvn.ir/api/v1/" + user.picFileIds} |
||||
className={`rounded-full`} |
||||
style={{ width: 70, height: 70 }} |
||||
/> |
||||
) : ( |
||||
<div |
||||
className={"rounded-full"} |
||||
style={{ |
||||
width: 70, |
||||
height: 70, |
||||
backgroundColor: "#ddd", |
||||
}} |
||||
></div> |
||||
)} |
||||
<div className={`flex flex-col mr-1`}> |
||||
<strong className={`text-base font-semibold text-gray1`}> |
||||
{user?.firstName + " " + user?.lastName} |
||||
</strong> |
||||
<span className="mt-2 text-sm text-gray1">{user?.cellphone}</span> |
||||
</div> |
||||
</div> |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={24} |
||||
height={24} |
||||
className={`transform ${dropdown ? "rotate-0" : "rotate-180"}`} |
||||
> |
||||
<path |
||||
d="M6.08 15.82h11.84a1.077 1.077 0 0 0 .76-1.84L13.499 8.8a2.131 2.131 0 0 0-3.01 0l-1.97 1.97-3.21 3.21a1.082 1.082 0 0 0 .771 1.84Z" |
||||
fill="#c6c6c6" |
||||
data-name="vuesax/bold/arrow-down" |
||||
/> |
||||
</svg> |
||||
</button> |
||||
<div |
||||
className={`flex w-full pr-16 transition-all overflow-hidden ${ |
||||
dropdown ? "max-h-40" : "max-h-0" |
||||
}`}
|
||||
> |
||||
<div |
||||
className={`flex items-center w-full pb-3 mb-3 flex-row border-b border-solid border-gray-100`} |
||||
> |
||||
<strong className="text-sm text-gray1"> |
||||
افزودن حساب کاربری جدید |
||||
</strong> |
||||
<span className="mr-1 mt-1 text-xl text-gray1">+</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
user: state.user.status, |
||||
mobile: state.publicApi.mobile, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(User); |
@ -1,14 +1,27 @@ |
||||
import React from 'react' |
||||
import { connect } from 'react-redux' |
||||
import React, { useState, useEffect } from "react"; |
||||
|
||||
import { connect } from "react-redux"; |
||||
|
||||
//components
|
||||
import User from "./components/User"; |
||||
import Trophy from "./components/Trophy"; |
||||
import List from "./components/List"; |
||||
|
||||
function Profile({}) { |
||||
|
||||
useEffect(() => {}, []); |
||||
|
||||
export const Profile = ({}) => { |
||||
return ( |
||||
<div>Profile</div> |
||||
) |
||||
<div> |
||||
<User /> |
||||
<Trophy /> |
||||
<List /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({}) |
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {} |
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Profile) |
||||
export default connect(mapStateToProps, mapDispatchToProps)(Profile); |
Loading…
Reference in new issue