update 7 files

master
mahdi 2 years ago
parent b04d6bda25
commit 0f568e8a3b
  1. 2
      src/App.js
  2. 18
      src/components/AnimatedInput/Input.js
  3. 16
      src/components/Button/index.js
  4. 2
      src/components/CancleIcon/index.js
  5. 161
      src/components/PopupCard/index.js
  6. 15
      src/components/TitleSubtitle/index.js

@ -95,6 +95,7 @@ import CustomToast2 from "./components/CustomToast2";
import ContactUsInfoCard from "./components/ContactUsInfoCard";
import RoomCardInfo from "./components/RoomCardInfo";
import FormInput from "./components/FormInput";
import OutlineTextarea from "./components/OutlineTextarea";
function App() {
return (
@ -203,6 +204,7 @@ function App() {
{/* ----------------------------$$$ start---------------------------- */}
{/* <OutlineInput /> */}
{/* <OutlineTextarea /> */}
{/* <CancleIcon /> */}
{/* <ProfilePicNextToEachOther /> */}
{/* ----------------------------$$$ end---------------------------- */}

@ -1,7 +1,4 @@
import React from "react";
import { useState } from "react";
import React, { useState } from "react";
import fixNumbers from "./fixNumbers";
const Input = ({
@ -18,6 +15,7 @@ const Input = ({
min,
register,
onClick,
icon,
}) => {
const [value, setValue] = useState(defaultValue);
console.log(value);
@ -25,9 +23,9 @@ const Input = ({
<div
onClick={onClick}
className={
"h-full w-full flex flex-row items-center rounded relative " +
"h-full w-full flex flex-row items-center rounded relative bg-[#F9F9F9] " +
borderClassname +
(value ? "bg-white border rounded" : "bg-transparent")
(value ? " bg-white border rounded " : " bg-white ")
}
>
<div
@ -64,12 +62,15 @@ const Input = ({
) : (
<textarea
{...register}
className={"rtl w-full h-full p-4 outline-0 resize-none"}
className={`rtl w-full h-full p-4 outline-0 resize-none text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${
!value ? "bg-[#F9F9F9] " : "bg-white"
}`}
onChange={(e) => setValue(e.target.value)}
>
{value}
</textarea>
)}
{icon && <img src={icon} alt="calender" className="ml-2" />}
</div>
);
};
@ -78,6 +79,7 @@ export default Input;
Input.defaultProps = {
inputClassname: "",
placeholderClass: "text-red-600",
placeholderClass: "text-[#bdc3c7]",
activePlaceholderClass: "text-blue-600 bg-white",
icon: false,
};

@ -1,5 +1,12 @@
import React from "react";
const Button = ({ className, iconClassName, icon, text, onClick }) => {
const Button = ({
className,
iconClassName,
iconHolderClassName,
icon,
text,
onClick,
}) => {
return (
<button
onClick={onClick}
@ -7,8 +14,8 @@ const Button = ({ className, iconClassName, icon, text, onClick }) => {
>
{text}
{icon && (
<span className={`${iconClassName}`}>
<img src={icon} alt="" className="w-full" />
<span className={`${iconHolderClassName}`}>
<img src={icon} alt="" className={`${iconClassName}`} />
</span>
)}
</button>
@ -19,6 +26,7 @@ export default Button;
Button.defaultProps = {
className:
"bg-red-400 text-white hover:bg-gray-900 border border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4",
iconClassName: "bg-darkGreenBg mr-2",
iconHolderClassName: "bg-darkGreenBg mr-2",
iconClassName: "w-4",
text: "اطلاعات بیشتر",
};

@ -9,7 +9,7 @@ const CancleIcon = ({ backgroundColor, icon }) => {
data-modal-toggle="defaultModal"
className={`p-2 cursor-pointer rounded ${backgroundColor}`}
>
<img src={icon} className="w-4" />
<img src={icon} className="w-4" alt="cancel-icon" />
</div>
);
};

@ -4,20 +4,19 @@ import React, { useState } from "react";
import { useForm } from "react-hook-form";
import Input from "../AnimatedInput/Input";
import CancleIcon from "../CancleIcon";
import Button from "../Button";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
import TitleSubtitle from "../TitleSubtitle";
import cancleIcon from "./cancle-icon.svg";
import calender from "./calender.svg";
import cancleIcon from "./cancle-icon.svg";
import documentCloud from "./document-cloud.svg";
import plus from "./plus.svg";
import OutlineInput from "../OutlineInput";
import OutlineTextarea from "../OutlineTextarea";
import ButtonNewDesign from "../ButtonNewDesign";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
import plus from "./plus.svg";
const PopupCard = ({ selectedChecklist }) => {
const PopupCard = ({ selectedChecklist, buttons }) => {
// const [activeInput, setActiveInput] = useState(false);
const [checklist, setChecklist] = useState(0);
@ -48,37 +47,44 @@ const PopupCard = ({ selectedChecklist }) => {
{/* modalBody */}
<div className="mx-5">
{/* top */}
<div className="flex flex-row items-center justify-between divide-x-2 divide-[#DBDBDB77] divide-x-reverse ">
<div className="flex flex-row items-center justify-between divide-x-2 divide-[#DBDBDB77] divide-x-reverse">
{/* right */}
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-2">
<Input
register={register("firstName")}
label="نام "
type="text"
borderClassname={`border-2 border-[#06BACE] `}
inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
activePlaceholderClass={"text-[#06BACE] bg-white"}
/>
</div>
{/* left */}
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-2">
<Input
register={register("firstName")}
label="نام "
label="تقویم"
type="text"
icon={calender}
borderClassname={`border-2 border-[#06BACE] `}
inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
activePlaceholderClass={"text-[#06BACE] bg-white"}
/>
</div>
</div>
{/* divider */}
<div className="border border-[#DBDBDB77] rounded my-5"></div>
<div className="border border-[#DBDBDB77] rounded my-5 px-2"></div>
{/* middle */}
<div className="flex flex-row pb-4">
<div className="flex flex-row items-start justify-between divide-x-2 divide-[#DBDBDB77] divide-x-reverse pb-5">
{/* right */}
<div className="flex flex-col w-1/2">
<OutlineTextarea
outlineTitle={"نام کارت"}
outlineTitleClr={"#06BACE"}
<div className="flex flex-col flex-grow flex-1 gap-y-4 px-2">
<Input
register={register("firstName")}
label="نام "
type="textarea"
borderClassname={`border-2 border-[#06BACE] `}
inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
activePlaceholderClass={"text-[#06BACE] bg-white"}
/>
<div className="flex flex-col">
{/* checkLIst input field */}
@ -103,7 +109,14 @@ const PopupCard = ({ selectedChecklist }) => {
<span>%</span>
</div>
</div>
<OutlineTextarea outline={false} text={""} />
<Input
register={register("firstName")}
label="نام "
type="textarea"
borderClassname={`border-2 border-[#06BACE] `}
inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
activePlaceholderClass={"text-[#06BACE] bg-white"}
/>{" "}
{selectedChecklist.slice(0, 3).map((item, index) => (
<div key={index} className="">
<input
@ -121,78 +134,38 @@ const PopupCard = ({ selectedChecklist }) => {
))}
</div>
</div>
{/* divider */}
<div className="border border-[#DBDBDB77] rounded mx-5"></div>
{/* left */}
<div className="w-1/2 flex flex-col items-start">
<span className="text-xs text-[#B3B3B3] mb-3 text-light ">
افراد عضو این کارت
</span>
<div className="flex flex-row items-center justify-between w-full">
<div className="flex flex-col flex-grow flex-1 px-2">
<TitleSubtitle
title={false}
subTitle={"افراد عضو این کارت"}
subtitleBorderClassName={""}
subtitleClassName={"text-[#B3B3B3]"}
/>
<div className="flex flex-row items-center justify-between mt-3">
<ProfilePicNextToEachOther />
<ButtonNewDesign
bgColor={"bg-[#06BACE]"}
bgHoverColor={"hover:bg-[#06BACE99]"}
textColor={"text-white"}
border={"border-none"}
borderRadius={"rounded"}
fontSize={"text-xs"}
paddingX={"p-3"}
paddingY={"p-3"}
icon={false}
<Button
text={"دعوت فرد جدید"}
className="bg-[#06BACE] text-white text-xs rounded-sm p-2"
/>
</div>
{/* divider */}
<div className="border border-[#DBDBDB77] rounded my-5 w-full"></div>
<span className="text-xs text-[#B3B3B3] mb-3 text-light ">
لیبل های کارت
</span>
<div className="flex flex-row flex-wrap items-center gap-2">
<ButtonNewDesign
bgColor={"bg-[#08E678]"}
bgHoverColor={"hover:bg-[#08E67899]"}
textColor={"text-white"}
border={"border-none"}
borderRadius={"rounded"}
fontSize={"text-xs"}
paddingX={"p-3"}
paddingY={"p-3"}
icon={false}
text={"برنامه نویس اندروید"}
/>
<ButtonNewDesign
bgColor={"bg-[#1100FF]"}
bgHoverColor={"hover:bg-[#1100FF99]"}
textColor={"text-white"}
border={"border-none"}
borderRadius={"rounded"}
fontSize={"text-xs"}
paddingX={"p-3"}
paddingY={"p-3"}
icon={false}
text={"رابط کاربری"}
/>
<ButtonNewDesign
bgColor={"bg-[#FFE600]"}
bgHoverColor={"hover:bg-[#FFE60099]"}
textColor={"text-white"}
border={"border-none"}
borderRadius={"rounded"}
fontSize={"text-xs"}
paddingX={"p-3"}
paddingY={"p-3"}
icon={false}
text={"فرایند قانونگذاری"}
/>
<div className="bg-[#dddddd] py-1 px-2 rounded cursor-pointer">
<img
src={plus}
className="w-full"
style={{ marginTop: "-2px" }}
alt=""
<div className="border border-[#DBDBDB77] rounded my-3 w-full"></div>
<TitleSubtitle
title={false}
subTitle={"لیبل های کارت"}
subtitleBorderClassName={""}
subtitleClassName={"text-[#B3B3B3]"}
/>
<div className="flex flex-row flex-wrap items-center gap-2 mt-3">
{buttons.map((btn) => (
<Button
className={`${btn.className} text-xs text-white rounded p-2`}
iconHolderClassName={""}
text={btn.name}
icon={btn.icon}
/>
</div>
))}
</div>
{/* divider */}
<div className="border border-[#DBDBDB77] rounded my-5 w-full"></div>
@ -239,6 +212,26 @@ PopupCard.defaultProps = {
title: "خرید شماره 3",
},
],
buttons: [
{
name: "برنامه نویس اندروید",
className: "bg-[#08E678]",
},
{
name: "رابط کاربری",
className: "bg-[#1100FF]",
},
{
name: "فرایند قانونگذاری",
className: "bg-[#FFE600]",
},
{
name: null,
className: "bg-[#dddddd]",
icon: calender,
},
],
};
{

@ -5,21 +5,23 @@ const TitleSubtitle = ({
subTitle,
titleClassName,
titleBorderClassName,
subtitleClassName,
subtitleBorderClassName,
}) => {
return (
<div className="">
{/* page Title */}
{title && (
<div className="flex flex-row items-center">
<div className="flex flex-row items-center mb-3">
<div className={`rounded-sm ${titleBorderClassName}`}></div>
<h2 className={`${titleClassName} text-sm`}>{title}</h2>
<h2 className={`${titleClassName}`}>{title}</h2>
</div>
)}
{/* page subTitle */}
{subTitle && (
<div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-xs">{subTitle}</h2>
<div className="flex flex-row items-center">
<div className={`rounded ml-1 ${subtitleBorderClassName}`}></div>
<p className={`text-xs ${subtitleClassName}`}>{subTitle}</p>
</div>
)}
</div>
@ -33,4 +35,7 @@ TitleSubtitle.defaultProps = {
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
titleClassName: "text-base font-normal text-[#233876]",
titleBorderClassName: "w-1 h-5 bg-blue-600 ml-1",
subtitleClassName: "text-gray-900",
subtitleBorderClassName: "w-1 h-5 bg-gray-400",
};

Loading…
Cancel
Save