feat: profiles styles added

package.json

@@ -10,6 +10,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/App.jsx

@@ -1,9 +1,13 @@
 import { Profile } from './Profile/Profile';
 import user from '../data/user.json';
+import { Layout } from './Layout';
+import { GlobalStyle } from './Globalstyle';
+
 export const App = () => {
   return (
-    <div>
+    <Layout>
+      <GlobalStyle />
       <Profile {...user} />
-    </div>
+    </Layout>
   );
 };

src/components/Globalstyle.js

@@ -0,0 +1,40 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ ul,
+ ol {
+   margin: 0;
+   padding: 0;
+ }
+
+ ul {
+   list-style: none;
+ }
+
+ img {
+   display: block;
+   max-width: 100%;
+   height: auto;
+ }
+`;

src/components/Layout.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Layout = styled.div`
+  padding: 16px;
+  background-color: #f0f8ff;
+`;

src/components/Profile/Profile.jsx

@@ -1,34 +1,45 @@
-export const Profile = props => {
-  const {
-    username,
-    tag,
-    location,
-    avatar,
-    stats: { followers, views, likes },
-  } = props;
+import {
+  Avatar,
+  Description,
+  Info,
+  Name,
+  Stat,
+  StatItem,
+  StatLabel,
+  StatValue,
+  Wrapper,
+} from './Profile.styled';
+
+export const Profile = ({
+  username,
+  tag,
+  location,
+  avatar,
+  stats: { followers, views, likes },
+}) => {
   return (
-    <div>
-      <div>
-        <img src={avatar} alt={tag} />
-        <p>{username}</p>
-        <p>@{tag}</p>
-        <p>{location}</p>
-      </div>
+    <Wrapper>
+      <Description>
+        <Avatar src={avatar} alt={tag} />
+        <Name>{username}</Name>
+        <Info>@{tag}</Info>
+        <Info>{location}</Info>
+      </Description>
 
-      <ul>
-        <li>
-          <span>Followers</span>
-          <span>{followers}</span>
-        </li>
-        <li>
-          <span>Views</span>
-          <span>{views}</span>
-        </li>
-        <li>
-          <span>Likes</span>
-          <span>{likes}</span>
-        </li>
-      </ul>
-    </div>
+      <Stat>
+        <StatItem>
+          <StatLabel>Followers</StatLabel>
+          <StatValue>{followers}</StatValue>
+        </StatItem>
+        <StatItem>
+          <StatLabel>Views</StatLabel>
+          <StatValue>{views}</StatValue>
+        </StatItem>
+        <StatItem>
+          <StatLabel>Likes</StatLabel>
+          <StatValue>{likes}</StatValue>
+        </StatItem>
+      </Stat>
+    </Wrapper>
   );
 };

src/components/Profile/Profile.styled.js

@@ -1 +1,61 @@
 import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  margin: auto;
+  border-radius: 4px;
+  border: 1px solid lightskyblue;
+  width: 350px;
+  background-color: white;
+`;
+
+export const Description = styled.div`
+  text-align: center;
+  padding: 32px;
+  border: 1px solid lightskyblue;
+`;
+
+export const Avatar = styled.img`
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  margin: 0 auto;
+  border: 1px solid lightskyblue;
+`;
+
+export const Name = styled.div`
+  color: skyblue;
+  margin-top: 16px;
+  font-weight: bold;
+  font-size: 24px;
+`;
+
+export const Info = styled.div`
+  margin-top: 12px;
+  font-size: 18px;
+  color: skyblue;
+  font-size: 16px;
+  margin-bottom: 10px;
+`;
+
+export const Stat = styled.ul`
+  display: flex;
+`;
+
+export const StatItem = styled.li`
+  flex-basis: calc(100% / 3);
+  text-align: center;
+  background-color: lightskyblue;
+  border: 1px solid lightskyblue;
+`;
+
+export const StatLabel = styled.p`
+  margin-top: 16px;
+  margin-bottom: 4px;
+  color: white;
+`;
+
+export const StatValue = styled.p`
+  color: whitesmoke;
+  font-weight: bold;
+  margin-bottom: 16px;
+`;

src/index.css

@@ -1,15 +1 @@
-@import-normalize; /* bring in normalize.css styles */
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@import-normalize;

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from 'components/App';
+import './components/Globalstyle.js';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(