master
mahdi andalib 3 years ago
parent c0a3de0117
commit cc703354f5
  1. 4
      src/App.js
  2. 10
      src/components/CardHolder/index.js
  3. 8
      src/components/UploadFile/images/file.svg
  4. 25
      src/components/UploadFile/index.js

@ -53,6 +53,7 @@ import FileManager from "./components/FileManager";
import Playlist from "./components/Playlist"; import Playlist from "./components/Playlist";
import Folderlists from "./components/Folderlist"; import Folderlists from "./components/Folderlist";
import CardHolder from "./components/CardHolder"; import CardHolder from "./components/CardHolder";
import UploadFile from "./components/UploadFile";
// import Digikala from "./components/Digikala/ImageSlider"; // import Digikala from "./components/Digikala/ImageSlider";
@ -113,7 +114,8 @@ function App() {
{/* <Playlist /> */} {/* <Playlist /> */}
{/* <Folderlists /> */} {/* <Folderlists /> */}
{/* <Blogs /> */} {/* <Blogs /> */}
<CardHolder /> {/* <CardHolder /> */}
<UploadFile />
</div> </div>
</Provider> </Provider>
); );

@ -11,13 +11,21 @@ const CardHolder = ({
}) => { }) => {
return ( return (
<div <div
className={`bg-white m-20 ${cardBorder} ${cardBorderRadius}`} className={`w-fit bg-white px-4 py-1 flex flex-row items-center ${cardBorder} ${cardBorderRadius}`}
style={{ style={{
backgroundColor: cardBackgroundColor, backgroundColor: cardBackgroundColor,
borderColor: cardBorderColor, borderColor: cardBorderColor,
}} }}
> >
<img src={cardImage} className="w-20" /> <img src={cardImage} className="w-20" />
<div className="flex flex-col mr-2">
<p style={{ color: "#00253A" }} className="text-sm">
فضای ذخیره سازی گوگل درایو
</p>
<p className="text-xs text-gray-400 font-light mr-1 mt-2">
فضای باقیمانده 40 گیگابایت از 1000 گیگابایت
</p>
</div>
</div> </div>
); );
}; };

@ -0,0 +1,8 @@
<svg id="vuesax_bulk_gallery" data-name="vuesax/bulk/gallery" xmlns="http://www.w3.org/2000/svg" width="65.239" height="65.239" viewBox="0 0 65.239 65.239">
<g id="gallery">
<path id="Vector" d="M54.366,15.793V32.348l-4.431-3.806a6.06,6.06,0,0,0-7.666,0l-11.308,9.7a6.06,6.06,0,0,1-7.666,0l-.924-.761A6.037,6.037,0,0,0,15.2,37.1L1.821,46.075l-.3.217A18.275,18.275,0,0,1,0,38.573V15.793C0,5.9,5.9,0,15.793,0H38.573C48.467,0,54.366,5.9,54.366,15.793Z" transform="translate(5.437 5.437)" fill="#65a9ff" opacity="0.29"/>
<path id="Vector-2" data-name="Vector" d="M12.939,6.47A6.47,6.47,0,1,1,6.47,0,6.47,6.47,0,0,1,12.939,6.47Z" transform="translate(17.995 15.277)" fill="#65a9ff"/>
<path id="Vector-3" data-name="Vector" d="M52.844,5.172V11.4c0,9.895-5.9,15.793-15.793,15.793H14.271C7.339,27.19,2.338,24.281,0,19.116L.3,18.9l13.374-8.97a6.037,6.037,0,0,1,7.176.381l.924.761a6.06,6.06,0,0,0,7.666,0l11.308-9.7a6.06,6.06,0,0,1,7.666,0Z" transform="translate(6.959 32.613)" fill="#65a9ff"/>
<path id="Vector-4" data-name="Vector" d="M0,0H65.239V65.239H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,25 @@
import React from "react";
import file from "./images/file.svg";
const index = () => {
return (
<div className="bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
<div className=" cursor-pointer">
<img src={file} className="cursor-pointer relative" />
<input
type="file"
className="absolute top-10 opacity-0"
style={{ right: "0px" }}
name=""
/>
</div>
<p className="text-sm mt-5">
یک فایل را اینجا بکشید یا از{" "}
<span className="text-blue-300">رایانه خود انتخاب کنید</span>
</p>
</div>
);
};
export default index;
Loading…
Cancel
Save