mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update src/components/Accordion/AccordionDesign1/index.js

Browse Source
master
mahdi 3 years ago
parent 12ccf71c01
commit 7f1f7bc3bd
6 changed files with 81 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      public/images/accordion+.svg
  2. 3
      public/images/accordion-.svg
  3. 13
      public/images/accordionGroup2723.svg
  4. 15
      public/images/accordionGroup2724.svg
  5. 6
      public/images/accordionGroup2725.svg
  6. 49
      src/components/Accordion/AccordionDesign1/index.js

3
public/images/accordion+.svg
Unescape View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="42" viewBox="0 0 16 42">
<text id="_" data-name="+" transform="translate(0 28)" fill="#21bb81" font-size="28" font-family="IRANSansXFaNum-Regular, IRANSansXFaNum"><tspan x="0" y="0">+</tspan></text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

3
public/images/accordion-.svg
Unescape View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="54" viewBox="0 0 10 54">
<text id="_-" data-name="-" transform="translate(0 36)" fill="#21bb81" font-size="36" font-family="IRANSansXFaNum-Regular, IRANSansXFaNum"><tspan x="0" y="0">-</tspan></text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

13
public/images/accordionGroup2723.svg
Unescape View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
<g id="Group_2723" data-name="Group 2723" transform="translate(-575 -1223)">
<rect id="Rectangle_1137" data-name="Rectangle 1137" width="47" height="47" rx="3" transform="translate(575 1223)" fill="#e6f5ef"/>
<g id="vuesax_linear_edit" data-name="vuesax/linear/edit" transform="translate(586 1234)">
<g id="edit" transform="translate(0 0)">
<path id="Vector" d="M9.721,0H7.561C2.16,0,0,2.16,0,7.561v6.481c0,5.4,2.16,7.561,7.561,7.561h6.481c5.4,0,7.561-2.16,7.561-7.561v-2.16" transform="translate(2.16 2.16)" fill="none" stroke="#0a4800" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M9.712,1.373,1.2,9.885A2.93,2.93,0,0,0,.487,11.31L.023,14.562A1.539,1.539,0,0,0,1.859,16.4l3.251-.464a3.025,3.025,0,0,0,1.426-.713l8.511-8.511c1.469-1.469,2.16-3.176,0-5.336S11.181-.1,9.712,1.373Z" transform="translate(7.614 1.889)" fill="none" stroke="#0a4800" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0A7.717,7.717,0,0,0,5.336,5.336" transform="translate(16.105 4.483)" fill="none" stroke="#0a4800" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H25.923V25.923H0Z" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
public/images/accordionGroup2724.svg
Unescape View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
<g id="Group_2724" data-name="Group 2724" transform="translate(-641 -1223)">
<rect id="Rectangle_1140" data-name="Rectangle 1140" width="47" height="47" rx="3" transform="translate(641 1223)" fill="#f6eaea"/>
<g id="vuesax_linear_trash" data-name="vuesax/linear/trash" transform="translate(652 1234)">
<g id="trash">
<path id="Vector" d="M19.442.54C15.846.184,12.227,0,8.619,0A63.8,63.8,0,0,0,2.2.324L0,.54" transform="translate(3.24 5.919)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,3.208.238,1.793C.41.767.54,0,2.366,0H5.2C7.021,0,7.161.81,7.323,1.8l.238,1.4" transform="translate(9.181 2.16)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M14.8,0l-.7,10.877c-.119,1.7-.216,3.014-3.23,3.014H3.932C.918,13.891.821,12.573.7,10.877L0,0" transform="translate(5.563 9.872)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H3.6" transform="translate(11.158 17.822)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,0H5.4" transform="translate(10.261 13.502)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H25.923V25.923H0Z" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
public/images/accordionGroup2725.svg
Unescape View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20.719" height="13.111" viewBox="0 0 20.719 13.111">
<g id="Group_2725" data-name="Group 2725" transform="translate(-1823.644 -1244)">
<line id="Line_401" data-name="Line 401" x1="17.719" transform="translate(1825.144 1245.5)" fill="none" stroke="#21bb81" stroke-linecap="round" stroke-width="3"/>
<line id="Line_402" data-name="Line 402" x1="17.719" transform="translate(1825.144 1255.611)" fill="none" stroke="#21bb81" stroke-linecap="round" stroke-width="3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 540 B

49
src/components/Accordion/AccordionDesign1/index.js
Unescape View File

@ -3,21 +3,54 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle";
const AccordionDesign1 = ({ items }) => {
return (
<section className="w-full flex flex-col p-4 bg-gray-300">
<section className="w-full flex flex-col ">
{/* header */}
{items.map((item, index) => (
<div className="flex flex-row items-center justify-between bg-red-50 border-b-4 border-secondaryLight">
<CircleInCircle
parentClassName={"bg-green-500 w-3 h-3 "}
childClassName={false}
/>
<h2 className="bg-blue-300 flex-1">{item.title}</h2>{" "}
<div className="flex flex-col" key={index}>
<div className="flex flex-row items-center justify-between px-3 py-5 border-b-2 border-secondary cursor-pointer">
<CircleInCircle
parentClassName={"bg-secondaryDark w-3 h-3 "}
childClassName={false}
/>
<h2 className="flex-1 mr-7 text-sm">{item.title}</h2>
<img src="images/accordion+.svg" alt="" class="w-3 ml-2" />
</div>
{item.subItems.map((subItem, i) => (
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer ">
<div className="flex flex-row items-center">
<img
src="images/accordionGroup2725.svg"
className="w-4"
alt="line"
/>
<span className="mr-3 text-sm">1</span>
</div>
<div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div>
<p className="text-sm flex-1">{subItem.name}</p>
<div className="flex flex-row items-center justify-end gap-x-3 flex-1">
<img
src="images/accordionGroup2724.svg"
className="w-8 rounded"
alt="delete-button"
/>
<img
src="images/accordionGroup2723.svg"
className="w-8 rounded"
alt="edit-button"
/>
</div>
</div>
))}
</div>
))}
</section>
);
};
// accordionGroup2723.svg
// accordionGroup2724.svg
// accordionGroup2725.svg
// accordion-.svg
// accordion+.svg
export default AccordionDesign1;
AccordionDesign1.defaultProps = {

Write Preview
Loading…
Cancel
Save