Reza_ashrafi
3 years ago
parent
f77ba5b349
commit
d3c7962a15
33 changed files with 4565 additions and 1562 deletions
@ -0,0 +1,10 @@ |
|||||||
|
module.exports = { |
||||||
|
style: { |
||||||
|
postcss: { |
||||||
|
plugins: [ |
||||||
|
require('tailwindcss'), |
||||||
|
require('autoprefixer'), |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import React from "react"; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Checkbox(props) { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<svg className="checkbox-symbol"> |
||||||
|
<symbol id="check" viewBox="0 0 12 10"> |
||||||
|
<polyline |
||||||
|
points="1.5 6 4.5 9 10.5 1" |
||||||
|
stroke-linecap="round" |
||||||
|
stroke-linejoin="round" |
||||||
|
stroke-width="2" |
||||||
|
></polyline> |
||||||
|
</symbol> |
||||||
|
</svg> |
||||||
|
|
||||||
|
<div className="checkbox-container"> |
||||||
|
<input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} /> |
||||||
|
<label className="checkbox" htmlFor="apples"> |
||||||
|
<span> |
||||||
|
<svg width="12px" height="10px"> |
||||||
|
<use xlinkHref="#check"></use> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 860 B |
@ -0,0 +1,162 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
import tick from "./tick.png"; |
||||||
|
import danger from "./danger.png"; |
||||||
|
|
||||||
|
const langDetector = (lang, option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
|
||||||
|
const inputStatusHandler = (value, focus, status, primary, success, danger) => { |
||||||
|
if (!focus) { |
||||||
|
return ""; |
||||||
|
} else { |
||||||
|
if (!value) { |
||||||
|
return primary; |
||||||
|
} else { |
||||||
|
if (status) { |
||||||
|
return success; |
||||||
|
} else { |
||||||
|
return danger; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Input(props) { |
||||||
|
const [value, setValue] = useState(""); |
||||||
|
const [focusToggle, setFocusToggle] = useState(false); |
||||||
|
|
||||||
|
const { lang, theme, inputMode, label, status, maxLength, message } = props; |
||||||
|
|
||||||
|
const onChange = (val) => { |
||||||
|
setValue(val); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["input flex flex-col relative mb-6", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<label |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300", |
||||||
|
langDetector(lang, "right-2", "left-2"), |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"input__labelFocus", |
||||||
|
"input__labelSuccess", |
||||||
|
"input__labelDanger" |
||||||
|
), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onClick={() => setFocusToggle(true)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</label> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
inputMode={inputMode} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"flex-1 border rounded-sm outline-none p-2", |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"input__inputActive", |
||||||
|
"input__inputSuccess", |
||||||
|
"input__inputDanger" |
||||||
|
), |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onChange={(e) => onChange(e.target.value)} |
||||||
|
value={value} |
||||||
|
onFocus={() => setFocusToggle(true)} |
||||||
|
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} |
||||||
|
maxLength={maxLength} |
||||||
|
/> |
||||||
|
{!status && value && ( |
||||||
|
<img |
||||||
|
src={danger} |
||||||
|
alt={langDetector(lang, "اشتباه", "wrong")} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
||||||
|
langDetector(lang, "left-2", "right-2"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{status && value && ( |
||||||
|
<img |
||||||
|
src={tick} |
||||||
|
alt={langDetector(lang, "درست", "right")} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
||||||
|
langDetector(lang, "left-2", "right-2"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{value && !status && ( |
||||||
|
<span |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"input__message text-xs absolute -bottom-5", |
||||||
|
langDetector(lang, "right-2", "left-2"), |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"", |
||||||
|
"input__messageSuccess", |
||||||
|
"input__messageDanger" |
||||||
|
), |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
{message} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
{value && ( |
||||||
|
<span |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"input__length absolute -bottom-5 text-xs", |
||||||
|
langDetector(lang, "left-2", "right-2"), |
||||||
|
inputStatusHandler( |
||||||
|
value, |
||||||
|
focusToggle, |
||||||
|
status, |
||||||
|
"", |
||||||
|
"input__lengthSuccess", |
||||||
|
"input__lengthDanger" |
||||||
|
), |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
{value.length + "/" + maxLength} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
$primary: #06BACE; |
||||||
|
$gray: #dbdbdb; |
||||||
|
$danger: #E00A0A; |
||||||
|
$success: #23C933; |
||||||
|
|
||||||
|
.input { |
||||||
|
&__labelFocus{ |
||||||
|
top: 0px !important; |
||||||
|
font-size: 9px !important; |
||||||
|
color: $primary !important; |
||||||
|
} |
||||||
|
&__labelDanger{ |
||||||
|
top: 0px !important; |
||||||
|
font-size: 9px !important; |
||||||
|
color: $danger !important; |
||||||
|
} |
||||||
|
&__labelSuccess{ |
||||||
|
top: 0px !important; |
||||||
|
font-size: 9px !important; |
||||||
|
color: $success !important; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
&__inputActive{ |
||||||
|
border-color: $primary !important; |
||||||
|
} |
||||||
|
&__inputSuccess{ |
||||||
|
border-color: $success !important; |
||||||
|
} |
||||||
|
&__inputDanger{ |
||||||
|
border-color: $danger !important; |
||||||
|
} |
||||||
|
|
||||||
|
&__message{ |
||||||
|
&Success{ |
||||||
|
color: $success; |
||||||
|
} |
||||||
|
&Danger{ |
||||||
|
color: $danger; |
||||||
|
} |
||||||
|
} |
||||||
|
&__length{ |
||||||
|
&Success{ |
||||||
|
color: $success; |
||||||
|
} |
||||||
|
&Danger{ |
||||||
|
color: $danger; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.en { |
||||||
|
direction: ltr; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.fa { |
||||||
|
direction: rtl; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 411 B |
@ -0,0 +1,13 @@ |
|||||||
|
import React from "react"; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Radio(props) { |
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
<div className="radio flex items-center"> |
||||||
|
<input id="radio-1" name={props.name} type="radio" /> |
||||||
|
<label htmlFor="radio-1" className="radio-label text-xs">{props.label}</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
$color1: #f4f4f4; |
||||||
|
$color2: #3197EE; |
||||||
|
|
||||||
|
.radio { |
||||||
|
input[type="radio"] { |
||||||
|
position: absolute; |
||||||
|
opacity: 0; |
||||||
|
+ .radio-label { |
||||||
|
&:before { |
||||||
|
content: ''; |
||||||
|
background: $color1; |
||||||
|
border-radius: 100%; |
||||||
|
border: 1px solid darken($color1, 25%); |
||||||
|
display: inline-block; |
||||||
|
width: 1.4em; |
||||||
|
height: 1.4em; |
||||||
|
position: relative; |
||||||
|
vertical-align: top; |
||||||
|
margin-left: 0.5em; |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
transition: all 250ms ease; |
||||||
|
} |
||||||
|
} |
||||||
|
&:checked { |
||||||
|
+ .radio-label { |
||||||
|
&:before { |
||||||
|
background-color: $color2; |
||||||
|
box-shadow: inset 0 0 0 4px $color1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
+ .radio-label { |
||||||
|
&:before { |
||||||
|
outline: none; |
||||||
|
border-color: $color2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&:disabled { |
||||||
|
+ .radio-label { |
||||||
|
&:before { |
||||||
|
box-shadow: inset 0 0 0 4px $color1; |
||||||
|
border-color: darken($color1, 25%); |
||||||
|
background: darken($color1, 25%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
+ .radio-label { |
||||||
|
&:empty { |
||||||
|
&:before { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import React from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import searchIcon from "./search.png"; |
||||||
|
|
||||||
|
const langDetector = (lang = 'fa', option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Search(props) { |
||||||
|
return ( |
||||||
|
<div className="flex items-center justify-center w-full"> |
||||||
|
<div className="relative text-gray-600 focus-within:text-gray-400 w-full"> |
||||||
|
<span className={_.join(["absolute inset-y-0 flex items-center pl-2", langDetector(props.lang, "left-0", "right-0")], " ")}> |
||||||
|
<button |
||||||
|
type="submit" |
||||||
|
className="p-1 focus:outline-none focus:shadow-outline" |
||||||
|
> |
||||||
|
<img src={searchIcon} className="w-6 h-6" alt="" /> |
||||||
|
</button> |
||||||
|
</span> |
||||||
|
<input |
||||||
|
type="search" |
||||||
|
name="q" |
||||||
|
className="w-full py-2 text-sm text-white border rounded-sm pr-5 outline-none focus:ring-1 focus:text-gray-900" |
||||||
|
placeholder={_.join([langDetector(props.lang , "جستجو...", "Search...")], " ")} |
||||||
|
autocomplete="off" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 857 B |
|
After Width: | Height: | Size: 229 B |
@ -0,0 +1,108 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import Checkbox from "../Checkbox"; |
||||||
|
|
||||||
|
import arrowIcon from "./arrow-top.png"; |
||||||
|
|
||||||
|
const langDetector = (lang, option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
export default function SelectCheckbox(props) { |
||||||
|
const [selectedItem, setSelectedItem] = useState(""); |
||||||
|
const [value, setValue] = useState(""); |
||||||
|
|
||||||
|
const [toggle, setToggle] = useState(false); |
||||||
|
const { lang, theme, list, label } = props; |
||||||
|
|
||||||
|
const onChangeItem = (val) => { |
||||||
|
setSelectedItem(val); |
||||||
|
}; |
||||||
|
|
||||||
|
const onChangeText = (val) => { |
||||||
|
setValue(val); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["select-search flex flex-col relative", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["search flex flex-column relative", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onClick={() => setToggle(() => !toggle)} |
||||||
|
> |
||||||
|
<input |
||||||
|
type="search" |
||||||
|
className="w-full py-3 px-3 text-xs border rounded-sm bg-transparent placeholder-gray-500" |
||||||
|
onChange={(e) => onChangeText(e.target.value)} |
||||||
|
placeholder={langDetector(lang, "تنظیمات", "setting")} |
||||||
|
disabled |
||||||
|
/> |
||||||
|
<img |
||||||
|
src={arrowIcon} |
||||||
|
alt="" |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"cursor-pointer w-5 absolute top-1/2 transform -translate-y-1/2 transition-all duration-300", |
||||||
|
langDetector(lang, "left-3", "right-3"), |
||||||
|
toggle ? '-rotate-180' : '', |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{toggle && ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"select-search__list absolute top-12 left-0 flex flex-col px-5 border rounded-sm w-full bg-white z-20", |
||||||
|
toggle ? "select-search__listActive" : "", |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<ul className="list-none p-0 divide-y divide-gray-200 w-full"> |
||||||
|
{list?.map((item, i) => ( |
||||||
|
<> |
||||||
|
<li key={i} className="w-full py-1 text-gray-700 flex items-start flex-col"> |
||||||
|
<div className="flex items-center"> |
||||||
|
<Checkbox checked={false} /> |
||||||
|
<span className="text-xs">{item?.name}</span> |
||||||
|
</div> |
||||||
|
<ul className="w-full p-0 mx-auto my-0"> |
||||||
|
{item.sublist?.map((item1, j) => ( |
||||||
|
<> |
||||||
|
<li className="flex flex-row flex-1 pt-1 px-5 pb-0 items-center" key={j}> |
||||||
|
<Checkbox checked={false} /> |
||||||
|
<span className="text-xs">{item1?.name}</span> |
||||||
|
</li> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
SelectCheckbox.defaultProps = { |
||||||
|
lang: "fa", |
||||||
|
theme: "light", |
||||||
|
label: "کشور خود را انتخاب کنید", |
||||||
|
list: [ |
||||||
|
{ name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] }, |
||||||
|
{ name: "غریق نجات از تمام جهات" }, |
||||||
|
{ name: "قاشق و چنگال" }, |
||||||
|
{ name: "وسایل آشپزخانه" }, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 229 B |
@ -0,0 +1,100 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import Radio from "../Radio"; |
||||||
|
|
||||||
|
import xIcon from "./x.png"; |
||||||
|
import arrowIcon from "./arrow-top.png"; |
||||||
|
|
||||||
|
|
||||||
|
const langDetector = (lang, option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
|
||||||
|
export default function SelectRadio(props) { |
||||||
|
const [selectedItem, setSelectedItem] = useState(""); |
||||||
|
const [value, setValue] = useState(""); |
||||||
|
|
||||||
|
const [toggle, setToggle] = useState(false); |
||||||
|
const { lang, theme, list, label } = props; |
||||||
|
|
||||||
|
const onChangeItem = (val) => { |
||||||
|
setSelectedItem(val); |
||||||
|
}; |
||||||
|
|
||||||
|
const onChangeText = (val) => { |
||||||
|
setValue(val); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"flex flex-col relative", |
||||||
|
langDetector(lang, "fa", "en"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["flex flex-col relative", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onClick={() => setToggle(() => !toggle)} |
||||||
|
> |
||||||
|
<input |
||||||
|
type="search" |
||||||
|
className="py-3 px-3 text-xs border rounded-sm bg-transparent focus:ring-1 outline-none focus:placeholder-blue-500 placeholder-gray-500" |
||||||
|
onChange={(e) => onChangeText(e.target.value)} |
||||||
|
placeholder={langDetector(lang, "تنظیمات", "setting")} |
||||||
|
disabled |
||||||
|
/> |
||||||
|
<img |
||||||
|
src={arrowIcon} |
||||||
|
alt="" |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"w-5 absolute top-1/2 transform -translate-y-1/2 cursor-pointer transition-all duration-300", |
||||||
|
langDetector(lang, "left-3", "right-3"), |
||||||
|
toggle ? '-rotate-180' : '' |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{toggle && ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"w-full absolute top-12 left-0 flex flex-col border rounded-sm bg-white z-20", |
||||||
|
toggle ? "select-search__listActive" : "", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<ul className="list-none divide-y divide-gray-200 py-1 text-gray-700 w-full px-3"> |
||||||
|
{list?.map((item, i) => ( |
||||||
|
<> |
||||||
|
<li key={i} className="transition w-full text-gray-700 items-center py-3 flex-col justify-center"> |
||||||
|
<Radio label={item?.name} name="reza" /> |
||||||
|
</li> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
SelectRadio.defaultProps = { |
||||||
|
lang: "fa", |
||||||
|
theme: "light", |
||||||
|
label: "کشور خود را انتخاب کنید", |
||||||
|
list: [ |
||||||
|
{ name: "وسایل آشپزخانه", sublist: [{ name: "اتو" }] }, |
||||||
|
{ name: "غریق نجات از تمام جهات" }, |
||||||
|
{ name: "قاشق و چنگال" }, |
||||||
|
{ name: "وسایل آشپزخانه" }, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 346 B |
@ -0,0 +1,9 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
export default function Col() { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,66 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import category from "./data"; |
||||||
|
import _ from "lodash"; |
||||||
|
|
||||||
|
export default function SidebarCategoryHover() { |
||||||
|
const [activeItem, setActiveItem] = useState(null); |
||||||
|
|
||||||
|
const arrayLength = category.length; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col w-60 relative" onMouseOut={() => setActiveItem(null)}> |
||||||
|
<ul className="list-none w-full divide-y border divide-gray-200"> |
||||||
|
{category.map((item, i) => ( |
||||||
|
<> |
||||||
|
<li |
||||||
|
className="p-4 w-full text-gray-500 font-normal text-sm hover:bg-blue-100 text-right" |
||||||
|
key={i} |
||||||
|
onMouseOver={() => setActiveItem(item.id)} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</li> |
||||||
|
<ul |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"absolute right-60 top-0 h-full border flex-row divide-x divide-gray-200", |
||||||
|
activeItem === item.id ? "flex" : "hidden", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
onMouseOver={() => setActiveItem(item.id)} |
||||||
|
// style={{width : 1000}}
|
||||||
|
> |
||||||
|
<li className="h-full w-52 bg-red-50 flex flex-col text-right"> |
||||||
|
<li className="flex items-center" style={{ minHeight: "calc(100% / 9)" }}> |
||||||
|
{item.categories[0].name} |
||||||
|
</li> |
||||||
|
{item.categories[0].list.map((item1, i) => ( |
||||||
|
<li |
||||||
|
key={i} |
||||||
|
className="text-normal flex text-sm items-center" |
||||||
|
style={{ minHeight: "calc(100% / 9)" }} |
||||||
|
> |
||||||
|
{item1.name} |
||||||
|
</li> |
||||||
|
))} |
||||||
|
<li className="flex items-center" style={{ minHeight: "calc(100% / 9)" }}> |
||||||
|
{item.categories[1].name} |
||||||
|
</li> |
||||||
|
{item.categories[1].list.map((item1, i) => ( |
||||||
|
<li key={i} className="flex items-center" style={{ minHeight: "calc(100% / 9)" }}> |
||||||
|
{item1.name} |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</li> |
||||||
|
<li className="h-full w-52 bg-green-50"></li> |
||||||
|
<li className="h-full w-52 bg-blue-50"></li> |
||||||
|
<li className="h-full w-52 bg-red-50"></li> |
||||||
|
<li className="h-full w-52 bg-green-50"></li> |
||||||
|
<li className="h-full w-52 bg-blue-50"></li> |
||||||
|
</ul> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
export default function index() { |
||||||
|
return ( |
||||||
|
<div className="switch"> |
||||||
|
<input type="checkbox" id="toggle" /> |
||||||
|
<label for="toggle"></label> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
// *, *: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; |
||||||
|
|
||||||
|
&: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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 229 B |
@ -0,0 +1,170 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import searchIcon from "./search.png"; |
||||||
|
import _ from "lodash"; |
||||||
|
import Checkbox from "../Checkbox"; |
||||||
|
import arrowIcon from "./arrow-top.png"; |
||||||
|
|
||||||
|
const langDetector = (lang = "fa", option1, option2) => { |
||||||
|
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 ( |
||||||
|
<div className="flex flex-col w-full border rounded-md pt-6 bg-transparent max-h-screen"> |
||||||
|
<strong className="text-md text-gray-500 w-full mb-3 text-right px-3"> |
||||||
|
دسته بندی |
||||||
|
</strong> |
||||||
|
<form className="relative w-full px-3 mb-3"> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
placeholder={_.join( |
||||||
|
[langDetector(props.lang, "جستجو...", "Search...")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
className="border rounded-sm py-1 px-2 w-full placeholder-gray-300 outline-none text-gray-500" |
||||||
|
onChange={(e) => setText(e.target.value)} |
||||||
|
/> |
||||||
|
<span |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"absolute inset-y-0 flex items-center", |
||||||
|
langDetector(props.lang, "left-4", "right-4"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<button |
||||||
|
type="submit" |
||||||
|
className="p-1 focus:outline-none focus:shadow-outline" |
||||||
|
> |
||||||
|
<img src={searchIcon} className="w-5 h-5" alt="" /> |
||||||
|
</button> |
||||||
|
</span> |
||||||
|
</form> |
||||||
|
<ul className="w-full list-none flex flex-col divide-y divide-gray-100"> |
||||||
|
{(searchResult.length > 0 ? searchResult : props.list)?.map( |
||||||
|
(item1, i) => ( |
||||||
|
<li |
||||||
|
key={i} |
||||||
|
className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2" |
||||||
|
> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<Checkbox /> |
||||||
|
<strong className="text-xs font-light text-gray-500"> |
||||||
|
{item1.name} |
||||||
|
</strong> |
||||||
|
</div> |
||||||
|
|
||||||
|
{item1.subList?.length > 0 && ( |
||||||
|
<img |
||||||
|
src={arrowIcon} |
||||||
|
alt="" |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"cursor-pointer w-5 transform transition-all duration-300", |
||||||
|
item1.expaneded ? "" : "rotate-180", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</li> |
||||||
|
) |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
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: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 857 B |
@ -0,0 +1,88 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
import searchIcon from "./search.png"; |
||||||
|
|
||||||
|
const langDetector = (lang, option1, option2) => { |
||||||
|
return lang === "fa" ? option1 : option2; |
||||||
|
}; |
||||||
|
|
||||||
|
export default function PopularSearch(props) { |
||||||
|
const [value, setValue] = useState(""); |
||||||
|
const [popularsToggle, setPopularsToggle] = useState(false); |
||||||
|
const { lang, theme, populars } = props; |
||||||
|
|
||||||
|
const onChange = (val) => { |
||||||
|
setValue(val); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
["flex flex-col relative search", langDetector(lang, "fa", "en")], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<input |
||||||
|
type="search" |
||||||
|
className="transition py-2 pr-4 pl-2 mx-0 border rounded-sm outline-none focus:ring-1 placeholder-gray-500 placeholder-opacity-40 focus:placeholder-blue-300" |
||||||
|
onChange={(e) => onChange(e.target.value)} |
||||||
|
value={value} |
||||||
|
placeholder={langDetector( |
||||||
|
lang, |
||||||
|
"نام کالا را جستجو کنید", |
||||||
|
"search product name" |
||||||
|
)} |
||||||
|
onFocus={() => setPopularsToggle(true)} |
||||||
|
onBlur={() => |
||||||
|
setTimeout(() => { |
||||||
|
setPopularsToggle(false); |
||||||
|
}, 250) |
||||||
|
} |
||||||
|
/> |
||||||
|
<img |
||||||
|
src={searchIcon} |
||||||
|
alt={langDetector(lang, "جستجو", "search")} |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"search__icon absolute w-6 h-6 top-1/2 transform -translate-y-1/2", |
||||||
|
langDetector(lang, "left-3", "right-3"), |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
/> |
||||||
|
<div |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"search__populars w-full mt-0 border rounded-sm top-12 left-0 absolute z-10 px-4 bg-white", |
||||||
|
popularsToggle ? "flex flex-col" : "hidden", |
||||||
|
"transition", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
> |
||||||
|
<strong className="py-3"> |
||||||
|
{langDetector(lang, "جستجوهای پرطرفدار", "Popular search")} |
||||||
|
</strong> |
||||||
|
<ul className="divide-y divide-gray-200"> |
||||||
|
{populars?.map((item, i) => ( |
||||||
|
<> |
||||||
|
<li |
||||||
|
key={i} |
||||||
|
className="transition py-3 px-1 hover:bg-blue-100" |
||||||
|
onClick={() => setValue(() => item)} |
||||||
|
> |
||||||
|
{item} |
||||||
|
</li> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
PopularSearch.defaultProps = { |
||||||
|
lang: "fa", |
||||||
|
theme: "light", |
||||||
|
populars: ["علی", "علیرضا", "محمد", "محمدرضا"], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 857 B |
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="react-scripts" />
|
||||||
@ -0,0 +1,11 @@ |
|||||||
|
module.exports = { |
||||||
|
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], |
||||||
|
darkMode: 'class', // or 'media' or 'class'
|
||||||
|
theme: { |
||||||
|
extend: {}, |
||||||
|
}, |
||||||
|
variants: { |
||||||
|
extend: {}, |
||||||
|
}, |
||||||
|
plugins: [], |
||||||
|
} |
||||||
Loading…
Reference in new issue