update 9 files and delete 1 file

master
mahdi 2 years ago
parent 336d12186e
commit 91bad7fb52
  1. 6
      src/components/CardDesgin/CardHolder/index.js
  2. 4
      src/components/Datepicker/DateRangePicker/index.js
  3. 11
      src/components/FooterDesign/Footer/index.js
  4. 102
      src/components/FooterDesign/FooterDesign2/index.js
  5. 2
      src/components/FooterDesign/index.js
  6. 32
      src/components/FormFields/FormInput/index.js
  7. 12
      src/components/FormFields/OutlineInput/index.js
  8. 2
      src/components/FormFields/OutlineSpan/index.js
  9. 6
      src/components/MiniComponents/TitleSubtitle/index.js
  10. 2
      src/components/UploadFile/UploadDesign1/index.js

@ -16,10 +16,8 @@ const CardHolder = ({ items, cardClass }) => {
> >
<img src={item.icon} className="w-14" alt="" /> <img src={item.icon} className="w-14" alt="" />
<div className="flex flex-col mr-2 flex-1"> <div className="flex flex-col mr-2 flex-1">
<p className="text-sm text-[#00253A]">{item.title}</p> <p className="text-sm text-primaryText">{item.title}</p>
<p className="text-xs text-gray-400 font-light mr-1 mt-2"> <p className="text-xs text-primaryLight mr-1 mt-2">{item.des}</p>
{item.des}
</p>
</div> </div>
</div> </div>
))} ))}

