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

update 7 files

Browse Source
master
mahdi 3 years ago
parent b04d6bda25
commit 0f568e8a3b
6 changed files with 112 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

2
src/App.js
Unescape View File

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

18
src/components/AnimatedInput/Input.js
Unescape View File

@ -1,7 +1,4 @@
import React from "react"; import React, { useState } from "react";
import { useState } from "react";
import fixNumbers from "./fixNumbers"; import fixNumbers from "./fixNumbers";
const Input = ({ const Input = ({
@ -18,6 +15,7 @@ const Input = ({
min, min,
register, register,
onClick, onClick,
icon,
}) => { }) => {
const [value, setValue] = useState(defaultValue); const [value, setValue] = useState(defaultValue);
console.log(value); console.log(value);
@ -25,9 +23,9 @@ const Input = ({
<div <div
onClick={onClick} onClick={onClick}
className={ 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 + borderClassname +
(value ? "bg-white border rounded" : "bg-transparent") (value ? " bg-white border rounded " : " bg-white ")
} }
> >
<div <div
@ -64,12 +62,15 @@ const Input = ({
) : ( ) : (
<textarea <textarea
{...register} {...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)} onChange={(e) => setValue(e.target.value)}
> >
{value} {value}
</textarea> </textarea>
)} )}
{icon && <img src={icon} alt="calender" className="ml-2" />}
</div> </div>
); );
}; };
@ -78,6 +79,7 @@ export default Input;
Input.defaultProps = { Input.defaultProps = {
inputClassname: "", inputClassname: "",
placeholderClass: "text-red-600", placeholderClass: "text-[#bdc3c7]",
activePlaceholderClass: "text-blue-600 bg-white", activePlaceholderClass: "text-blue-600 bg-white",
icon: false,
}; };

16
src/components/Button/index.js
Unescape View File

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

2
src/components/CancleIcon/index.js
Unescape View File

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

161
src/components/PopupCard/index.js
Unescape View File

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

15
src/components/TitleSubtitle/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save