card

94175415 · Shreenidhi Bhat · b2224be5 · 94175415 · 94175415 · 94175415
Commit 94175415 authored Jan 11, 2022 by Shreenidhi Bhat
--- a/public/index.html
+++ b/public/index.html
@@ -26,6 +26,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>React App</title>
  </head>
  <body>

--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
+.card{
+    width: 300px;
+    border-radius: 1rem;
+    }
+    .icon{
+    color: green;
+    }
+    .padding{
+    padding-left: 25px;
+    }
+    .icon-shape{
+    margin-left: 100px;
+    padding: 16px;
+    }
+
+
+
+
--- a/src/components/Card/index.jsx
+++ b/src/components/Card/index.jsx
-import React from 'react'
+import React from 'react';
+import './Card.scss';

 function Card(props){
-    const{}=props;
+   const{name,number,percentage,since,iconcolor}=props;
   
    return (
+      <div class="card">
      <div class="card-body">
      <div class="row">
        <div class="col">
-                      <h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
-                      <span class="h2 font-weight-bold mb-0">350,897</span>
+          <h5 class="card-title text-uppercase text-muted mb-0">{name}</h5>
+          <span class="h2 font-weight-bold mb-0">{number}</span>
        </div>
        <div class="col-auto">
-                      <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
-                        <i class="ni ni-active-40"></i>
+          <div class={`icon icon-shape bg-gradient-${iconcolor} text-white rounded-circle shadow`}>
+            <i class="fa fa-hand-o-up"></i>
          </div>
        </div>
      </div>
      <p class="mt-3 mb-0 text-sm">
-                    <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
-                    <span class="text-nowrap">Since last month</span>
+        <span class="text-success mr-2"><i class="fa fa-arrow-up"></i>{percentage}</span>
+        <span class="text-nowrap">{since}</span>
      </p>
    </div>
-    )
+    </div>
+    
+  );
 } 

-export default Card
+
+export default Card;
--- a/src/containers/Login/index.jsx
+++ b/src/containers/Login/index.jsx
 import React from "react";
-import PropTypes from "prop-types";
+import Card from '../../components/Card';

 function Login(props) {
-  return <div>
-    Login
-  </div>;
-}
-
+  return (

+     <div>
+       <Card name="TOTAL TRAFFIC" number="350.287" percentage="3.48" since="Since last month" iconcolor="red"/>
+     </div>
+  )
  
+}
 export default Login;