parent
61587406e8
commit
627aa4fdbe
15 changed files with 324 additions and 52 deletions
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
@ -1,38 +0,0 @@ |
||||
.App { |
||||
text-align: center; |
||||
} |
||||
|
||||
.App-logo { |
||||
height: 40vmin; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
@media (prefers-reduced-motion: no-preference) { |
||||
.App-logo { |
||||
animation: App-logo-spin infinite 20s linear; |
||||
} |
||||
} |
||||
|
||||
.App-header { |
||||
background-color: #282c34; |
||||
min-height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: calc(10px + 2vmin); |
||||
color: white; |
||||
} |
||||
|
||||
.App-link { |
||||
color: #61dafb; |
||||
} |
||||
|
||||
@keyframes App-logo-spin { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
to { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
@ -1,8 +0,0 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import App from './App'; |
||||
|
||||
test('renders learn react link', () => { |
||||
render(<App />); |
||||
const linkElement = screen.getByText(/learn react/i); |
||||
expect(linkElement).toBeInTheDocument(); |
||||
}); |
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,44 @@ |
||||
import React from "react"; |
||||
|
||||
const Button = ({ |
||||
className, |
||||
iconClassName, |
||||
iconHolderClassName, |
||||
icon, |
||||
text, |
||||
onClick, |
||||
sharpStyle, |
||||
clippath, |
||||
}) => { |
||||
return ( |
||||
<button |
||||
style={{ |
||||
clipPath: sharpStyle ? clippath : "", |
||||
}} |
||||
onClick={onClick} |
||||
className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`} |
||||
> |
||||
{text} |
||||
{icon && ( |
||||
<span className={`${iconHolderClassName}`}> |
||||
<img src={icon} alt="icon" className={`${iconClassName}`} /> |
||||
</span> |
||||
)} |
||||
</button> |
||||
); |
||||
}; |
||||
|
||||
export default Button; |
||||
|
||||
Button.defaultProps = { |
||||
className: |
||||
"bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90", |
||||
text: "اطلاعات بیشتر", |
||||
|
||||
iconHolderClassName: "bg-secondary mr-2", |
||||
iconClassName: "w-4", |
||||
icon: false, |
||||
|
||||
sharpStyle: false, |
||||
clippath: "polygon(24% 0, 100% 0%, 100% 99%, 0% 100%)", |
||||
}; |
||||
@ -1,7 +1,180 @@ |
||||
import React from "react"; |
||||
import React, { useState } from "react"; |
||||
|
||||
const Card = () => { |
||||
return <div className="bg-red-400">Card</div>; |
||||
import Button from "../Button"; |
||||
|
||||
import ax from "../../assets/images/square.svg"; |
||||
import FormInput from "../FormInput"; |
||||
|
||||
const ProcessCard = ({ processes, title, hint, items, options }) => { |
||||
const [openModal, setOpenModal] = useState(false); |
||||
console.log(openModal); |
||||
|
||||
return ( |
||||
<section className="w-fit mx-auto flex flex-row bg-surface border border-blue-400 rounded"> |
||||
{/* right */} |
||||
<div className="flex flex-1 flex-col"> |
||||
{/* top */} |
||||
<div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-blue-400 divide-x-reverse"> |
||||
{processes.map((process, index) => ( |
||||
<div |
||||
className="flex flex-row flex-1 items-center justify-center flex-grow" |
||||
key={index} |
||||
> |
||||
{process.color && ( |
||||
<div |
||||
className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`} |
||||
></div> |
||||
)} |
||||
<p className="text-xs bg-blue-400">{process.name}</p> |
||||
<span className="text-xs mr-2 ">{process.content}</span> |
||||
</div> |
||||
))} |
||||
</div> |
||||
{/* middle */} |
||||
<div className="flex flex-col p-4 my-5 mr-5"> |
||||
<h2 className="text-lg font-bold">{title}</h2> |
||||
<p className="text-sm text-justify leading-6 mt-3">{hint}</p> |
||||
</div> |
||||
{/* bottom */} |
||||
<div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded "> |
||||
{/* right */} |
||||
<Button |
||||
text={"ویرایش"} |
||||
icon={ax} |
||||
iconHolderClassName={""} |
||||
iconClassName={"mr-2 w-5"} |
||||
className="p-2 bg-primary text-white text-sm rounded" |
||||
onClick={() => setOpenModal(true)} |
||||
/> |
||||
{/* left */} |
||||
<div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-blue-400 divide-x-reverse"> |
||||
{items.map((item, i) => ( |
||||
<div |
||||
key={i} |
||||
className="flex flex-row flex-1 items-center justify-center flex-grow" |
||||
> |
||||
<img src={item.icon} alt="" className="w-4 h-4 ml-1" /> |
||||
<p className="text-xs ">{item.name}</p> |
||||
<p className="text-xs mr-1 ">{item.ans}</p> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{/* left */} |
||||
<div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4"> |
||||
{options.map((option, j) => ( |
||||
<div key={j} className="flex flex-row items-center justify-between"> |
||||
<div className="flex flex-row items-center"> |
||||
<img src={option.icon} alt="icon" className="w-5" /> |
||||
<p className="text-xs mr-1">{option.title}</p> |
||||
</div> |
||||
<p className="text-xs mr-7">{option.content}</p> |
||||
</div> |
||||
))} |
||||
</div> |
||||
{/* modal */} |
||||
<div |
||||
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
|
||||
${openModal ? "opacity-60" : "opacity-0 pointer-events-none"} |
||||
`}
|
||||
> |
||||
<div |
||||
className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-5" |
||||
onClick={(e) => e.stopPropagation()} |
||||
> |
||||
<Button |
||||
text={null} |
||||
icon={ax} |
||||
iconHolderClassName={""} |
||||
iconClassName={""} |
||||
className="p-2 bg-red-600 rounded self-end" |
||||
onClick={() => setOpenModal(false)} |
||||
/> |
||||
<FormInput /> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Card; |
||||
export default ProcessCard; |
||||
|
||||
ProcessCard.defaultProps = { |
||||
title: "پروسه مختلف در این قسمت قرار می گیرد", |
||||
hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.", |
||||
|
||||
processes: [ |
||||
{ |
||||
color: "bg-error", |
||||
name: "فرایند اجرایی", |
||||
content: 256, |
||||
}, |
||||
{ |
||||
color: false, |
||||
name: "وضعیت:", |
||||
content: "پرداخت شده", |
||||
}, |
||||
{ |
||||
color: "bg-info", |
||||
name: "در حال انجام", |
||||
content: 55, |
||||
}, |
||||
{ |
||||
color: false, |
||||
name: "انجام شده", |
||||
content: 100, |
||||
}, |
||||
], |
||||
|
||||
items: [ |
||||
{ |
||||
icon: ax, |
||||
name: "سوالات:", |
||||
ans: 5, |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
name: "چک لیست:", |
||||
ans: "تابع دارد", |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
name: "مکاتبات:", |
||||
ans: "دارد", |
||||
}, |
||||
], |
||||
|
||||
options: [ |
||||
{ |
||||
icon: ax, |
||||
title: "تاخیر", |
||||
content: "5 ساعت", |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
title: "شرایط اجرا", |
||||
content: "2 مورد", |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
title: "تابع شروع", |
||||
content: "ندارد", |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
title: "مثلث", |
||||
content: "5 ساعت", |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
title: "تایید خودکار", |
||||
content: "5 ساعت", |
||||
}, |
||||
{ |
||||
icon: ax, |
||||
title: "تابع انجام", |
||||
content: "ندارد", |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
@ -0,0 +1,24 @@ |
||||
import React from "react"; |
||||
|
||||
const CustomSelectBox = ({ options }) => { |
||||
return ( |
||||
<select className="customizeSelect rounded text-xs text-black py-2 bg-gray-200 focus:bg-white border-gray-200 focus:border-[#2483E1] focus:ring-transparent"> |
||||
{options.map((option, index) => ( |
||||
<option className="text-black" key={index}> |
||||
{option.title} |
||||
</option> |
||||
))} |
||||
</select> |
||||
); |
||||
}; |
||||
|
||||
export default CustomSelectBox; |
||||
|
||||
CustomSelectBox.defaultProps = { |
||||
options: [ |
||||
{ title: "میزان تحصیلات" }, |
||||
{ title: "کارشناسی" }, |
||||
{ title: "ارشد" }, |
||||
{ title: "دکتری" }, |
||||
], |
||||
}; |
||||
@ -0,0 +1,33 @@ |
||||
// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
|
||||
|
||||
import React from "react"; |
||||
import CustomSelectBox from "../CustomSelectBox"; |
||||
|
||||
const FormInput = ({ items }) => { |
||||
return ( |
||||
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-gray-400 divide-x-reverse "> |
||||
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
||||
<CustomSelectBox /> |
||||
</div> |
||||
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
||||
<CustomSelectBox /> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default FormInput; |
||||
|
||||
FormInput.defaultProps = { |
||||
items: [ |
||||
{ |
||||
title: "mahdi", |
||||
}, |
||||
{ |
||||
title: "mahdi", |
||||
}, |
||||
{ |
||||
title: "mahdi", |
||||
}, |
||||
], |
||||
}; |
||||
@ -0,0 +1,7 @@ |
||||
import React from "react"; |
||||
|
||||
const Popup = () => { |
||||
return <div>Popup</div>; |
||||
}; |
||||
|
||||
export default Popup; |
||||
@ -1,3 +1,27 @@ |
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
|
||||
@font-face { |
||||
font-family: "iransans-medium"; |
||||
src: url(./assets/fonts/IRANSansXFaNum-Regular.woff); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: "sansbold"; |
||||
src: url(./assets/fonts/IRANSansWeb_Bold.woff); |
||||
} |
||||
|
||||
body { |
||||
font-family: iransans-medium; |
||||
direction: rtl; |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
.rtl { |
||||
direction: rtl; |
||||
} |
||||
|
||||
.ltr { |
||||
direction: ltr; |
||||
} |
||||
|
||||
@ -1,7 +1,11 @@ |
||||
module.exports = { |
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"], |
||||
theme: { |
||||
extend: {}, |
||||
extend: { |
||||
fontFamily: { |
||||
sansbold: ["sansbold"], |
||||
}, |
||||
}, |
||||
}, |
||||
plugins: [], |
||||
}; |
||||
|
||||
Loading…
Reference in new issue