update src/components/Datepicker/CalenderList/index.js

master
mahdi 2 years ago
parent 9dfbf3bc43
commit 8a36e3a711
  1. 11
      public/images/CalenderListGroup2495.svg
  2. 11
      public/images/CalenderListGroup2496.svg
  3. 17
      src/components/Datepicker/CalenderList/index.js

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<g id="Group_2495" data-name="Group 2495" transform="translate(-975 -14)">
<rect id="Rectangle_941" data-name="Rectangle 941" width="54" height="54" rx="6" transform="translate(1029 68) rotate(180)" fill="#f8f8f8"/>
<g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(1378 305) rotate(180)">
<g id="arrow-left">
<path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(371.902 256.08)" fill="none" stroke="#4878e6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(388 276) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 843 B

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<g id="Group_2496" data-name="Group 2496" transform="translate(-906 -14)">
<rect id="Rectangle_940" data-name="Rectangle 940" width="54" height="54" rx="6" transform="translate(906 14)" fill="#f8f8f8"/>
<g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(557 -223)">
<g id="arrow-left">
<path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(371.902 256.08)" fill="none" stroke="#4878e6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(388 276) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 818 B

@ -3,18 +3,20 @@ import React from "react";
import Calender from "../Calender"; import Calender from "../Calender";
import Button from "../../ButtonDesign/Button/"; import Button from "../../ButtonDesign/Button/";
const CalenderList = ({ buttons }) => { const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
return ( return (
<div className="flex flex-col bg-white"> <div className="flex flex-col bg-white mx-auto">
<div className="w-[96%] mx-auto flex flex-row "> <div className="w-[96%] mx-auto flex flex-row items-center">
{/* right side */} {/* right side */}
<div className=" flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse"> <div className=" flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse">
{/* right side */} {/* right side */}
<div className="flex px-4 flex-row text-primaryText"> <div className="flex flex-row items-center px-4 text-primaryText">
<span className="text-sm">خرداد</span> <img src={rightArrow} class="w-8" alt="right-arrow" />
<span className="text-sm mx-2">خرداد</span>
<img src={leftArrow} class="w-8" alt="left-arrow" />
</div> </div>
{/* left side */} {/* left side */}
<div className="flex px-4 flex-row"> <div className="flex px-4 flex-row items-center">
{buttons.map((button, i) => ( {buttons.map((button, i) => (
<Button <Button
key={i} key={i}
@ -47,6 +49,9 @@ const CalenderList = ({ buttons }) => {
export default CalenderList; export default CalenderList;
CalenderList.defaultProps = { CalenderList.defaultProps = {
leftArrow: "images/CalenderListGroup2496.svg",
rightArrow: "images/CalenderListGroup2495.svg",
buttons: [ buttons: [
{ {
title: "روز", title: "روز",

Loading…
Cancel
Save