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 @@
+