💄 add profile info section on dashboard

src/components/Profile/Button.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styled from "styled-components";
+
+const BtnContainer = styled.button`
+	padding: 5px 25px;
+	border-radius: 12px;
+	font-size: 13px;
+	line-height: 22px;
+	cursor: pointer;
+
+	border: ${(props) =>
+		props.variant === "primary" ? "1px solid #828282" : "none"};
+	background-color: ${(props) =>
+		props.variant === "primary" ? "#fff" : "#2f80ed"};
+	color: ${(props) => (props.variant === "primary" ? "#828282" : "#fff")};
+
+	&:hover,
+	&:active {
+		background: ${(props) =>
+			props.variant === "primary" ? "#e6e6e6" : "#2f80ede3"};
+	}
+`;
+
+// const BtnContainer = styled.button`
+// 	padding: 5px 25px;
+// 	border-radius: 12px;
+// 	font-size: 13px;
+// 	line-height: 22px;
+// 	cursor: pointer;
+
+// 	border: none;
+// 	background: #2f80ed;
+// 	color: #fff;
+
+// 	&:hover,
+// 	&:active {
+// 		background: #2f80ede3;
+// 	}
+// `;
+
+const Button = ({ children, variant }) => {
+	return <BtnContainer variant={variant}>{children}</BtnContainer>;
+};
+
+export default Button;

src/components/Profile/Infobox.jsx

@@ -0,0 +1,115 @@
+import React from "react";
+import styled from "styled-components";
+
+import Button from "./Button";
+import Person from "./../../assets/person.jpg";
+
+const Parent = styled.div`
+	grid-row: 3 / 4;
+	grid-column: 2 / 5;
+
+	margin: 0 auto;
+	border: 1px solid #e0e0e0;
+	box-sizing: border-box;
+	border-radius: 12px;
+	margin-top: 3rem;
+	min-width: 50rem;
+`;
+
+const Child = styled.div`
+	display: flex;
+	justify-content: space-between;
+	padding: 2rem 4rem;
+
+	.header_text {
+		h1 {
+			font-weight: 400;
+			font-size: 25px;
+		}
+
+		h2 {
+			font-weight: 300;
+			font-size: 15px;
+			color: #828282;
+		}
+	}
+
+	.btn_container {
+		align-self: center;
+	}
+`;
+
+const DataContainer = styled.div`
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	align-items: center;
+	padding: 2rem 4rem;
+
+	h1 {
+		font-size: 13px;
+		line-height: 18px;
+		color: #bdbdbd;
+		text-transform: uppercase;
+	}
+
+	p {
+		font-size: 18px;
+		line-height: 25px;
+	}
+`;
+
+const Divider = styled.div`
+	border: 0.5px solid #e0e0e0;
+`;
+
+const Picture = styled.img`
+	border-radius: 8px;
+	height: 55px;
+`;
+
+const Infobox = () => {
+	return (
+		<Parent>
+			<Child>
+				<div className="header_text">
+					<h1>Profile</h1>
+					<h2>Some info may be visible to other people</h2>
+				</div>
+				<div className="btn_container">
+					<Button variant="primary">Edit</Button>
+				</div>
+			</Child>
+			<Infodata title="photo" value={Person} />
+			<Infodata title="name" value="Xanthe Neal" />
+			<Infodata
+				title="bio"
+				value="I am a software developer and a big fan of talk.to"
+			/>
+			<Infodata title="phone" value="908249274292" />
+			<Infodata title="email" value="[email protected]" />
+			<Infodata title="password" value="************" />
+		</Parent>
+	);
+};
+
+const Infodata = ({ title, value }) => {
+	let val;
+
+	if (title === "photo") {
+		val = <Picture src={value} alt="persons-profile" />;
+	} else {
+		val = <p>{value}</p>;
+	}
+
+	return (
+		<React.Fragment>
+			<Divider />
+			<DataContainer>
+				<h1>{title}</h1>
+				{val}
+			</DataContainer>
+		</React.Fragment>
+	);
+};
+
+export default Infobox;

src/components/Profile/Titlebar.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+	grid-row: 2 / 3;
+	grid-column: 3 / 4;
+	text-align: center;
+	margin-top: 1rem;
+
+	h1 {
+		font-weight: 400;
+		font-size: 36px;
+		line-height: 49px;
+	}
+
+	h2 {
+		font-weight: 300;
+		font-size: 18px;
+		line-height: 25px;
+	}
+`;
+
+const Titlebar = () => (
+	<Container>
+		<h1>Personal Info</h1>
+		<h2>Basic info, like your name and photo</h2>
+	</Container>
+);
+
+export default Titlebar;

src/components/Profile/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import styled from "styled-components";
 
 import Navbar from "./Navbar";
+import Titlebar from "./Titlebar";
+import Infobox from "./Infobox";
 
 const Layout = styled.div`
 	display: grid;
@@ -12,6 +14,8 @@ const Profile = () => {
 	return (
 		<Layout>
 			<Navbar />
+			<Titlebar />
+			<Infobox />
 		</Layout>
 	);
 };