delete 3 files and update 5 files

arbaeen
mahdi 2 years ago
parent 61587406e8
commit 627aa4fdbe
  1. BIN
      public/logo192.png
  2. BIN
      public/logo512.png
  3. 1
      src/App.js
  4. 38
      src/App.scss
  5. 8
      src/App.test.js
  6. BIN
      src/assets/fonts/IRANSansWeb_Bold.woff
  7. BIN
      src/assets/fonts/IRANSansXFaNum-Regular.woff
  8. 10
      src/assets/images/square.svg
  9. 44
      src/components/Button/index.js
  10. 181
      src/components/Card/index.js
  11. 24
      src/components/CustomSelectBox/index.js
  12. 33
      src/components/FormInput/index.js
  13. 7
      src/components/Popup/index.js
  14. 24
      src/index.scss
  15. 6
      tailwind.config.js

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

@ -1,4 +1,3 @@
import logo from "./logo.svg";
import "./App.scss";
import Card from "./components/Card";

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

@ -0,0 +1,10 @@
<svg id="element-3" xmlns="http://www.w3.org/2000/svg" width="30.507" height="30.507" viewBox="0 0 30.507 30.507">
<path id="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(17.16 2.542)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(17.16 17.16)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(2.542 2.542)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(2.542 17.16)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<g id="Vector-5" data-name="Vector" fill="none" opacity="0">
<path d="M0,0H30.507V30.507H0Z" stroke="none"/>
<path d="M 1.000003814697266 0.9999942779541016 L 1.000003814697266 29.50746536254883 L 29.50744247436523 29.50746536254883 L 29.50744247436523 0.9999942779541016 L 1.000003814697266 0.9999942779541016 M 3.814697265625e-06 -5.7220458984375e-06 L 30.50744247436523 -5.7220458984375e-06 L 30.50744247436523 30.50746536254883 L 3.814697265625e-06 30.50746536254883 L 3.814697265625e-06 -5.7220458984375e-06 Z" stroke="none" fill="#65a9ff"/>
</g>
</svg>

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…
Cancel
Save