From fb1860835680377070608b77d13044c0967f704d Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Mon, 24 Jan 2022 17:16:36 +0330 Subject: [PATCH] SideBar Structured and Page Layout Done --- src/components/Checkbox/index.css | 97 ++++++++++ src/components/Checkbox/index.js | 30 +++ .../arrow-top.png | Bin 0 -> 229 bytes .../VerticalExpandableProductFilter/index.js | 173 ++++++++++++++++++ .../search.png | Bin 0 -> 857 bytes src/views/Products/layouts/Sidebar.js | 60 +++++- tailwind.config.js | 1 + 7 files changed, 360 insertions(+), 1 deletion(-) create mode 100644 src/components/Checkbox/index.css create mode 100644 src/components/Checkbox/index.js create mode 100644 src/components/VerticalExpandableProductFilter/arrow-top.png create mode 100644 src/components/VerticalExpandableProductFilter/index.js create mode 100644 src/components/VerticalExpandableProductFilter/search.png diff --git a/src/components/Checkbox/index.css b/src/components/Checkbox/index.css new file mode 100644 index 0000000..d7d7f77 --- /dev/null +++ b/src/components/Checkbox/index.css @@ -0,0 +1,97 @@ +.checkbox-symbol { + position: absolute; + width: 0; + height: 0; + pointer-events: none; + user-select: none; + } + + .checkbox-container { + box-sizing: border-box; + color: #222; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-flow: row wrap; + } + + .checkbox-container * { + box-sizing: border-box; + } + + .checkbox-input { + position: absolute; + visibility: hidden; + } + + .checkbox { + user-select: none; + cursor: pointer; + padding: 6px 8px; + border-radius: 6px; + overflow: hidden; + transition: all 0.3s ease; + display: flex; + } + + .checkbox:not(:last-child) { + margin-right: 6px; + } + + .checkbox:hover { + background: inherit; + } + + .checkbox span { + vertical-align: middle; + transform: translate3d(0, 0, 0); + } + + .checkbox span:first-child { + position: relative; + flex: 0 0 18px; + width: 18px; + height: 18px; + border-radius: 4px; + transform: scale(1); + border: 1px solid #cccfdb; + transition: all 0.3s ease; + } + + .checkbox span:first-child svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: #fff; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transform: translate3d(0, 0, 0); + } + + .checkbox span:last-child { + padding-left: 8px; + line-height: 18px; + } + + .checkbox:hover span:first-child { + border-color: #0077ff; + } + + .checkbox-input:checked + .checkbox span:first-child { + background: #0077ff; + border-color: #0077ff; + animation: zoom-in-out 0.3s ease; + } + + .checkbox-input:checked + .checkbox span:first-child svg { + stroke-dashoffset: 0; + } + + @keyframes zoom-in-out { + 50% { + transform: scale(0.9); + } + } \ No newline at end of file diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js new file mode 100644 index 0000000..87ce1ae --- /dev/null +++ b/src/components/Checkbox/index.js @@ -0,0 +1,30 @@ +import React from "react"; +import './index.css'; + +export default function Checkbox(props) { + return ( +
+ + + + + + +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/VerticalExpandableProductFilter/arrow-top.png b/src/components/VerticalExpandableProductFilter/arrow-top.png new file mode 100644 index 0000000000000000000000000000000000000000..1b296a6563cec4c1f9a16ad37d17d500057591f5 GIT binary patch literal 229 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2comSQK*5Dp-y;YjHK^5=NEIEGmG zU%lkW*W|#%df~s} { + return lang === "fa" ? option1 : option2; +}; + +export default function VerticalExpandableProductFilter(props) { + const [text, setText] = useState(""); + const [searchResult, setSearchResult] = useState([]); + useEffect(() => { + let fakeSearchResult; + fakeSearchResult = props.list.filter( + (item1) => item1.name.indexOf(text) !== -1 + ); + setSearchResult(fakeSearchResult); + }, [text]); + + return ( +
+ + {props.title} + + {props.searchAble &&
+ setText(e.target.value)} + /> + + + +
} +
    + {(searchResult.length > 0 ? searchResult : props.list)?.map( + (item1, i) => ( +
  • +
    + + + {item1.name} + +
    + + {item1.subList?.length > 0 && ( + + )} +
  • + ) + )} +
