diff --git a/src/App.js b/src/App.js index 4692ead..b986731 100644 --- a/src/App.js +++ b/src/App.js @@ -52,6 +52,7 @@ import Blogs from "./components/Blogs"; import FileManager from "./components/FileManager"; import Playlist from "./components/Playlist"; import Folderlists from "./components/Folderlist"; +import CardHolder from "./components/CardHolder"; // import Digikala from "./components/Digikala/ImageSlider"; @@ -110,8 +111,9 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} + ); diff --git a/src/components/CardHolder/images/blue-icon.svg b/src/components/CardHolder/images/blue-icon.svg new file mode 100644 index 0000000..56051f2 --- /dev/null +++ b/src/components/CardHolder/images/blue-icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/CardHolder/images/dropbox.svg b/src/components/CardHolder/images/dropbox.svg new file mode 100644 index 0000000..a3c2683 --- /dev/null +++ b/src/components/CardHolder/images/dropbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CardHolder/images/google-drive.svg b/src/components/CardHolder/images/google-drive.svg new file mode 100644 index 0000000..8ed90f5 --- /dev/null +++ b/src/components/CardHolder/images/google-drive.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/CardHolder/index.js b/src/components/CardHolder/index.js new file mode 100644 index 0000000..0fc57a0 --- /dev/null +++ b/src/components/CardHolder/index.js @@ -0,0 +1,33 @@ +import React from "react"; + +import dropbox from "./images/dropbox.svg"; + +const CardHolder = ({ + cardImage, + cardBackgroundColor, + cardBorder, + cardBorderColor, + cardBorderRadius, +}) => { + return ( +
+ +
+ ); +}; + +export default CardHolder; + +CardHolder.defaultProps = { + cardImage: dropbox, + cardBackgroundColor: "#fff", + cardBorder: "border-4", + cardBorderColor: "#EEEEEE", + cardBorderRadius: "rounded-lg", +}; diff --git a/src/components/FileManager/gray-search-icon.svg b/src/components/FileManager/images/gray-search-icon.svg similarity index 100% rename from src/components/FileManager/gray-search-icon.svg rename to src/components/FileManager/images/gray-search-icon.svg diff --git a/src/components/FileManager/index.js b/src/components/FileManager/index.js index cb4c135..f0ee5de 100644 --- a/src/components/FileManager/index.js +++ b/src/components/FileManager/index.js @@ -3,8 +3,9 @@ import React from "react"; import BreadCrumb from "../BreadCrumb"; import SearchBox from "../SearchBox"; import TitleSubtitle from "../TitleSubtitle"; +import CardHolder from "../CardHolder"; -import graySearchIcon from "./gray-search-icon.svg"; +import graySearchIcon from "./images/gray-search-icon.svg"; const FileManager = () => { return ( @@ -24,6 +25,10 @@ const FileManager = () => { /> +
+ {" "} + +
); };