master
mahdi andalib 3 years ago
parent 2f766ce526
commit abdf98ccdb
  1. 2
      src/App.js
  2. 13
      src/components/ReactTable3/Buttons.js
  3. 11
      src/components/ReactTable3/EditButtons.js
  4. 10
      src/components/ReactTable3/search-normal.svg

@ -82,7 +82,7 @@ function App() {
{/* <AdvertisementDesign3 /> */} {/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */} {/* <CourseChapter /> */}
{/* <SidebarMenu /> */} {/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */} <SidebarDesign2 />
{/* <SimpleBarChart /> */} {/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */} {/* <SpecifiedDomainRadarChart /> */}
{/* <Design1 /> */} {/* <Design1 /> */}

@ -2,15 +2,24 @@ import arrowIcon from './arrow-icon.svg';
import more from './more.svg'; import more from './more.svg';
import edit from './edit.svg'; import edit from './edit.svg';
import { useState } from 'react';
export function Buttons({ }) { export function Buttons({ }) {
const [activeDetails, setActiveDetails] = useState(null);
return ( return (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<button className="flex flex-row items-center justify-around p-2 rounded border"> <button
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1"
onClick={ () => setActiveDetails(!activeDetails) }>
جزیات جزیات
<img src={arrowIcon} alt="" className="w-3 cursor-pointer mr-2" /> <img src={arrowIcon} alt="" className={`w-3 cursor-pointer mr-2 ${activeDetails ? "rotate-60" : "rotate-90"}`} />
</button> </button>
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
<img src={edit} alt="" className="w-4" />
</div>
<img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
</div> </div>
); );
} }

@ -1,9 +1,12 @@
import search from './search-normal.svg';
export function EditButtons({ }) { export function EditButtons({ }) {
return ( return (
<div className="bg-red-600 flex flex-row items-center"> <div className="flex flex-row items-center">
<button>جزیات</button> <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30">
<button>جزیات</button> <img src={search} alt="" className="w-6 cursor-pointer mr-2" />
<button>جزیات</button> </div>
</div> </div>
); );
} }

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="search-normal" transform="translate(-428 -188)">
<g id="Vector" transform="translate(430 190)" fill="none">
<path d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" stroke="none"/>
<path d="M 9.5 1.5 C 5.088789939880371 1.5 1.5 5.088789939880371 1.5 9.5 C 1.5 13.91121006011963 5.088789939880371 17.5 9.5 17.5 C 13.91121006011963 17.5 17.5 13.91121006011963 17.5 9.5 C 17.5 5.088789939880371 13.91121006011963 1.5 9.5 1.5 M 9.5 0 C 14.74670028686523 0 19 4.253290176391602 19 9.5 C 19 14.74670028686523 14.74670028686523 19 9.5 19 C 4.253290176391602 19 0 14.74670028686523 0 9.5 C 0 4.253290176391602 4.253290176391602 0 9.5 0 Z" stroke="none" fill="#65a9ff"/>
</g>
<path id="Vector-2" data-name="Vector" d="M2.552,3.252a.7.7,0,0,1-.49-.2L.2,1.192A.706.706,0,0,1,.2.2a.706.706,0,0,1,.99,0l1.86,1.86a.706.706,0,0,1,0,.99A.738.738,0,0,1,2.552,3.252Z" transform="translate(446.747 206.747)" fill="#65a9ff"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(452 212) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Loading…
Cancel
Save