Skip to content
Snippets Groups Projects
Commit 2017948b authored by Prajakta Sathwane's avatar Prajakta Sathwane
Browse files

Merge branch 'feature/sharath/header' into 'feature/dushyanth'

Feature/sharath/header

See merge request prajakta.sathwane/sample_argon!5
parents 0ca84a20 e876702b
Branches
No related tags found
No related merge requests found
const content =[
{
id:1,
label: "PAGE NAME",
coustomClass: "/argon/",
item:"4,569",
user:"340",
rate:"46,53%"
},
{
id:2,
label: "VISITORS",
coustomClass: "/argon/index.html",
item:"3,985",
user:"319",
rate:"46,53%"
},
{
id:3,
label: "UNIQUE USERS",
coustomClass: "/argon/charts.html",
item:"3,513",
user:"294",
rate:"36,49%"
},
{
id:4,
label: "BOUNCE RATE",
coustomClass: "/argon/tables.html",
item:"2,050",
user:"147",
rate:"50,87%"
},
{
id:5,
label: "",
coustomClass: "/argon/profile.html",
item:"1,795",
user:"190",
rate:"46,53%"
},
]
const name = [
{
id: 1,
label: "PAGE NAME",
},
{
id: 2,
label: "VISITORS",
},
{
id: 3,
label: "UNIQUE USERS",
},
{
id: 4,
label: "BOUNCE RATE"
},
]
export {content, name};
\ No newline at end of file
import React from 'react' import React from 'react'
import { faArrowUp, faArrowDown} from "@fortawesome/free-solid-svg-icons"; import {content} from "./TableConstant"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import './table.scss' import './table.scss'
import { name } from './TableConstant'
function Table() { function Table(props) {
return ( return (
<div className="row"> <div className="row">
<div className="col-xl-8"> <div className="col-xl-8">
...@@ -19,97 +19,31 @@ function Table() { ...@@ -19,97 +19,31 @@ function Table() {
</div> </div>
</div> </div>
<div className="table-responsive"> <div className="table-responsive">
<table className="table align-items-center table-flush"> <table className="table align-items-center table-flush">
<thead className="thead-light"> <thead className="thead-light">
<tr> {name.map((Notified)=>(
<th scope="col">PAGE NAME</th> <th scope="col">{Notified.label}</th>
<th scope="col">VISITORS</th> )
<th scope="col">UNIQUE USERS</th> )}
<th scope="col">BOUNCE RATE</th>
</tr>
</thead> </thead>
<tbody> <tbody>
{content.map((Notified)=>(
<tr> <tr>
<th scope="row"> <th scope="row">
/argon/ {Notified.coustomClass}
</th> </th>
<td> <td>
4,569 {Notified.item}
</td> </td>
<td> <td>
340 {Notified.user}
</td> </td>
<td> <td>
{/* <i className="fas fa-arrow-up text-success mr-3"></i> */} <text className='nu'> {Notified.rate}</text>
<FontAwesomeIcon icon={faArrowUp} className='arrowup'/>
<text className='nu'>46,53%</text>
</td>
</tr>
<tr>
<th scope="row">
/argon/index.html
</th>
<td>
3,985
</td>
<td>
319
</td>
<td>
{/* <i className="fas fa-arrow-down text-warning mr-3"></i> */}
<FontAwesomeIcon icon={faArrowDown} className='arrowdown'/>
<text className='nu'>46,53%</text>
</td>
</tr>
<tr>
<th scope="row">
/argon/charts.html
</th>
<td>
3,513
</td>
<td>
294
</td>
<td>
{/* <i className="fas fa-arrow-down text-warning mr-3"></i> */}
<FontAwesomeIcon icon={faArrowDown} className='arrowdown'/>
<text className='nu'>36,49%</text>
</td>
</tr>
<tr>
<th scope="row">
/argon/tables.html
</th>
<td>
2,050
</td>
<td>
147
</td>
<td>
{/* <i className="fas fa-arrow-up text-success mr-3"></i> */}
<FontAwesomeIcon icon={faArrowUp} className='arrowup' />
<text className='nu'>50,87%</text>
</td>
</tr>
<tr>
<th scope="row">
/argon/profile.html
</th>
<td>
1,795
</td>
<td>
190
</td>
<td>
{/* <i className="fas fa-arrow-down text-danger mr-3"></i> */}
<FontAwesomeIcon icon={faArrowDown} className='danger'/>
<text className='nu'>46,53%</text>
</td> </td>
</tr> </tr>
)
)}
</tbody> </tbody>
</table> </table>
</div> </div>
......
...@@ -191,7 +191,6 @@ th { ...@@ -191,7 +191,6 @@ th {
.btn:hover { .btn:hover {
transform: translateY(-1px); transform: translateY(-1px);
// box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
} }
.btn-primary:hover { .btn-primary:hover {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment