|
After Width: | Height: | Size: 650 B |
@ -1,7 +1,31 @@ |
||||
import React from "react"; |
||||
|
||||
const index = () => { |
||||
return <div>index</div>; |
||||
import BreadCrumb from "../BreadCrumb"; |
||||
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 |