@ -24,14 +24,14 @@ function CustomRangeInput({ openCalendar, value }) {
return ( return (
<div className="flex flex-row items-center justify-center mt-3"> <div className="flex flex-row items-center justify-center mt-3">
<input <input
className="w-[45%] py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1" className="w-[45%] py-1 text-center text-sm rounded border border-surfaceBorder focus:outline-none focus:border-primary focus:ring-primary focus:ring-1"
onFocus={openCalendar} onFocus={openCalendar}
value={value[0]} value={value[0]}
readOnly readOnly
/> />
<p className="mx-2 text-sm">تا</p> <p className="mx-2 text-sm">تا</p>
<input <input
className="w-[45%] py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1" className="w-[45%] py-1 text-center text-sm rounded border border-surfaceBorder focus:outline-none focus:border-primary focus:ring-primary focus:ring-1"
onFocus={openCalendar} onFocus={openCalendar}
value={value[1]} value={value[1]}
readOnly readOnly

@ -3,17 +3,16 @@ import _ from "lodash";
const FooterDesign1 = ({ links }) => { const FooterDesign1 = ({ links }) => {
return ( return (
<footer className="relative w-full flex flex-col md:flex-row justify-around items-start md:items-start p-4 shadow-md bg-white"> <footer className="relative w-full flex flex-col md:flex-row justify-around items-start md:items-start p-4 shadow bg-surface">
<div className="flex items-start"> <div className="flex items-start">
<> <>
{links.map((section, index) => ( {links.map((section, index) => (
<ul className="mr-10" key={index}> <ul className="mr-10" key={index}>
{section.map((link, index) => ( {section.map((link, index) => (
<li <li className={`text-xs leading-7 hover:font-bold`} key={index}>
className={`font-light text-xs leading-7 hover:font-bold footer-items text-gray-600`} <a href="#" className="text-primaryText">
key={index} {link}
> </a>
<a href="#">{link}</a>
</li> </li>
))} ))}
</ul> </ul>

@ -1,102 +0,0 @@
// it has style inside index.scss ---> // Start Footer/Design1 && end Footer/Design1
import React from "react";
const FooterDesign1 = ({ footerItems, array }) => {
return (
<footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative bg-white">
<div className="flex items-start">
{array.map((item, index) => (
<ul className="mr-10" key={index}>
{item.footerItems.map((footerItem, index) => (
<li
className="font-light text-xs leading-7 footer-items"
key={index}
>
<a href="#">{footerItem.name}</a>
</li>
))}
</ul>
))}
</div>
<div className="flex items-center mt-10 md:mt-0">
<img src="images/enamad-pic.svg" alt="" className="w-28 ml-10" />
<img src="images/samandehi-pic.svg" alt="" className="w-28" />
</div>
{/* line */}
<img
src="images/light-blue-line.svg"
alt=""
className="hidden sm:block absolute bottom-5 left-20"
/>
</footer>
);
};
export default FooterDesign1;
FooterDesign1.defaultProps = {
array: [
{
footerItems: [
{
name: "لینک های اصلی",
},
{
name: "فروشگاه",
},
{
name: "در باره ما",
},
{
name: "پرسش های متداول",
},
],
},
{
footerItems: [
{
name: "لینک های اصلی",
},
{
name: "فروشگاه",
},
{
name: "در باره ما",
},
{
name: "پرسش های متداول",
},
],
},
{
footerItems: [
{
name: "لینک های اصلی",
},
{
name: "فروشگاه",
},
{
name: "در باره ما",
},
{
name: "پرسش های متداول",
},
],
},
{
footerItems: [
{
name: "لینک های اصلی",
},
{
name: "فروشگاه",
},
{
name: "در باره ما",
},
],
},
],
};

@ -1,12 +1,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Footer from "./Footer"; import Footer from "./Footer";
import FooterDesign2 from "./FooterDesign2";
function FooterDesign() { function FooterDesign() {
const list = { const list = {
1: <Footer />, 1: <Footer />,
2: <FooterDesign2 />,
}; };
const [type, setType] = useState(1); const [type, setType] = useState(1);
return ( return (

@ -12,33 +12,31 @@ const FormInput = ({ items }) => {
const { register, getValues } = useForm(); const { register, getValues } = useForm();
return ( return (
<div className="mx-auto w-fit flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 border border-gray-200 rounded-sm shadow-sm"> <div className="w-fit flex flex-row items-center justify-between mx-auto bg-surface p-4 border border-surfaceBorder rounded-sm shadow-sm divide-x-2 divide-surfaceBorder divide-x-reverse ">
<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-4">
<Input <Input
register={register("firstName")} register={register("firstName")}
label="نام " label="نام "
type="text" type="text"
borderClassname={`border border-[#E0E0E0] `} borderClassname={`border border-surfaceBorder `}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`} inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
/> />
<Input <Input
register={register("lastName")} register={register("lastName")}
label="نام خانوادگی" label="نام خانوادگی"
type="text" type="text"
borderClassname={`border border-[#E0E0E0] `} borderClassname={`border border-surfaceBorder `}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
/> />
<Input <Input
register={register("birthYear")} register={register("birthYear")}
label="تاریخ تولد" label="تاریخ تولد"
type="number" type="number"
borderClassname={`border border-[#E0E0E0] `} inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`}
/> />
<CustomSelectBox /> <CustomSelectBox />
<CustomSwitch <CustomSwitch
register={register("gender")} register={register("gender")}
className="flex-1 bg-[#F9F9F9] border-[#E0E0E0]" className="flex-1 bg-surface border-surfaceBorder"
// defaultValue={activeUser?.gender} // defaultValue={activeUser?.gender}
values={["خانم", "آقا"]} values={["خانم", "آقا"]}
/> />
@ -48,34 +46,34 @@ const FormInput = ({ items }) => {
register={register("mobileNumber")} register={register("mobileNumber")}
label="شماره تماس" label="شماره تماس"
type="number" type="number"
borderClassname={`border border-[#E0E0E0] `} borderClassname={`border border-surfaceBorder `}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`} inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
/> />
<Input <Input
register={register("job")} register={register("job")}
label="شغل" label="شغل"
type="text" type="text"
borderClassname={`border border-[#E0E0E0] `} borderClassname={`border border-surfaceBorder `}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`} inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
/> />
<CustomSelectBox options={items} /> <CustomSelectBox options={items} />
<Input <Input
register={register("foundus")} register={register("foundus")}
label="نحوه آشنایی با موکب" label="نحوه آشنایی با موکب"
type="text" type="text"
borderClassname={`border border-[#E0E0E0] `} borderClassname={`border border-surfaceBorder `}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`} inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
/> />
<Input <Input
register={register("idCard")} register={register("idCard")}
label="کد ملی" label="کد ملی"
type="number" type="number"
borderClassname={`border border-[#E0E0E0] `} borderClassname={`border border-surfaceBorder `}
inputClassname={`px-3 py-2 text-[#0F0543] focus:bg-white`} inputClassname={`px-3 py-2 text-primaryText focus:bg-white`}
/> />
</div> </div>
<div className="flex-grow flex-1 flex flex-col px-4 justify-between"> <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
<lable className="text-xs bg-[#F9F9F9] border border-[#e0e0e0] text-[#0F0543] rounded p-2"> <lable className="text-xs bg-surface border border-surfaceBorder text-primaryText rounded p-2">
تاریخ ورود تاریخ ورود
</lable> </lable>
<DateRangePicker /> <DateRangePicker />

@ -14,14 +14,14 @@ const OutlineInput = ({
<div className={`${divWidth}`}> <div className={`${divWidth}`}>
<input <input
type="text" type="text"
className={`relative w-full border-2 rounded-md text-sm h-12 className={`relative w-full border-2 rounded text-sm h-12
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E] ${textClr} ${borderClr}`} focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary ${textClr} ${borderClr}`}
onClick={onClick} onClick={onClick}
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
/> />
<span <span
className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-sansbold ${outlineTitleClr}`} className={`absolute right-20 -mt-2 bg-surface text-xs px-2 font-bold ${outlineTitleClr}`}
> >
{outlineTitle} {outlineTitle}
</span> </span>
@ -33,8 +33,8 @@ export default OutlineInput;
OutlineInput.defaultProps = { OutlineInput.defaultProps = {
divWidth: "w-full", divWidth: "w-full",
textClr: "text-blue-600", textClr: "text-primaryText",
borderClr: "border-pink-400", borderClr: "border-surfaceBorder",
outlineTitle: "مهدی عندلیب", outlineTitle: "مهدی عندلیب",
outlineTitleClr: "text-red-400", outlineTitleClr: "text-primaryText",
}; };

@ -14,7 +14,7 @@ const OutlineSpan = ({
return ( return (
<div className={`${divWidth}`}> <div className={`${divWidth}`}>
<span <span
className={`absolute right-20 -mt-2 ${outlineTitleClr} bg-white text-xs px-2 font-sansbold z-10`} className={`absolute right-20 -mt-2 ${outlineTitleClr} bg-red-400 text-xs px-2 font-sansbold z-10`}
> >
{outlineTitle} {outlineTitle}
</span> </span>

@ -25,9 +25,7 @@ const TitleSubtitle = ({
<div <div
className={`rounded bg-primaryDark ${subtitleBorderClassName}`} className={`rounded bg-primaryDark ${subtitleBorderClassName}`}
></div> ></div>
<p className={`text-xs text-primaryDark ${subtitleClassName}`}> <p className={`text-primaryDark ${subtitleClassName}`}>{subTitle}</p>
{subTitle}
</p>
</div> </div>
)} )}
</div> </div>
@ -43,6 +41,6 @@ TitleSubtitle.defaultProps = {
titleClassName: "text-base", titleClassName: "text-base",
titleBorderClassName: "w-1 h-5 ml-1", titleBorderClassName: "w-1 h-5 ml-1",
subtitleClassName: "", subtitleClassName: "text-xs",
subtitleBorderClassName: "w-1 h-5 ml-1", subtitleBorderClassName: "w-1 h-5 ml-1",
}; };

@ -95,7 +95,7 @@ export default class UploadDesign1 extends Component {
className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`} className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`}
></div> ></div>
</div> </div>
<p className="bg-red-400">{this.state.fileName}</p> <p className="text-xs my-2 text-center">{this.state.fileName}</p>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save