master
mahdi andalib 3 years ago
parent 629fdece6b
commit c7fccd0497
  1. 14
      src/App.js
  2. 4
      src/components/BreadCrumb/index.js
  3. 5
      src/components/FileManager/gray-search-icon.svg
  4. 30
      src/components/FileManager/index.js
  5. 5
      src/components/Playlist/images/document.svg
  6. 6
      src/components/Playlist/images/gallery.svg
  7. 10
      src/components/Playlist/images/music-square.svg
  8. 5
      src/components/Playlist/images/video-play.svg
  9. 74
      src/components/Playlist/index.js
  10. 2
      src/components/ReactTable4/index.js
  11. 59
      src/components/SearchBox/index.js
  12. 10
      src/components/SearchBox/search-normal.svg
  13. 6
      src/components/SearchBox/zarbedar-icon.svg

@ -45,10 +45,14 @@ import ReactTable2 from "./components/ReactTable2";
import ReactTable3 from "./components/ReactTable3"; import ReactTable3 from "./components/ReactTable3";
import ReactTable4 from "./components/ReactTable4"; import ReactTable4 from "./components/ReactTable4";
import Digikala from "./components/Digikala"; import Digikala from "./components/Digikala";
// import Digikala from "./components/Digikala/ImageSlider";
import Switch from "./components/Switch"; import Switch from "./components/Switch";
import BreadCrumb from "./components/BreadCrumb"; 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() { function App() {
return ( return (
@ -101,7 +105,11 @@ function App() {
<FooterDesign1 /> <FooterDesign1 />
</span> </span>
</div> */} </div> */}
<BreadCrumb /> {/* <BreadCrumb /> */}
{/* <SearchBox /> */}
{/* <FileManager /> */}
<Playlist />
{/* <Blogs /> */}
</div> </div>
</Provider> </Provider>
); );

@ -26,9 +26,9 @@ const BreadCrumb = ({ breadCrumbs }) => {
<img src={blackLeftArrow} className="w-10" /> <img src={blackLeftArrow} className="w-10" />
)} */} )} */}
{Number(index) === breadCrumbs.length - 2 ? ( {Number(index) === breadCrumbs.length - 2 ? (
<img src={blackLeftArrow} className="w-10" /> <img src={blackLeftArrow} className="w-4" />
) : ( ) : (
<img src={grayLeftArrow} className="w-10" /> <img src={grayLeftArrow} className="w-4" />
)} )}
</div> </div>
)} )}

@ -0,0 +1,5 @@
<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="26.075" height="26.075" viewBox="0 0 26.075 26.075">
<path id="Vector" d="M20.642,10.321A10.321,10.321,0,1,1,10.321,0,10.321,10.321,0,0,1,20.642,10.321Z" transform="translate(2.173 2.173)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M2.173,2.173,0,0" transform="translate(21.729 21.729)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H26.075V26.075H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 650 B

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

@ -0,0 +1,5 @@
<svg id="document" xmlns="http://www.w3.org/2000/svg" width="60.553" height="60.552" viewBox="0 0 60.553 60.552">
<path id="Vector" d="M50.461,20.184V32.8c0,12.615-5.046,17.661-17.661,17.661H17.661C5.046,50.46,0,45.414,0,32.8V17.661C0,5.046,5.046,0,17.661,0H30.276" transform="translate(5.046 5.046)" fill="#4cd6ac"/>
<path id="Vector-2" data-name="Vector" d="M19.2,19.207H9.6c-7.2,0-9.6-2.4-9.6-9.6V0Z" transform="translate(35.322 6.023)" fill="#4cd6ac" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H60.553V60.552H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 639 B

