|
After Width: | Height: | Size: 650 B |
@ -1,7 +1,31 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
|
|
||||||
const index = () => { |
import BreadCrumb from "../BreadCrumb"; |
||||||
return <div>index</div>; |
import SearchBox from "../SearchBox"; |
||||||
|
import TitleSubtitle from "../TitleSubtitle"; |
||||||
|
|
||||||
|
import graySearchIcon from "./gray-search-icon.svg"; |
||||||
|
|
||||||
|
const FileManager = () => { |
||||||
|
return ( |
||||||
|
<div style={{ backgroundColor: "#FBFBFB" }}> |
||||||
|
<div className="flex flex-row justify-between w-8/12"> |
||||||
|
<div className=""> |
||||||
|
<BreadCrumb /> |
||||||
|
<TitleSubtitle /> |
||||||
|
</div> |
||||||
|
<div className="self-end"> |
||||||
|
<SearchBox |
||||||
|
borderClr={"#EEEEEE"} |
||||||
|
backgroundColor={"#fff"} |
||||||
|
inputWidth={"100%"} |
||||||
|
placeHolderColor={"placeholder-gray-300"} |
||||||
|
searchIcon={graySearchIcon} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default index; |
export default FileManager; |
||||||
|
|||||||
|
After Width: | Height: | Size: 639 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 787 B |
@ -0,0 +1,59 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import search from "./search-normal.svg"; |
||||||
|
import zarbedar from "./zarbedar-icon.svg"; |
||||||
|
|
||||||
|
const SearchBox = ({ |
||||||
|
cancleIcon, |
||||||
|
searchIcon, |
||||||
|
borderClr, |
||||||
|
backgroundColor, |
||||||
|
inputWidth, |
||||||
|
placeHolderColor, |
||||||
|
}) => { |
||||||
|
const [activeSearchBox, setActiveSearchBox] = useState(false); |
||||||
|
return ( |
||||||
|
<div className="flex flex-row-reverse items-center relative ml-2 "> |
||||||
|
{activeSearchBox && ( |
||||||
|
<img |
||||||
|
src={cancleIcon} |
||||||
|
alt="" |
||||||
|
className="w-3 h-3 absolute left-7 cursor-pointer" |
||||||
|
onClick={() => setActiveSearchBox(false)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{searchIcon && ( |
||||||
|
<img |
||||||
|
src={searchIcon} |
||||||
|
alt="" |
||||||
|
className="w-4 h-4 absolute left-2 cursor-pointer" |
||||||
|
/> |
||||||
|
)} |
||||||
|
<input |
||||||
|
onFocus={() => setActiveSearchBox(true)} |
||||||
|
// onBlur={() => setActiveSearchBox(false)}
|
||||||
|
type="text" |
||||||
|
placeholder="دنبال چه چیزی هستید" |
||||||
|
className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20 ${placeHolderColor}`} |
||||||
|
style={{ |
||||||
|
backgroundColor: backgroundColor, |
||||||
|
borderColor: borderClr, |
||||||
|
width: inputWidth, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default SearchBox; |
||||||
|
|
||||||
|
SearchBox.defaultProps = { |
||||||
|
cancleIcon: zarbedar, |
||||||
|
searchIcon: search, |
||||||
|
|
||||||
|
inputWidth: "15%", |
||||||
|
|
||||||
|
borderClr: "#B5D6FF", |
||||||
|
backgroundColor: "#F9FBFF", |
||||||
|
placeHolderColor: "placeholder-blue-300", |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 545 B |