+ {props.btnTitle &&
+ +
} +
+ ); +} + +VerticalExpandableProductFilter.defaultProps = { + list: [ + { + id: 0, + name: "وسایل آشپزخانه", + expaneded: false, + subList: [], + }, + { + id: 3, + name: "ماشین و موتور سیکلت", + expaneded: false, + subList: [ + { + id: 4, + name: "ماشین", + }, + { + id: 5, + name: "موتور", + }, + ], + }, + { + id: 6, + name: "اتاق خواب", + expaneded: false, + subList: [ + { + id: 7, + name: "کمد", + }, + { + id: 8, + name: "تخت خواب", + }, + ], + }, + { + id: 9, + name: "دکوراسیون و چیدمان", + expaneded: false, + subList: [], + }, + { + id: 10, + name: "وسایل بهداشت شخصی", + expaneded: false, + subList: [ + { + id: 11, + name: "مسواک", + }, + { + id: 12, + name: "حوله", + }, + ], + }, + { + id: 13, + name: "وسایل بهداشت شخصی", + expaneded: false, + subList: [ + { + id: 14, + name: "مسواک", + }, + { + id: 15, + name: "حوله", + }, + ], + }, + { + id: 16, + name: "وسایل بهداشت شخصی", + expaneded: false, + subList: [], + }, + ], +}; diff --git a/src/components/VerticalExpandableProductFilter/search.png b/src/components/VerticalExpandableProductFilter/search.png new file mode 100644 index 0000000000000000000000000000000000000000..81d586c7fa7862e5d51c832c1c1a94814283778a GIT binary patch literal 857 zcmV-f1E&0mP)(+L_Ts5c;; zpmc)L3DW=bJ>?Wfw(L0WrFZD=9SN57KK*)6eoAt3#4R~uwv$0{v)SyUEpD=2uix`I zNs^WRyz2Xp`F#F5WbwV>1av3Ishr-(Dxj9O6l|&fU-tp+43}jYK!t1~`y*SLq0Y)V zS3jNu4LoB$prj!4q9`8wC>e#5GaLammHm?C0$Fr*Vz6`dCj{8?dyVIBw6($+*mqNF zrb%(KS2N{Ndo8=wRAp?UMmPiesR`(F(`B-lGtGIfJ^-@S0P?x91>ro!E;KUjx(zWn zp4;50b|$-Oo4X0_iv~_@a8&*-P<|f+e9`}Y%PyNTc?Zs7gE$)$V=-V$lxOw(EVw+> zKLp2sQw<q-}kpQEs<|s_P zYxz8l!4aTOp;e3}p|@Kk#@6Ay*;X$RqUX;cK`nC;WhXI0aGX8mApv4@36Qr&D_o`y zg}|ck+nBSy&jnYBA>XM#)>kgqgHLa8HEFvjNB#9pwv#n|x2bP`!I2OYq=eR{{Wl3g zQOOD(>nrH1M4$dr&F$FE5mtYFQD2=2?y`@AA$h`<^-bYj15hmuEvBgw<^@a{&9Q=#2XBI- zpe42^O+K37xOo8<555OTzfzGoNLUJfo&G%6}St{b6;1#6Pz1l7m{4x+3t7VWTp3+Wa7MZ z4Ji2z7qH$9YzMFxoWC;LZg;Au-ZK&iHCIjBRadA9aBsM}gQ4F&z)b;gG;kK%Q{vgh j@lnAIN{FFb*LVD1*@<&E6n{BQ00000NkvXXu0mjfUL%A| literal 0 HcmV?d00001 diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Sidebar.js index 697e9c9..d059160 100644 --- a/src/views/Products/layouts/Sidebar.js +++ b/src/views/Products/layouts/Sidebar.js @@ -1,9 +1,67 @@ import React from "react"; import { connect } from "react-redux"; +import Checkbox from "../../../components/Checkbox"; +import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter"; export const Sidebar = ({}) => { - return
+ const filteronGrade = [ + { + id:0, + name: "پایه اول", + expaneded: false, + subList: [{ + id:1, + name: 'علوم اجتماعی' + }], + }, + { + id:1, + name: "پایه دوم", + expaneded: false, + subList: [{ + id:1, + name: 'علوم اجتماعی' + }], + }, + { + id:2, + name: "پایه سوم", + expaneded: false, + subList: [], + }, + + ]; + const categories = [ + { + id: 0, + expaneded: false, + name: 'کتاب فیزیکی', + subList: [] + }, + { + id: 1, + expaneded: false, + name: 'کتاب دیجیتال', + subList: [] + }, + { + id: 2, + expaneded: false, + name: 'دوره ویدیویی', + subList: [] + }, + { + id: 3, + expaneded: false, + name: 'بسته های آموزشی', + subList: [] + }, + ] + return
+ + +
; }; diff --git a/tailwind.config.js b/tailwind.config.js index fc5e01b..e7fba29 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,6 +13,7 @@ module.exports = { blueFF1: "#E9F0FF", blueFD: "#F6F9FD", blueFD1 : "#F4F8FD", + blueFFOP : "rgba(6, 146, 255, 0.36)", redFF: "#FFE6E6", redFF1: "#FF2020", yellow2: "#FDFFDA",