master
mahdi andalib 3 years ago
parent 4ef61c878e
commit 6b343c2c77
  1. 6
      src/App.js
  2. 8
      src/components/ProductSalesAmount/Design1/home-trend-down.svg
  3. 6
      src/components/ProductSalesAmount/Design1/home-trend-up.svg
  4. 64
      src/components/ProductSalesAmount/Design1/index.js

@ -40,6 +40,7 @@ import SimpleBarChart from "./components/Chart/SimpleBarChart";
import Switch from "./components/Switch";
import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart";
import Design1 from "./components/ProductSalesAmount/Design1";
function App() {
return (
@ -78,8 +79,9 @@ function App() {
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */}
<SimpleBarChart />
<SpecifiedDomainRadarChart/>
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart/> */}
<Design1/>
</div>
</Provider>
);

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.821" height="8.621" viewBox="0 0 13.821 8.621">
<g id="vuesax_linear_home-trend-down" data-name="vuesax/linear/home-trend-down" transform="translate(1.061 1.061)">
<g id="home-trend-down">
<path id="Vector" d="M11.7,6.5,6.24,1.04,4.16,4.16,0,0" fill="none" stroke="#cf3912" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,2.6H2.6V0" transform="translate(9.1 3.9)" fill="none" stroke="#cf3912" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 617 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.758" height="8.586" viewBox="0 0 13.758 8.586">
<g id="home-trend-up" transform="translate(1.061 1.061)">
<path id="Vector" d="M11.637,0,6.206,5.43l-2.069-3.1L0,6.465" fill="none" stroke="#15bf4e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H2.586V2.586" transform="translate(9.051)" fill="none" stroke="#15bf4e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 525 B

@ -0,0 +1,64 @@
import React from 'react';
import arrowDown from './home-trend-down.svg';
import arrowUp from './home-trend-up.svg';
const Design1 = ({title,price,incomes}) => {
return <section className="my-20">
<div className="bg-white w-5/12 rounded shadow mx-auto py-7 px-4">
{/* title */}
<div className="flex flex-row items-center">
<div className="w-1 h-5 bg-blue-600 rounded ml-1"></div>
<h2 className="text-lg">{title}</h2>
</div>
{/* price */}
<p className="text-base mt-4 mr-3" style={{color:"#65A9FF"}}>{price}<span className="mr-1">تومان</span></p>
{/* card */}
<div className="flex flex-row items-center mt-4">
{incomes.map((income,index) => (
<div className="flex flex-col p-4 border-l border-gray-200">
<p className="text-base">{income.name}</p>
<p className="text-lg font-bold text-center my-2">{income.income}</p>
<div className="bg-green-100 my-2 p-1 flex flex-row items-center justify-around self-end rounded w-16">
<span className="font-bold text-sm text-green-500">{income.percent}</span>
<img src={income.logo} alt="" />
</div>
<p className="text-xs leading-6 text-justify mt-2">{income.excerpt}</p>
</div>
))}
</div>
</div>
</section>;
};
export default Design1;
Design1.defaultProps = {
title: 'میزان فروش محصولات',
price: '196.209.810',
incomes: [
{
name: 'درآمد امروز',
income:'138.916.431',
percent: '+12',
logo: arrowUp,
excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
{
name: 'درآمد روز گذشته',
income:'651.098.311',
percent: '-0.5',
logo: arrowUp,
excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
{
name: 'درآمد این هفته',
income:'890.325.308',
percent: '+12',
logo: arrowUp,
excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
]
}
Loading…
Cancel
Save