@ -0,0 +1,6 @@
<svg id="gallery" xmlns="http://www.w3.org/2000/svg" width="61.153" height="61.152" viewBox="0 0 61.153 61.152">
<path id="Vector" d="M17.836,50.96H33.125c12.74,0,17.836-5.1,17.836-17.836V17.836C50.961,5.1,45.865,0,33.125,0H17.836C5.1,0,0,5.1,0,17.836V33.124C0,45.864,5.1,50.96,17.836,50.96Z" transform="translate(5.096 5.096)" fill="#0dcde2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M10.192,5.1A5.1,5.1,0,1,1,5.1,0,5.1,5.1,0,0,1,10.192,5.1Z" transform="translate(17.836 15.288)" fill="#0dcde2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,17.715,12.562,9.281a5.741,5.741,0,0,1,6.727.357l.841.739a5.681,5.681,0,0,0,7.185,0l10.6-9.1a5.681,5.681,0,0,1,7.185,0l4.153,3.567" transform="translate(6.803 30.57)" fill="#0dcde2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M0,0H61.153V61.152H0Z" fill="#0dcde2" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,10 @@
<svg id="music-square" xmlns="http://www.w3.org/2000/svg" width="61.153" height="61.152" viewBox="0 0 61.153 61.152">
<path id="Vector" d="M50.961,33.124V17.836C50.961,5.1,45.865,0,33.125,0H17.836C5.1,0,0,5.1,0,17.836V33.124C0,45.864,5.1,50.96,17.836,50.96H33.125C45.865,50.96,50.961,45.864,50.961,33.124Z" transform="translate(5.096 5.096)" fill="#0c60f2" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<g id="Group" transform="translate(17.454 17.849)">
<path id="Vector-2" data-name="Vector" d="M8,4A4,4,0,1,1,4,0,4,4,0,0,1,8,4Z" transform="translate(0 17.747)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M14.651,19.072V3.427c0-3.338-2.089-3.8-4.2-3.21l-8,2.191A3.2,3.2,0,0,0,0,5.618V21.773" transform="translate(8.026)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M8,4A4,4,0,1,1,4,0,4,4,0,0,1,8,4Z" transform="translate(14.677 15.071)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,4,14.677,0" transform="translate(8.001 6.28)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
<path id="Vector-6" data-name="Vector" d="M0,0H61.153V61.152H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,5 @@
<svg id="video-play" xmlns="http://www.w3.org/2000/svg" width="60.553" height="60.552" viewBox="0 0 60.553 60.552">
<path id="Vector" d="M50.461,32.8V17.661C50.461,5.046,45.415,0,32.8,0H17.661C5.046,0,0,5.046,0,17.661V32.8C0,45.414,5.046,50.46,17.661,50.46H32.8C45.415,50.46,50.461,45.414,50.461,32.8Z" transform="translate(5.046 5.046)" fill="#9bdf12"/>
<path id="Vector-2" data-name="Vector" d="M0,7.389V4.361C0,.476,2.75-1.114,6.106.829L8.73,2.343l2.624,1.514c3.356,1.943,3.356,5.122,0,7.064L8.73,12.435,6.106,13.949C2.75,15.892,0,14.3,0,10.417V7.389Z" transform="translate(24.6 22.887)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H60.553V60.552H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 787 B

@ -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 (
<section className="flex flex-row items-center justify-around mt-5">
{items.map((item, index) => (
<div
className="flex flex-row items-center bg-white border-2 rounded-lg p-4 "
style={{ borderColor: "#EEEEEE" }}
key={index}
>
<img src={item.icon} className="w-14 " />
<div className="flex flex-col mr-1">
<p style={{ color: "#00253A" }} className="text-sm">
{item.title}
</p>
<span style={{ color: "#81818177" }} className="text-xs mt-2">
{item.percent}
</span>
</div>
<div className="flex flex-col items-center mr-3">
<p style={{ color: "#132F52" }} className="font-bold text-xs">
{item.memory} <span className="font-light">گیگابایت</span>{" "}
</p>
<p style={{ color: "#132F52" }} className="font-bold text-xs mt-2">
{item.fileNum} <span className="font-light">فایل</span>{" "}
</p>
</div>
</div>
))}
</section>
);
};
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,
},
],
};

@ -6,12 +6,12 @@ import TitleSubtitle from "../TitleSubtitle";
import MultiRangeInput from "./MultiRangeInput"; import MultiRangeInput from "./MultiRangeInput";
import grayLeftArrow from "./gray-arrow-left.svg"; import grayLeftArrow from "./gray-arrow-left.svg";
import { BreadCrumb } from "../BreadCrumb";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
const [tabs, setTabs] = useState([ const [tabs, setTabs] = useState([
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
]); ]);
let [activeTab, setActivateTab] = useState(0); let [activeTab, setActivateTab] = useState(0);
const stateRef = useRef(); const stateRef = useRef();

@ -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",
};

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="search-normal" transform="translate(-428 -188)">
<g id="Vector" transform="translate(430 190)" fill="none">
<path d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" stroke="none"/>
<path d="M 9.5 1.5 C 5.088789939880371 1.5 1.5 5.088789939880371 1.5 9.5 C 1.5 13.91121006011963 5.088789939880371 17.5 9.5 17.5 C 13.91121006011963 17.5 17.5 13.91121006011963 17.5 9.5 C 17.5 5.088789939880371 13.91121006011963 1.5 9.5 1.5 M 9.5 0 C 14.74670028686523 0 19 4.253290176391602 19 9.5 C 19 14.74670028686523 14.74670028686523 19 9.5 19 C 4.253290176391602 19 0 14.74670028686523 0 9.5 C 0 4.253290176391602 4.253290176391602 0 9.5 0 Z" stroke="none" fill="#65a9ff"/>
</g>
<path id="Vector-2" data-name="Vector" d="M2.552,3.252a.7.7,0,0,1-.49-.2L.2,1.192A.706.706,0,0,1,.2.2a.706.706,0,0,1,.99,0l1.86,1.86a.706.706,0,0,1,0,.99A.738.738,0,0,1,2.552,3.252Z" transform="translate(446.747 206.747)" fill="#65a9ff"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(452 212) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="5.397" height="5.397" viewBox="0 0 5.397 5.397">
<g id="Group_1887" data-name="Group 1887" transform="translate(0.707 0.707)">
<path id="Vector" d="M3.943,3.943,0,0" transform="translate(0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M3.943,0,0,3.943" transform="translate(0 0.04)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 545 B

Loading…
Cancel
Save