ادامه کار | ساعت کاری را در ایشو هایی که درست کردم میزارم از این به بعد

master
mahdi andalib 2 years ago
parent e8f62a62cb
commit 8da03b02ea
  1. 3
      public/images/blue-correct-thick-icon.svg
  2. 10
      src/components/Modal/index.js
  3. 74
      src/components/Tabbar/index.js

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.021" height="13.396" viewBox="0 0 15.021 13.396">
<path id="Vector" d="M-.8,5.717,2.918,10.4,10.713,0" transform="translate(2.558 1.75)" fill="none" stroke="#3c58ea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
</svg>

After

Width:  |  Height:  |  Size: 293 B

@ -1,6 +1,7 @@
import React, { useState } from "react";
import Button from "../Button";
import Tabbar from "../Tabbar";
import FormInput from "../FormInput";
const Modal = () => {
@ -24,16 +25,19 @@ const Modal = () => {
`}
>
<div
className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-5"
className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-3"
onClick={(e) => e.stopPropagation()}
>
<Button
className="bg-[#D11B1B] w-fit p-1.5 rounded-sm self-end"
className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm"
text={false}
icon={"images/white-cancel.svg"}
iconHolderClassName={"mr-0"}
onClick={() => setOpenModal(false)}
/>
<FormInput />
<Tabbar />
{/* <FormInput /> */}
</div>
</div>
</div>

@ -0,0 +1,74 @@
import React, { useState } from "react";
import Button from "../Button";
const Tabbar = ({ tabs }) => {
const [activeTab, setActiveTab] = useState();
return (
<div className="flex flex-col mt-7">
<div className="flex items-center">
{tabs.map((tab, index) => (
<Button
key={index}
text={tab.title}
className={`${tab.className} ${
activeTab === tab
? "bg-[#F1F3FF] text-[#3C58EA]"
: "bg-white text-[#333333]"
} w-full p-3 text-sm font-bold border border-b-2 border-t-2 border-[#3C58EA]`}
icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""}
onClick={() => setActiveTab(tab)}
/>
))}
</div>
<div
className={`rounded w-full text-white flex items-center mt-5 ${activeTab?.bg}`}
>
{activeTab?.components}
</div>
</div>
);
};
export default Tabbar;
Tabbar.defaultProps = {
tabs: [
{
title: "تنظیمات",
className: "rounded-tr-md rounded-br-md border-r-2",
components: "mahdi",
bg: "bg-blue-500",
},
{
title: "سوالات",
className: "",
components: "iran",
bg: "bg-blue-500",
},
{
title: "چک لیست",
className: "",
components: "zlatan",
bg: "bg-blue-500",
},
{
title: "مکاتبات",
className: "",
components: "mahdii",
bg: "bg-blue-500",
},
{
title: "توابع",
className: "",
components: "mahdiii",
bg: "bg-blue-500",
},
{
title: "شرایط و اجرا",
className: "rounded-tl-md rounded-bl-md border-l-2",
components: "mahdiii",
bg: "bg-blue-500",
},
],
};
Loading…
Cancel
Save