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
Split 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 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---------------------------- */}

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

@ -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,
};

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

@ -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: "اطلاعات بیشتر",
};

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

@ -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>
);
};

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 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,
},
],
};
{

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

@ -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",
};

Write Preview
Loading…
Cancel
Save