first commit
This commit is contained in:
kandrusyak
123
src/partials/analytics/AnalyticsCard01.jsx
Normal file
123
src/partials/analytics/AnalyticsCard01.jsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import LineChart from '../../charts/LineChart03';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig, hexToRGB } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard01() {
|
||||
|
||||
const chartData = {
|
||||
labels: [
|
||||
'12-01-2020', '01-01-2021', '02-01-2021',
|
||||
'03-01-2021', '04-01-2021', '05-01-2021',
|
||||
'06-01-2021', '07-01-2021', '08-01-2021',
|
||||
'09-01-2021', '10-01-2021', '11-01-2021',
|
||||
'12-01-2021', '01-01-2022', '02-01-2022',
|
||||
'03-01-2022', '04-01-2022', '05-01-2022',
|
||||
'06-01-2022', '07-01-2022', '08-01-2022',
|
||||
'09-01-2022', '10-01-2022', '11-01-2022',
|
||||
'12-01-2022', '01-01-2023',
|
||||
],
|
||||
datasets: [
|
||||
// Indigo line
|
||||
{
|
||||
label: 'Current',
|
||||
data: [
|
||||
5000, 8700, 7500, 12000, 11000, 9500, 10500,
|
||||
10000, 15000, 9000, 10000, 7000, 22000, 7200,
|
||||
9800, 9000, 10000, 8000, 15000, 12000, 11000,
|
||||
13000, 11000, 15000, 17000, 18000,
|
||||
],
|
||||
fill: true,
|
||||
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
|
||||
borderColor: tailwindConfig().theme.colors.indigo[500],
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
clip: 20,
|
||||
},
|
||||
// Gray line
|
||||
{
|
||||
label: 'Previous',
|
||||
data: [
|
||||
8000, 5000, 6500, 5000, 6500, 12000, 8000,
|
||||
9000, 8000, 8000, 12500, 10000, 10000, 12000,
|
||||
11000, 16000, 12000, 10000, 10000, 14000, 9000,
|
||||
10000, 15000, 12500, 14000, 11000,
|
||||
],
|
||||
borderColor: tailwindConfig().theme.colors.slate[300],
|
||||
fill: false,
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full xl:col-span-8 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100 flex items-center">
|
||||
<h2 className="font-semibold text-slate-800">Analytics</h2>
|
||||
</header>
|
||||
<div className="px-5 py-1">
|
||||
<div className="flex flex-wrap">
|
||||
{/* Unique Visitors */}
|
||||
<div className="flex items-center py-2">
|
||||
<div className="mr-5">
|
||||
<div className="flex items-center">
|
||||
<div className="text-3xl font-bold text-slate-800 mr-2">24.7K</div>
|
||||
<div className="text-sm font-medium text-emerald-500">+49%</div>
|
||||
</div>
|
||||
<div className="text-sm text-slate-500">Unique Visitors</div>
|
||||
</div>
|
||||
<div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
|
||||
</div>
|
||||
{/* Total Pageviews */}
|
||||
<div className="flex items-center py-2">
|
||||
<div className="mr-5">
|
||||
<div className="flex items-center">
|
||||
<div className="text-3xl font-bold text-slate-800 mr-2">56.9K</div>
|
||||
<div className="text-sm font-medium text-emerald-500">+7%</div>
|
||||
</div>
|
||||
<div className="text-sm text-slate-500">Total Pageviews</div>
|
||||
</div>
|
||||
<div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
|
||||
</div>
|
||||
{/* Bounce Rate */}
|
||||
<div className="flex items-center py-2">
|
||||
<div className="mr-5">
|
||||
<div className="flex items-center">
|
||||
<div className="text-3xl font-bold text-slate-800 mr-2">54%</div>
|
||||
<div className="text-sm font-medium text-amber-500">-7%</div>
|
||||
</div>
|
||||
<div className="text-sm text-slate-500">Bounce Rate</div>
|
||||
</div>
|
||||
<div className="hidden md:block w-px h-8 bg-slate-200 mr-5" aria-hidden="true"></div>
|
||||
</div>
|
||||
{/* Visit Duration*/}
|
||||
<div className="flex items-center">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<div className="text-3xl font-bold text-slate-800 mr-2">2m 56s</div>
|
||||
<div className="text-sm font-medium text-amber-500">+7%</div>
|
||||
</div>
|
||||
<div className="text-sm text-slate-500">Visit Duration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
<div className="grow">
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<LineChart data={chartData} width={800} height={300} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard01;
|
||||
139
src/partials/analytics/AnalyticsCard02.jsx
Normal file
139
src/partials/analytics/AnalyticsCard02.jsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import React from 'react';
|
||||
import LineChart from '../../charts/LineChart04';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig, hexToRGB } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard02() {
|
||||
|
||||
const chartData = {
|
||||
labels: [
|
||||
'12-01-2020', '01-01-2021', '02-01-2021',
|
||||
'03-01-2021', '04-01-2021', '05-01-2021',
|
||||
'06-01-2021', '07-01-2021', '08-01-2021',
|
||||
'09-01-2021', '10-01-2021', '11-01-2021',
|
||||
'12-01-2021', '01-01-2022', '02-01-2022',
|
||||
'03-01-2022', '04-01-2022', '05-01-2022',
|
||||
'06-01-2022', '07-01-2022', '08-01-2022',
|
||||
'09-01-2022', '10-01-2022', '11-01-2022',
|
||||
'12-01-2022', '01-01-2023',
|
||||
],
|
||||
datasets: [
|
||||
// Indigo line
|
||||
{
|
||||
data: [
|
||||
732, 610, 610, 504, 504, 504, 349,
|
||||
349, 504, 342, 504, 610, 391, 192,
|
||||
154, 273, 191, 191, 126, 263, 349,
|
||||
252, 423, 622, 470, 532,
|
||||
],
|
||||
fill: true,
|
||||
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
|
||||
borderColor: tailwindConfig().theme.colors.indigo[500],
|
||||
borderWidth: 2,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 3,
|
||||
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
clip: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Active Users Right Now</h2>
|
||||
</header>
|
||||
{/* Card content */}
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Live visitors number */}
|
||||
<div className="px-5 py-3">
|
||||
<div className="flex items-center">
|
||||
{/* Red dot */}
|
||||
<div className="relative flex items-center justify-center w-4 h-4 rounded-full bg-rose-100 mr-3" aria-hidden="true">
|
||||
<div className="absolute w-1.5 h-1.5 rounded-full bg-rose-500"></div>
|
||||
</div>
|
||||
{/* Vistors number */}
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-slate-800 mr-2">347</div>
|
||||
<div className="text-sm text-slate-500">Live visitors</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
<div >
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<LineChart data={chartData} width={389} height={70} />
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="grow px-5 pt-3 pb-1">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full">
|
||||
{/* Table header */}
|
||||
<thead className="text-xs uppercase text-slate-400">
|
||||
<tr>
|
||||
<th className="py-2">
|
||||
<div className="font-semibold text-left">Top pages</div>
|
||||
</th>
|
||||
<th className="py-2">
|
||||
<div className="font-semibold text-right">Active users</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{/* Table body */}
|
||||
<tbody className="text-sm divide-y divide-slate-100">
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="py-2">
|
||||
<div className="text-left">preview.cruip.com/open-pro/</div>
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<div className="font-medium text-right text-slate-800">94</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="py-2">
|
||||
<div className="text-left">preview.cruip.com/simple/</div>
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<div className="font-medium text-right text-slate-800">42</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="py-2">
|
||||
<div className="text-left">cruip.com/unlimited/</div>
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<div className="font-medium text-right text-slate-800">12</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="py-2">
|
||||
<div className="text-left">preview.cruip.com/twist/</div>
|
||||
</td>
|
||||
<td className="py-2">
|
||||
<div className="font-medium text-right text-slate-800">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card footer */}
|
||||
<div className="text-right px-5 pb-4">
|
||||
<Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Real-Time Report -></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard02;
|
||||
74
src/partials/analytics/AnalyticsCard03.jsx
Normal file
74
src/partials/analytics/AnalyticsCard03.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import BarChart from '../../charts/BarChart03';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard03() {
|
||||
|
||||
const chartData = {
|
||||
labels: [
|
||||
'12-01-2020', '01-01-2021', '02-01-2021',
|
||||
'03-01-2021', '04-01-2021', '05-01-2021',
|
||||
],
|
||||
datasets: [
|
||||
// Stack
|
||||
{
|
||||
label: 'Direct',
|
||||
data: [
|
||||
5000, 4000, 4000, 3800, 5200, 5100,
|
||||
],
|
||||
backgroundColor: tailwindConfig().theme.colors.indigo[700],
|
||||
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[800],
|
||||
barPercentage: 0.66,
|
||||
categoryPercentage: 0.66,
|
||||
},
|
||||
// Stack
|
||||
{
|
||||
label: 'Referral',
|
||||
data: [
|
||||
2500, 2600, 4000, 4000, 4800, 3500,
|
||||
],
|
||||
backgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
|
||||
barPercentage: 0.66,
|
||||
categoryPercentage: 0.66,
|
||||
},
|
||||
// Stack
|
||||
{
|
||||
label: 'Organic Search',
|
||||
data: [
|
||||
2300, 2000, 3100, 2700, 1300, 2600,
|
||||
],
|
||||
backgroundColor: tailwindConfig().theme.colors.indigo[300],
|
||||
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[400],
|
||||
barPercentage: 0.66,
|
||||
categoryPercentage: 0.66,
|
||||
},
|
||||
// Stack
|
||||
{
|
||||
label: 'Social',
|
||||
data: [
|
||||
4800, 4200, 4800, 1800, 3300, 3500,
|
||||
],
|
||||
backgroundColor: tailwindConfig().theme.colors.indigo[100],
|
||||
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[200],
|
||||
barPercentage: 0.66,
|
||||
categoryPercentage: 0.66,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100 flex items-center">
|
||||
<h2 className="font-semibold text-slate-800">Acquisition Channels</h2>
|
||||
</header>
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<BarChart data={chartData} width={595} height={248} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard03;
|
||||
49
src/partials/analytics/AnalyticsCard04.jsx
Normal file
49
src/partials/analytics/AnalyticsCard04.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import BarChart from '../../charts/BarChart04';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard04() {
|
||||
|
||||
const chartData = {
|
||||
labels: [
|
||||
'02-01-2021', '03-01-2021', '04-01-2021', '05-01-2021',
|
||||
],
|
||||
datasets: [
|
||||
// Blue bars
|
||||
{
|
||||
label: 'New Visitors',
|
||||
data: [
|
||||
8000, 3800, 5350, 7800,
|
||||
],
|
||||
backgroundColor: tailwindConfig().theme.colors.indigo[500],
|
||||
hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
|
||||
categoryPercentage: 0.66,
|
||||
},
|
||||
// Light blue bars
|
||||
{
|
||||
label: 'Returning Visitors',
|
||||
data: [
|
||||
4000, 6500, 2200, 5800,
|
||||
],
|
||||
backgroundColor: tailwindConfig().theme.colors.sky[400],
|
||||
hoverBackgroundColor: tailwindConfig().theme.colors.sky[500],
|
||||
categoryPercentage: 0.66,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Audience Overview</h2>
|
||||
</header>
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<BarChart data={chartData} width={595} height={248} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard04;
|
||||
96
src/partials/analytics/AnalyticsCard05.jsx
Normal file
96
src/partials/analytics/AnalyticsCard05.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function AnalyticsCard05() {
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Top Channels</h2>
|
||||
</header>
|
||||
<div className="grow p-3">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Card content */}
|
||||
<div className="grow">
|
||||
<ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
|
||||
<li>Source</li>
|
||||
<li>Visitors</li>
|
||||
</ul>
|
||||
|
||||
<ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '82%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Google</div>
|
||||
<div className="font-medium">4.7K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '70%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Indiehackers.com</div>
|
||||
<div className="font-medium">4.2K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '60%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>DuckDuckGo</div>
|
||||
<div className="font-medium">3.4K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '44%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Hacker News</div>
|
||||
<div className="font-medium">3.1K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '40%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Github.com</div>
|
||||
<div className="font-medium">2.2K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '30%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Madewithvuejs.com</div>
|
||||
<div className="font-medium">1.7K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '22%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Producthunt.com</div>
|
||||
<div className="font-medium">924</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-indigo-100" aria-hidden="true" style={{width: '12%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>Dev.to</div>
|
||||
<div className="font-medium">696</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Card footer */}
|
||||
<div className="text-center pt-4 pb-1 border-t border-slate-100">
|
||||
<Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Channels Report -></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard05;
|
||||
96
src/partials/analytics/AnalyticsCard06.jsx
Normal file
96
src/partials/analytics/AnalyticsCard06.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function AnalyticsCard06() {
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Top Pages</h2>
|
||||
</header>
|
||||
<div className="grow p-3">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Card content */}
|
||||
<div className="grow">
|
||||
<ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
|
||||
<li>Source</li>
|
||||
<li>Pageviews</li>
|
||||
</ul>
|
||||
|
||||
<ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '82%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>cruip.com/</div>
|
||||
<div className="font-medium">28K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '70%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>preview.cruip.com/open-pro/</div>
|
||||
<div className="font-medium">12K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '60%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>preview.cruip.com/appy/</div>
|
||||
<div className="font-medium">9.7K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '44%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>cruip.com/unlimited/</div>
|
||||
<div className="font-medium">9.2K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '40%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>preview.cruip.com/simple/</div>
|
||||
<div className="font-medium">7K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '30%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>cruip.com/about-us/</div>
|
||||
<div className="font-medium">6.4K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '22%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>docs.cruip.com/</div>
|
||||
<div className="font-medium">5.4K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-emerald-100" aria-hidden="true" style={{width: '12%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>preview.cruip.com/twist/</div>
|
||||
<div className="font-medium">2.2K</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Card footer */}
|
||||
<div className="text-center pt-4 pb-1 border-t border-slate-100">
|
||||
<Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Page Report -></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard06;
|
||||
96
src/partials/analytics/AnalyticsCard07.jsx
Normal file
96
src/partials/analytics/AnalyticsCard07.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function AnalyticsCard07() {
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Top Countries</h2>
|
||||
</header>
|
||||
<div className="grow p-3">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Card content */}
|
||||
<div className="grow">
|
||||
<ul className="flex justify-between text-xs uppercase text-slate-400 font-semibold px-2 space-x-2">
|
||||
<li>Source</li>
|
||||
<li>Sessions</li>
|
||||
</ul>
|
||||
|
||||
<ul className="space-y-1 text-sm text-slate-800 mt-3 mb-4">
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '82%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇨🇮 Ireland</div>
|
||||
<div className="font-medium">4.2K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '70%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇺🇸 United States</div>
|
||||
<div className="font-medium">3.4K</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '60%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇩🇪 Germany</div>
|
||||
<div className="font-medium">1.6k</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '44%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇮🇹 Italy</div>
|
||||
<div className="font-medium">1.2k</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '40%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇬🇧 United Kingdom</div>
|
||||
<div className="font-medium">912</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '30%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇫🇷 France</div>
|
||||
<div className="font-medium">677</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '22%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇮🇳 India</div>
|
||||
<div className="font-medium">449</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Item */}
|
||||
<li className="relative px-2 py-1">
|
||||
<div className="absolute inset-0 bg-sky-100" aria-hidden="true" style={{width: '12%'}}></div>
|
||||
<div className="relative flex justify-between space-x-2">
|
||||
<div>🇸🇬 Singapore</div>
|
||||
<div className="font-medium">269</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Card footer */}
|
||||
<div className="text-center pt-4 pb-1 border-t border-slate-100">
|
||||
<Link className="text-sm font-medium text-indigo-500 hover:text-indigo-600" to="#0">Countries Report -></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard07;
|
||||
44
src/partials/analytics/AnalyticsCard08.jsx
Normal file
44
src/partials/analytics/AnalyticsCard08.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import DoughnutChart from '../../charts/DoughnutChart';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard08() {
|
||||
|
||||
const chartData = {
|
||||
labels: ['Desktop', 'Mobile', 'Tablet'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sessions By Device',
|
||||
data: [
|
||||
12, 50, 38,
|
||||
],
|
||||
backgroundColor: [
|
||||
tailwindConfig().theme.colors.indigo[500],
|
||||
tailwindConfig().theme.colors.sky[400],
|
||||
tailwindConfig().theme.colors.indigo[800],
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
tailwindConfig().theme.colors.indigo[600],
|
||||
tailwindConfig().theme.colors.sky[500],
|
||||
tailwindConfig().theme.colors.indigo[900],
|
||||
],
|
||||
hoverBorderColor: tailwindConfig().theme.colors.white,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Sessions By Device</h2>
|
||||
</header>
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<DoughnutChart data={chartData} width={389} height={260} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard08;
|
||||
46
src/partials/analytics/AnalyticsCard09.jsx
Normal file
46
src/partials/analytics/AnalyticsCard09.jsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import DoughnutChart from '../../charts/DoughnutChart';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard09() {
|
||||
|
||||
const chartData = {
|
||||
labels: ['<18', '18-24', '24-36', '>35'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Visit By Age Category',
|
||||
data: [
|
||||
30, 50, 5, 15,
|
||||
],
|
||||
backgroundColor: [
|
||||
tailwindConfig().theme.colors.indigo[500],
|
||||
tailwindConfig().theme.colors.sky[400],
|
||||
tailwindConfig().theme.colors.rose[500],
|
||||
tailwindConfig().theme.colors.emerald[500],
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
tailwindConfig().theme.colors.indigo[600],
|
||||
tailwindConfig().theme.colors.sky[500],
|
||||
tailwindConfig().theme.colors.rose[600],
|
||||
tailwindConfig().theme.colors.emerald[600],
|
||||
],
|
||||
hoverBorderColor: tailwindConfig().theme.colors.white,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Sessions By Age</h2>
|
||||
</header>
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<DoughnutChart data={chartData} width={389} height={260} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard09;
|
||||
44
src/partials/analytics/AnalyticsCard10.jsx
Normal file
44
src/partials/analytics/AnalyticsCard10.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import PolarChart from '../../charts/PolarChart';
|
||||
|
||||
// Import utilities
|
||||
import { tailwindConfig, hexToRGB } from '../../utils/Utils';
|
||||
|
||||
function AnalyticsCard10() {
|
||||
|
||||
const chartData = {
|
||||
labels: ['Males', 'Females', 'Unknown'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sessions By Gender',
|
||||
data: [
|
||||
500, 326, 242,
|
||||
],
|
||||
backgroundColor: [
|
||||
`rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[500])}, 0.8)`,
|
||||
`rgba(${hexToRGB(tailwindConfig().theme.colors.sky[400])}, 0.8)`,
|
||||
`rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[500])}, 0.8)`,
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
`rgba(${hexToRGB(tailwindConfig().theme.colors.indigo[600])}, 0.8)`,
|
||||
`rgba(${hexToRGB(tailwindConfig().theme.colors.sky[500])}, 0.8)`,
|
||||
`rgba(${hexToRGB(tailwindConfig().theme.colors.emerald[600])}, 0.8)`,
|
||||
],
|
||||
hoverBorderColor: tailwindConfig().theme.colors.white,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Sessions By Gender</h2>
|
||||
</header>
|
||||
{/* Chart built with Chart.js 3 */}
|
||||
{/* Change the height attribute to adjust the chart height */}
|
||||
<PolarChart data={chartData} width={389} height={260} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard10;
|
||||
280
src/partials/analytics/AnalyticsCard11.jsx
Normal file
280
src/partials/analytics/AnalyticsCard11.jsx
Normal file
@@ -0,0 +1,280 @@
|
||||
import React from 'react';
|
||||
|
||||
import Image01 from '../../images/user-28-01.jpg';
|
||||
import Image02 from '../../images/user-28-02.jpg';
|
||||
import Image03 from '../../images/user-28-03.jpg';
|
||||
import Image04 from '../../images/user-28-04.jpg';
|
||||
import Image05 from '../../images/user-28-05.jpg';
|
||||
import Image06 from '../../images/user-28-06.jpg';
|
||||
import Image07 from '../../images/user-28-07.jpg';
|
||||
import Image09 from '../../images/user-28-09.jpg';
|
||||
import Image11 from '../../images/user-28-11.jpg';
|
||||
|
||||
function AnalyticsCard11() {
|
||||
return (
|
||||
<div className="col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
|
||||
<header className="px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-800">Top Products</h2>
|
||||
</header>
|
||||
<div className="p-3">
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full">
|
||||
{/* Table header */}
|
||||
<thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
|
||||
<tr>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-left">Product</div>
|
||||
</th>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-left">Created by</div>
|
||||
</th>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-left">Category</div>
|
||||
</th>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-center">Total impressions</div>
|
||||
</th>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-center">Top country</div>
|
||||
</th>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-center">CR</div>
|
||||
</th>
|
||||
<th className="p-2 whitespace-nowrap">
|
||||
<div className="font-semibold text-left">Value</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{/* Table body */}
|
||||
<tbody className="text-sm divide-y divide-slate-100">
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
|
||||
<svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
|
||||
<path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="font-medium text-slate-800">Form Builder CP</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image01} width="28" height="28" alt="User 01" />
|
||||
</a>
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image02} width="28" height="28" alt="User 02" />
|
||||
</a>
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image03} width="28" height="28" alt="User 03" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
|
||||
</svg>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">20,929</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-lg text-center">🇺🇸</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">27.4%</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-left font-medium text-emerald-500">$12,499.77</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-emerald-500">
|
||||
<svg className="w-9 h-9 fill-current text-emerald-50" viewBox="0 0 36 36">
|
||||
<path d="M11 22.012a1 1 0 01-.707-1.707l4.5-4.5a1 1 0 011.414 0l3.293 3.293 4.793-4.793a1 1 0 111.414 1.414l-5.5 5.5a1 1 0 01-1.414 0L15.5 17.926l-3.793 3.793a1 1 0 01-.707.293z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="font-medium text-slate-800">Machine Learning A-Z</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image07} width="28" height="28" alt="User 07" />
|
||||
</a>
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image04} width="28" height="28" alt="User 04" />
|
||||
</a>
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image11} width="28" height="28" alt="User 11" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
|
||||
</svg>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">17,944</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-lg text-center">🇬🇧</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">22.6%</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-left font-medium text-emerald-500">$4,227.09</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-indigo-500">
|
||||
<svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
|
||||
<path d="M24.446 19.335a2.5 2.5 0 00-3.522 3.194c-.845.63-1.87.97-2.924.971a4.979 4.979 0 01-1.113-.135 4.436 4.436 0 01-1.343 1.682 6.91 6.91 0 006.9-1.165 2.5 2.5 0 002-4.547h.002zM20.431 11.938a2.5 2.5 0 10-.4 2.014 5.027 5.027 0 012.723 3.078c.148-.018.297-.028.446-.03a4.5 4.5 0 011.7.334 7.023 7.023 0 00-4.469-5.396zM14.969 20.25a2.49 2.49 0 00-1.932-1.234A4.624 4.624 0 0113 18.5a4.97 4.97 0 011.348-3.391 4.456 4.456 0 01-.788-2.016A6.989 6.989 0 0011 18.5c.003.391.04.781.11 1.166a2.5 2.5 0 103.859.584z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="font-medium text-slate-800">2021 Web Bootcamp</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image05} width="28" height="28" alt="User 05" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
|
||||
</svg>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">16,097</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-lg text-center">🇫🇷</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">22.4%</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-left font-medium text-emerald-500">$2,499.77</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-sky-500">
|
||||
<svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
|
||||
<path d="M18 26a8 8 0 118-8 8.009 8.009 0 01-8 8zm0-14a6 6 0 100 12 6 6 0 000-12z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="font-medium text-slate-800">Digital Marketing Course</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image06} width="28" height="28" alt="User 06" />
|
||||
</a>
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image11} width="28" height="28" alt="User 11" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
|
||||
</svg>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">12,996</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-lg text-center">🇮🇹</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">22.1%</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-left font-medium text-emerald-500">$2,224.09</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Row */}
|
||||
<tr>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="shrink-0 rounded-full mr-2 sm:mr-3 bg-rose-500">
|
||||
<svg className="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
|
||||
<circle cx="18" cy="18" r="3" />
|
||||
<path d="M13.05 24.363l-.707-.707a8 8 0 010-11.312l.707-.707 1.414 1.414-.707.707a6 6 0 000 8.484l.707.707-1.414 1.414zM22.95 24.363l-1.414-1.414.707-.707a6 6 0 000-8.484l-.707-.707 1.414-1.414.707.707a8 8 0 010 11.312l-.707.707z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="font-medium text-slate-800">Form Builder PRO</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex shrink-0 -space-x-3 -ml-px">
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image09} width="28" height="28" alt="User 09" />
|
||||
</a>
|
||||
<a className="block" href="#0">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Image01} width="28" height="28" alt="User 01" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
|
||||
</svg>
|
||||
<div>Subscription</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">7,097</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-lg text-center">🇩🇪</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-center">17.4%</div>
|
||||
</td>
|
||||
<td className="p-2 whitespace-nowrap">
|
||||
<div className="text-left font-medium text-emerald-500">$1,949.72</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnalyticsCard11;
|
||||
Reference in New Issue
Block a user