diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/src/App.js b/src/App.js index 2935076..76d3ff5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,3 @@ -import logo from "./logo.svg"; import "./App.scss"; import Card from "./components/Card"; diff --git a/src/App.scss b/src/App.scss index 74b5e05..e69de29 100644 --- a/src/App.scss +++ b/src/App.scss @@ -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); - } -} diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/assets/fonts/IRANSansWeb_Bold.woff b/src/assets/fonts/IRANSansWeb_Bold.woff new file mode 100644 index 0000000..05d933e Binary files /dev/null and b/src/assets/fonts/IRANSansWeb_Bold.woff differ diff --git a/src/assets/fonts/IRANSansXFaNum-Regular.woff b/src/assets/fonts/IRANSansXFaNum-Regular.woff new file mode 100644 index 0000000..34d87e6 Binary files /dev/null and b/src/assets/fonts/IRANSansXFaNum-Regular.woff differ diff --git a/src/assets/images/square.svg b/src/assets/images/square.svg new file mode 100644 index 0000000..a329a27 --- /dev/null +++ b/src/assets/images/square.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Button/index.js b/src/components/Button/index.js new file mode 100644 index 0000000..53e1b24 --- /dev/null +++ b/src/components/Button/index.js @@ -0,0 +1,44 @@ +import React from "react"; + +const Button = ({ + className, + iconClassName, + iconHolderClassName, + icon, + text, + onClick, + sharpStyle, + clippath, +}) => { + return ( + + ); +}; + +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%)", +}; diff --git a/src/components/Card/index.js b/src/components/Card/index.js index be88679..36c181b 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -1,7 +1,180 @@ -import React from "react"; +import React, { useState } from "react"; -const Card = () => { - return
Card
; +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 ( +
+ {/* right */} +
+ {/* top */} +
+ {processes.map((process, index) => ( +
+ {process.color && ( +
+ )} +

{process.name}

+ {process.content} +
+ ))} +
+ {/* middle */} +
+

{title}

+

{hint}

+
+ {/* bottom */} +
+ {/* right */} +
+
+ {/* left */} +
+ {options.map((option, j) => ( +
+
+ icon +

{option.title}

+
+

{option.content}

+
+ ))} +
+ {/* modal */} +
+
e.stopPropagation()} + > +
+
+
+ ); }; -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: "ندارد", + }, + ], +}; diff --git a/src/components/CustomSelectBox/index.js b/src/components/CustomSelectBox/index.js new file mode 100644 index 0000000..6ed8319 --- /dev/null +++ b/src/components/CustomSelectBox/index.js @@ -0,0 +1,24 @@ +import React from "react"; + +const CustomSelectBox = ({ options }) => { + return ( + + ); +}; + +export default CustomSelectBox; + +CustomSelectBox.defaultProps = { + options: [ + { title: "میزان تحصیلات" }, + { title: "کارشناسی" }, + { title: "ارشد" }, + { title: "دکتری" }, + ], +}; diff --git a/src/components/FormInput/index.js b/src/components/FormInput/index.js new file mode 100644 index 0000000..d203b18 --- /dev/null +++ b/src/components/FormInput/index.js @@ -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 ( +
+
+ +
+
+ +
+
+ ); +}; + +export default FormInput; + +FormInput.defaultProps = { + items: [ + { + title: "mahdi", + }, + { + title: "mahdi", + }, + { + title: "mahdi", + }, + ], +}; diff --git a/src/components/Popup/index.js b/src/components/Popup/index.js new file mode 100644 index 0000000..5cff529 --- /dev/null +++ b/src/components/Popup/index.js @@ -0,0 +1,7 @@ +import React from "react"; + +const Popup = () => { + return
Popup
; +}; + +export default Popup; diff --git a/src/index.scss b/src/index.scss index b5c61c9..14d2354 100644 --- a/src/index.scss +++ b/src/index.scss @@ -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; +} diff --git a/tailwind.config.js b/tailwind.config.js index 26cde68..fed53ac 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,11 @@ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { - extend: {}, + extend: { + fontFamily: { + sansbold: ["sansbold"], + }, + }, }, plugins: [], };