diff --git a/src/App.js b/src/App.js index 207f172..d8ac3b8 100644 --- a/src/App.js +++ b/src/App.js @@ -45,10 +45,14 @@ import ReactTable2 from "./components/ReactTable2"; import ReactTable3 from "./components/ReactTable3"; import ReactTable4 from "./components/ReactTable4"; import Digikala from "./components/Digikala"; -// import Digikala from "./components/Digikala/ImageSlider"; - import Switch from "./components/Switch"; import BreadCrumb from "./components/BreadCrumb"; +import SearchBox from "./components/SearchBox"; +import Blogs from "./components/Blogs"; +import FileManager from "./components/FileManager"; +import Playlist from "./components/Playlist"; + +// import Digikala from "./components/Digikala/ImageSlider"; function App() { return ( @@ -101,7 +105,11 @@ function App() { */} - + {/* */} + {/* */} + {/* */} + + {/* */} ); diff --git a/src/components/BreadCrumb/index.js b/src/components/BreadCrumb/index.js index 38611e9..b09ec4f 100644 --- a/src/components/BreadCrumb/index.js +++ b/src/components/BreadCrumb/index.js @@ -26,9 +26,9 @@ const BreadCrumb = ({ breadCrumbs }) => { )} */} {Number(index) === breadCrumbs.length - 2 ? ( - + ) : ( - + )} )} diff --git a/src/components/FileManager/gray-search-icon.svg b/src/components/FileManager/gray-search-icon.svg new file mode 100644 index 0000000..4dec62c --- /dev/null +++ b/src/components/FileManager/gray-search-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/FileManager/index.js b/src/components/FileManager/index.js index ffab46a..cb4c135 100644 --- a/src/components/FileManager/index.js +++ b/src/components/FileManager/index.js @@ -1,7 +1,31 @@ import React from "react"; -const index = () => { - return
index
; +import BreadCrumb from "../BreadCrumb"; +import SearchBox from "../SearchBox"; +import TitleSubtitle from "../TitleSubtitle"; + +import graySearchIcon from "./gray-search-icon.svg"; + +const FileManager = () => { + return ( +
+
+
+ + +
+
+ +
+
+
+ ); }; -export default index; +export default FileManager; diff --git a/src/components/Playlist/images/document.svg b/src/components/Playlist/images/document.svg new file mode 100644 index 0000000..c855afb --- /dev/null +++ b/src/components/Playlist/images/document.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Playlist/images/gallery.svg b/src/components/Playlist/images/gallery.svg new file mode 100644 index 0000000..978ffaa --- /dev/null +++ b/src/components/Playlist/images/gallery.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Playlist/images/music-square.svg b/src/components/Playlist/images/music-square.svg new file mode 100644 index 0000000..eb5e978 --- /dev/null +++ b/src/components/Playlist/images/music-square.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Playlist/images/video-play.svg b/src/components/Playlist/images/video-play.svg new file mode 100644 index 0000000..ff63ef4 --- /dev/null +++ b/src/components/Playlist/images/video-play.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Playlist/index.js b/src/components/Playlist/index.js new file mode 100644 index 0000000..31db4a2 --- /dev/null +++ b/src/components/Playlist/index.js @@ -0,0 +1,74 @@ +import React from "react"; + +// ? images +import document from "./images/document.svg"; +import gallery from "./images/gallery.svg"; +import musicSquare from "./images/music-square.svg"; +import videoPlay from "./images/video-play.svg"; + +const Playlist = ({ items }) => { + return ( +
+ {items.map((item, index) => ( +
+ +
+

+ {item.title} +

+ + {item.percent} + +
+
+

+ {item.memory} گیگابایت{" "} +

+

+ {item.fileNum} فایل{" "} +

+
+
+ ))} +
+ ); +}; + +export default Playlist; + +Playlist.defaultProps = { + items: [ + { + icon: document, + title: "عکس‌ها", + percent: "درصد استفاده شده", + memory: 44, + fileNum: 344, + }, + { + icon: musicSquare, + title: "صوتی", + percent: "درصد استفاده شده", + memory: 44, + fileNum: 444, + }, + { + icon: videoPlay, + title: "ویدئو", + percent: "درصد استفاده شده", + memory: 96, + fileNum: 75, + }, + { + icon: gallery, + title: "فایل‌های مختلف", + percent: "درصد استفاده شده", + memory: 92, + fileNum: 71, + }, + ], +}; diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index f8cf4bb..6bfba9d 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -6,12 +6,12 @@ import TitleSubtitle from "../TitleSubtitle"; import MultiRangeInput from "./MultiRangeInput"; import grayLeftArrow from "./gray-arrow-left.svg"; +import { BreadCrumb } from "../BreadCrumb"; const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const [tabs, setTabs] = useState([ { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, ]); - let [activeTab, setActivateTab] = useState(0); const stateRef = useRef(); diff --git a/src/components/SearchBox/index.js b/src/components/SearchBox/index.js new file mode 100644 index 0000000..b5eea73 --- /dev/null +++ b/src/components/SearchBox/index.js @@ -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 ( +
+ {activeSearchBox && ( + setActiveSearchBox(false)} + /> + )} + {searchIcon && ( + + )} + 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, + }} + /> +
+ ); +}; + +export default SearchBox; + +SearchBox.defaultProps = { + cancleIcon: zarbedar, + searchIcon: search, + + inputWidth: "15%", + + borderClr: "#B5D6FF", + backgroundColor: "#F9FBFF", + placeHolderColor: "placeholder-blue-300", +}; diff --git a/src/components/SearchBox/search-normal.svg b/src/components/SearchBox/search-normal.svg new file mode 100644 index 0000000..49604d0 --- /dev/null +++ b/src/components/SearchBox/search-normal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/SearchBox/zarbedar-icon.svg b/src/components/SearchBox/zarbedar-icon.svg new file mode 100644 index 0000000..682f7a5 --- /dev/null +++ b/src/components/SearchBox/zarbedar-icon.svg @@ -0,0 +1,6 @@ + + + + + +