master
mahdi andalib 3 years ago
parent 88a6324867
commit 9a9320a22b
  1. 6
      src/App.js
  2. 4
      src/components/Header/desgin1/HeaderDesign1.js
  3. 184
      src/components/ReactTable4/EditRow.js
  4. 3
      src/components/ReactTable4/SelectColumnFilter.js
  5. 11
      src/components/Switch/index.js
  6. 57
      src/components/Switch/index.scss
  7. 0
      src/components/testtttt/index.scss

@ -90,17 +90,17 @@ function App() {
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
<ReactTable4 />
{/* <ReactTable4 /> */}
{/* <Digikala /> */}
{/* <DigikalaShop /> */}
{/* <HeaderDesign1 />
<HeaderDesign1 />
<div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 />
<FooterDesign1 />
</span>
</div> */}
</div>
</div>
</Provider>
);

@ -51,7 +51,9 @@ const HeaderDesign1 = ({ username, userJob }) => {
</div>
<div className="flex justify-end items-center ">
<Switch />
<div className="ml-4">
<Switch />
</div>
<div className="flex flex-row-reverse items-center relative w-60 ml-3">
<img
src={search}

@ -28,16 +28,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
نام و نام خانوادگی:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.name}
/>
>
{row.name}
</span>
</div>
{/* 2 */}
<div className="flex flex-col my-2 mx-2">
@ -47,16 +49,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
تاریخ سفارش:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_date}
/>
>
{row.order_date}
</span>
</div>
{/* 3 */}
<div className="flex flex-col my-2 mx-2">
@ -66,16 +70,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
مبلغ سفارش:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_price}
/>
>
{row.order_price}
</span>
</div>
{/* 4 */}
<div className="flex flex-col my-2 mx-2">
@ -85,16 +91,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
شماره سفارش:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_number}
/>
>
{row.order_number}
</span>
</div>
{/* 5 */}
<div className="flex flex-col my-2 mx-2">
@ -104,16 +112,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
شغل کاربر:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.user_job}
/>
>
{row.user_job}
</span>
</div>
{/* 6 */}
<div className="flex flex-col my-2 mx-2">
@ -123,16 +133,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
وضعیت سفارش:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status}
/>
>
{row.order_status}
</span>
</div>
{/* 7 */}
<div className="flex flex-col my-2 mx-2">
@ -140,18 +152,20 @@ const EditRow = ({ row, columns, sentForms }) => {
className="text-xs text-blue-400 mb-2"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
سطح اهمیت:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status}
/>
>
{row.order_level}
</span>
</div>
{/* 8 */}
<div className="flex flex-col my-2 mx-2">
@ -161,16 +175,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
محل تولد:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_place}
/>
>
{row.birth_place}
</span>
</div>
{/* 9 */}
<div className="flex flex-col my-2 mx-2">
@ -180,16 +196,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
تلفن محل کار:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.office_phone}
/>
>
{row.office_phone}
</span>
</div>
{/* 10 */}
<div className="flex flex-col my-2 mx-2">
@ -199,16 +217,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
تحصیلات:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.education}
/>
>
{row.education}
</span>
</div>
{/* 11 */}
<div className="flex flex-col my-2 mx-2">
@ -218,16 +238,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
تاریخ تولد:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_day}
/>
>
{row.birth_day}
</span>
</div>
{/* 12 */}
<div className="flex flex-col my-2 mx-2">
@ -237,16 +259,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
شغل:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.job}
/>
>
{row.job}
</span>
</div>
{/* 13 */}
<div className="flex flex-col my-2 mx-2">
@ -256,16 +280,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
دانشگاه:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.uni}
/>
>
{row.uni}
</span>
</div>
{/* 14 */}
<div className="flex flex-col my-2 mx-2">
@ -275,16 +301,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
رشته تحصیلی:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.field_study}
/>
>
{row.field_study}
</span>
</div>
{/* 15 */}
<div className="flex flex-col my-2 mx-2">
@ -294,16 +322,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
اخلاق:
</p>
<input
type="text"
<span
role="textbox"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.behaviour}
/>
>
{row.behaviour}
</span>
</div>
{/* 16 */}
<div className="flex flex-col my-2 mx-2">
@ -313,23 +343,18 @@ const EditRow = ({ row, columns, sentForms }) => {
>
نشانی:
</p>
{/* <span
<span
role="textbox"
className="text-xs rounded-sm bo, color: "#00253A",
rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
>
{row.address}{" "}
</span> */}
<input
type="text"
style={{
backgroundColor: "#F8FBFF",
borderColor: "#C8DEF9",
color: "#00253A",
minWidth: "96px",
}}
className="text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.address}
/>
>
{row.address}
</span>
</div>
</div>
{/* title bottom */}
@ -347,18 +372,18 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
{/* right */}
<div className="flex items-center w-10/12">
{/* map */}
<div className=" mx-2">
<div className="mx-2">
<span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
لوکیشن مد نظر:
</span>
<img
className="my-2 mr-2 border border-blue-300 rounded"
className="mt-1 mr-2 border border-blue-300 rounded"
src={map}
/>
</div>
{/* formInput */}
<div className="flex flex-col flex-1 mx-2">
<span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات:
</span>
<form className="flex flex-col ">
@ -385,7 +410,7 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
{/* previous */}
<div className="flex flex-col relative mx-2">
{/* title */}
<span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
<span className="text-sm mb-4" style={{ color: "#65A9FF" }}>
توضیحات قبلی:
</span>
{/* content */}
@ -431,7 +456,14 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
</div>
</div>
{/* left */}
<div className="w-2/12 flex justify-end">dfsfdsdfs</div>
<div className="w-2/12 flex justify-end">
<button
className="border rounded text-sm lg:ml-3 py-2 px-4 text-white"
style={{ backgroundColor: "#65A9FF" }}
>
ذخیره اطلاعات{" "}
</button>
</div>
</div>
</section>
);

@ -1,7 +1,8 @@
import React from "react";
// {columns[5].Cell({ value: row.order_status })}
export const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id, render },
column: { filterValue, setFilter, preFilteredRows, id, render, columns },
}) => {
const options = React.useMemo(() => {
const options = new Set();

@ -3,10 +3,13 @@ import "./index.scss";
const Switch = () => {
return (
<div className="switch">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>
<label for="toogleA" class="cursor-pointer">
<div class="relative">
<input id="toogleA" type="checkbox" class="sr-only" />
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
<div class="dot absolute w-6 h-6 bg-gray-200 rounded-full shadow -left-1 -top-1 transition"></div>
</div>
</label>
);
};

@ -1,52 +1,9 @@
// *, *:after, *:before {
// // box-sizing: border-box;
// }
// body {
// min-height: 100vh;
// display: flex;
// align-items: center;
// justify-content: center;
// }
.switch {
position: relative;
input[type="checkbox"] {
visibility: hidden;
position : absolute;
&:checked + label {
transform: rotate(0deg);
background-color: #000;
&:before {
transform: translateX(35.5px);
background-color: #fff;
}
}
}
label {
display: flex;
width: 70px;
height: 34px;
border: 3px solid;
border-radius: 99em;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
cursor: pointer;
input:checked ~ .dot {
transform: translateX(100%);
background-color: #65a9ff;
}
&:before {
transition: transform 0.3s ease;
transition-delay: 0s;
content: "";
display: block;
position: absolute;
width: 24px;
height: 24px;
background-color: #000;
border-radius: 50%;
top: 2px;
left: 3px;
}
}
input:checked ~ .dot {
transform: translateX(100%);
background-color: #65a9ff;
}

Loading…
Cancel
Save