parent
652bd0a768
commit
33f84f7c53
13 changed files with 220 additions and 81 deletions
@ -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); |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 857 B |
@ -0,0 +1,66 @@ |
||||
$primary: #246e8a; |
||||
$gray: #dbdbdb; |
||||
|
||||
.search { |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
&__icon { |
||||
width: 27px; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
&Fa { |
||||
left: 20px; |
||||
} |
||||
&En { |
||||
right: 20px; |
||||
} |
||||
} |
||||
|
||||
&__x { |
||||
width: 15px; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
opacity: 0; |
||||
&Fa { |
||||
right: 15px; |
||||
} |
||||
&En { |
||||
left: 10px; |
||||
} |
||||
&Active{ |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
input { |
||||
padding: 15px 40px 15px 30px; |
||||
font-size: 14px; |
||||
border: 1.7px solid $gray; |
||||
border-radius: 5px; |
||||
background-color: inherit; |
||||
&::placeholder { |
||||
color: $gray; |
||||
} |
||||
&:focus { |
||||
border-color: $primary; |
||||
outline: 0px; |
||||
color: #246e8a; |
||||
&::placeholder { |
||||
color: #246e8a; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.en { |
||||
direction: ltr; |
||||
text-align: left; |
||||
} |
||||
|
||||
.fa { |
||||
direction: rtl; |
||||
text-align: right; |
||||
} |
||||
@ -0,0 +1,72 @@ |
||||
import React, { useState } from "react"; |
||||
import _ from "lodash"; |
||||
import searchIcon from "./icon.png"; |
||||
import xIcon from "./x.png"; |
||||
|
||||
interface Types { |
||||
lang?: string; |
||||
theme?: string; |
||||
} |
||||
|
||||
const langDetector = (lang: string, option1: any, option2: any) => { |
||||
return lang === "fa" ? option1 : option2; |
||||
}; |
||||
|
||||
export default function Search(props: Types) { |
||||
const [clear, setClear] = useState(false); |
||||
const [value, setValue] = useState(""); |
||||
const { lang, theme } = props; |
||||
|
||||
const onChange = (val: string) => { |
||||
setValue(val); |
||||
if (val.length) { |
||||
setClear(true); |
||||
} else { |
||||
setClear(false); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
["search", langDetector(lang as string, "fa", "en")], |
||||
" " |
||||
)} |
||||
> |
||||
<input |
||||
type="search" |
||||
className="transition" |
||||
onChange={(e: any) => onChange(e.target.value)} |
||||
value={value} |
||||
placeholder={langDetector( |
||||
lang as string, |
||||
"نام کالا را جستجو کنید", |
||||
"search product name" |
||||
)} |
||||
/> |
||||
<img |
||||
src={searchIcon} |
||||
alt={langDetector(lang as string, "جستجو", "search")} |
||||
className={_.join([ |
||||
"search__icon", |
||||
langDetector(lang as string, "search__iconFa", "search__iconEn"), |
||||
], " ")} |
||||
/> |
||||
<img |
||||
src={xIcon} |
||||
alt={langDetector(lang as string, "پاک کردن", "clear")} |
||||
className={_.join([ |
||||
"search__x", |
||||
"transition", |
||||
langDetector(lang as string, "search__xFa", "search__xEn"), |
||||
value ? "search__xActive" : "", |
||||
], " ")} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
Search.defaultProps = { |
||||
lang: "fa", |
||||
theme: "light", |
||||
}; |
||||
|
After Width: | Height: | Size: 346 B |
@ -0,0 +1,22 @@ |
||||
@import './components/Search/index.scss'; |
||||
|
||||
.app{ |
||||
padding: 50px 20px; |
||||
min-height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: black; |
||||
} |
||||
|
||||
.transition{ |
||||
transition: all 0.4s; |
||||
} |
||||
|
||||
/* clears the ‘X’ from Internet Explorer */ |
||||
input[type=search]::-ms-clear { display: none; width : 0; height: 0; } |
||||
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; } |
||||
/* clears the ‘X’ from Chrome */ |
||||
input[type="search"]::-webkit-search-decoration, |
||||
input[type="search"]::-webkit-search-cancel-button, |
||||
input[type="search"]::-webkit-search-results-button, |
||||
input[type="search"]::-webkit-search-results-decoration { display: none; } |
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,15 +0,0 @@ |
||||
import { ReportHandler } from 'web-vitals'; |
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => { |
||||
if (onPerfEntry && onPerfEntry instanceof Function) { |
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { |
||||
getCLS(onPerfEntry); |
||||
getFID(onPerfEntry); |
||||
getFCP(onPerfEntry); |
||||
getLCP(onPerfEntry); |
||||
getTTFB(onPerfEntry); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
export default reportWebVitals; |
||||
Loading…
Reference in new issue