diff --git a/package-lock.json b/package-lock.json index a6b9d38..fce9e97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,11 +39,13 @@ "react-multi-date-picker": "^3.3.0", "react-qr-code": "^2.0.7", "react-redux": "^7.2.6", + "react-router-dom": "6", "react-scripts": "5.0.0", "react-table": "^7.7.0", "react-tooltip": "^4.2.21", "recharts": "^2.1.8", "redux": "^4.1.2", + "redux-devtools-extension": "^2.13.9", "sass": "^1.45.0", "sweetalert2": "^11.3.4", "swiper": "^8.0.6", @@ -8866,6 +8868,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -14521,6 +14531,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -14806,6 +14840,15 @@ "@babel/runtime": "^7.9.2" } }, + "node_modules/redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "deprecated": "Package moved to @redux-devtools/extension.", + "peerDependencies": { + "redux": "^3.1.0 || ^4.0.0" + } + }, "node_modules/redux-thunk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", @@ -24130,6 +24173,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -28065,6 +28116,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -28287,6 +28355,12 @@ "@babel/runtime": "^7.9.2" } }, + "redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "requires": {} + }, "redux-thunk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", diff --git a/package.json b/package.json index 1921250..31e77c2 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react-tooltip": "^4.2.21", "recharts": "^2.1.8", "redux": "^4.1.2", + "redux-devtools-extension": "^2.13.9", "sass": "^1.45.0", "sweetalert2": "^11.3.4", "swiper": "^8.0.6", diff --git a/src/App.js b/src/App.js index 950862d..b78df5d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,229 +1,15 @@ -import "./App.scss"; - +import Router from "./router.js"; import { Provider } from "react-redux"; import store from "./redux/store"; +import "./App.scss"; -import ButtonDesign from "./components/buttonDesign/ButtonDesign"; -import ProductDesign from "./components/productDesign/ProductDesign"; -import ProductTags from "./components/productTags/ProductTags"; -import CounterDesign from "./components/counterDesign/CounterDesign"; -import BookDesign from "./components/bookDesign/BookDesign"; -import BlogDesign1 from "./components/Blogs/design1/BlogDesign1"; -import BlogDesign2 from "./components/Blogs/design2/BlogDesign2"; -import BlogDesign3 from "./components/Blogs/design3/BlogDesign3"; -import BlogDesign4 from "./components/Blogs/design4/BlogDesign4"; -import BlogDesign5 from "./components/Blogs/design5/BlogDesign5"; -import BlogDesign6 from "./components/Blogs/design6/BlogDesign6"; -import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1"; -import VodProductDesign from "./components/vodProductDesign/VodProductDesign"; -import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection"; -import FooterDesign1 from "./components/footer/design1/FooterDesign1"; -import Testttt from "./components/testtttt/Testttt"; -import Design2D from "./components/Design2D/Design2D"; -import Features from "./components/Features/index"; -import Feedback from "./components/Feedback/index"; -import Alert from "./components/Alert"; -import Toast from "./components/Toast"; -import ProductSuggestion from "./components/ProductSuggestion"; -import ProductImage from "./components/ProductImage"; -import VodProduct from "./components/VodProduct"; -import VodProductNew from "./components/VodProductNew"; -import ProductTab from "./components/ProductTab"; -import ProductStatusCard from "./components/ProductStatusCard"; -import AdvertisementDesign1 from "./components/Advertisement/design1"; -import AdvertisementDesign2 from "./components/Advertisement/design2"; -import AdvertisementDesign3 from "./components/Advertisement/design3"; -import CourseChapter from "./components/CourseChapter"; -import SidebarMenu from "./components/Sidebar/SidebarMenu"; -import SidebarDesign2 from "./components/Sidebar/SidebarDesign2"; -import SimpleBarChart from "./components/Chart/SimpleBarChart"; -import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart"; -import Design1 from "./components/ProductSalesAmount/Design1"; -import Design2 from "./components/ProductSalesAmount/Design2"; -import TableDesign1 from "./components/Table/Design1"; -import ReactTable2 from "./components/ReactTable2"; -import ReactTable3 from "./components/ReactTable3"; -import ReactTable4 from "./components/ReactTable4"; -import ReactTable5 from "./components/ReactTable5"; -import Digikala from "./components/Digikala"; -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 Folderlists from "./components/Folderlist"; -import CardHolder from "./components/CardHolder"; -import UploadFile from "./components/UploadFile"; -import BarChartApex from "./components/BarChartApex"; -import SemiDonut from "./components/SemiDonut"; -import FolderTree from "./components/FolderTree"; -import GridListTable from "./components/GridListTable"; -import PopupCard from "./components/PopupCard"; -import OutlineInput from "./components/OutlineInput"; -import CancleIcon from "./components/CancleIcon"; -import ButtonNewDesign from "./components/ButtonNewDesign"; -import TimeLineComponent from "./components/TimeLineComponent"; -import TitleSubtitle from "./components/TitleSubtitle"; -import TimeLine from "./components/TimeLineComponent/Timeline"; -import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther"; -import SelectYear from "./components/SelectYear"; -import IndianaDragScroll from "./components/IndianaDragScroll"; -import CardTrelloDesign from "./components/CardTrelloDesign"; -import CircleInCircle from "./components/CircleInCircle"; -import NewTagDesign from "./components/NewTagDesign"; -import AnimatedProgressBar from "./components/AnimatedProgressBar"; -import ReligiousTimes from "./components/ReligiousTimes"; -import DistributedData from "./components/DistributedData"; -import CardDesign1 from "./components/CardDesign1"; -import CustomToast from "./components/CustomToast"; -import IconText from "./components/IconText"; -import CardDesign2 from "./components/CardDesign2"; -import ButtonDivTag from "./components/ButtonDivTag"; -import Button from "./components/Button"; -import LeafletMap from "./components/LeafletMap"; -import TestComponentNew from "./components/TestComponentNew"; -import DateRangePicker from "./components/DateRangePicker"; -import BoxNextToEachOther from "./components/BoxNextToEachOther"; -import ProfileInfo from "./components/ProfileInfo"; -import UserProfileInfo from "./components/UserProfileInfo"; -import CurrentTime from "./components/CurrentTime"; -import CurrentDateShamsi from "./components/CurrentDateShamsi"; -import DateTime from "./components/DateTime"; -import CardDesign3 from "./components/CardDesign3"; -import CustomToast2 from "./components/CustomToast2"; -import ContactUsInfoCard from "./components/ContactUsInfoCard"; -import RoomCardInfo from "./components/RoomCardInfo"; -import FormInput from "./components/FormInput"; -import OutlineTextarea from "./components/OutlineTextarea"; +// import "rc-slider/assets/index.css"; +// import "react-circular-progressbar/dist/styles.css"; function App() { return ( -
- {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* ----------------------------$$$ start---------------------------- */} - {/* - - - - - */} - {/*
+ ); } diff --git a/src/Views/Home/Sidebar/index.js b/src/Views/Home/Sidebar/index.js new file mode 100644 index 0000000..a65d1bb --- /dev/null +++ b/src/Views/Home/Sidebar/index.js @@ -0,0 +1,49 @@ +import React from "react"; +import { connect } from "react-redux"; +import { components } from "../../../redux/actions"; + +function Sidebar({ list, setActive }) { + return ( +
+
+ logo +
+ +
+ ); +} + +const mapStateToProps = (state) => ({ + list: state.components.list, +}); + +export default connect(mapStateToProps, { + setActive: components.activeComponent, +})(Sidebar); + +Sidebar.defaultProps = { + materials: [ + { + name: "Button", + }, + ], +}; diff --git a/src/components/Code/copy.png b/src/components/Code/copy.png new file mode 100644 index 0000000..e1742c4 Binary files /dev/null and b/src/components/Code/copy.png differ diff --git a/src/components/Code/index.js b/src/components/Code/index.js new file mode 100644 index 0000000..c700b32 --- /dev/null +++ b/src/components/Code/index.js @@ -0,0 +1,74 @@ +import { useState } from "react"; +import copyIcon from "./copy.png"; + +function Code({ code }) { + const [copied, setCopied] = useState(false); + const [height, setHeight] = useState(350); + const copyToClipboard = () => { + setCopied(true); + let copyText = document.getElementById(code).innerText; + /* Select the text field */ + // copyText.setSelectionRange(0, 99999); /* For mobile devices */ + + /* Copy the text inside the text field */ + navigator.clipboard.writeText(copyText); + }; + return ( +
+
+
+ copy copyToClipboard()} + /> + + Copied! + +
+
setHeight(() => (height == 350 ? "auto" : 350))} + > + {height === 350 ? "Read more" : "Close"} +
+
+ 
+        {code}
+
+
+ ); +} + +Code.defaultProps = { + code: `class HelloMessage extends React.Component { + handlePress = () => { + alert('Hello') + } + render() { + return ( +
+

Hello {this.props.name}

+ +
+ ); + } + } + ReactDOM.render( + , + mountNode + );`, +}; + +export default Code; diff --git a/src/components/testtttt/index.scss b/src/components/testtttt/index.scss index e69de29..3554e2b 100644 --- a/src/components/testtttt/index.scss +++ b/src/components/testtttt/index.scss @@ -0,0 +1,438 @@ +// import ButtonDesign from "./components/buttonDesign/ButtonDesign"; +// import ProductDesign from "./components/productDesign/ProductDesign"; +// import ProductTags from "./components/productTags/ProductTags"; +// import CounterDesign from "./components/counterDesign/CounterDesign"; +// import BookDesign from "./components/bookDesign/BookDesign"; +// import BlogDesign1 from "./components/Blogs/design1/BlogDesign1"; +// import BlogDesign2 from "./components/Blogs/design2/BlogDesign2"; +// import BlogDesign3 from "./components/Blogs/design3/BlogDesign3"; +// import BlogDesign4 from "./components/Blogs/design4/BlogDesign4"; +// import BlogDesign5 from "./components/Blogs/design5/BlogDesign5"; +// import BlogDesign6 from "./components/Blogs/design6/BlogDesign6"; +// import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1"; +// import VodProductDesign from "./components/vodProductDesign/VodProductDesign"; +// import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection"; +// import FooterDesign1 from "./components/footer/design1/FooterDesign1"; +// import Testttt from "./components/testtttt/Testttt"; +// import Design2D from "./components/Design2D/Design2D"; +// import Features from "./components/Features/index"; +// import Feedback from "./components/Feedback/index"; +// import Alert from "./components/Alert"; +// import Toast from "./components/Toast"; +// import ProductSuggestion from "./components/ProductSuggestion"; +// import ProductImage from "./components/ProductImage"; +// import VodProduct from "./components/VodProduct"; +// import VodProductNew from "./components/VodProductNew"; +// import ProductTab from "./components/ProductTab"; +// import ProductStatusCard from "./components/ProductStatusCard"; +// import AdvertisementDesign1 from "./components/Advertisement/design1"; +// import AdvertisementDesign2 from "./components/Advertisement/design2"; +// import AdvertisementDesign3 from "./components/Advertisement/design3"; +// import CourseChapter from "./components/CourseChapter"; +// import SidebarMenu from "./components/Sidebar/SidebarMenu"; +// import SidebarDesign2 from "./components/Sidebar/SidebarDesign2"; +// import SimpleBarChart from "./components/Chart/SimpleBarChart"; +// import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart"; +// import Design1 from "./components/ProductSalesAmount/Design1"; +// import Design2 from "./components/ProductSalesAmount/Design2"; +// import TableDesign1 from "./components/Table/Design1"; +// import ReactTable2 from "./components/ReactTable2"; +// import ReactTable3 from "./components/ReactTable3"; +// import ReactTable4 from "./components/ReactTable4"; +// import ReactTable5 from "./components/ReactTable5"; +// import Digikala from "./components/Digikala"; +// 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 Folderlists from "./components/Folderlist"; +// import CardHolder from "./components/CardHolder"; +// import UploadFile from "./components/UploadFile"; +// import BarChartApex from "./components/BarChartApex"; +// import SemiDonut from "./components/SemiDonut"; +// import FolderTree from "./components/FolderTree"; +// import GridListTable from "./components/GridListTable"; +// import PopupCard from "./components/PopupCard"; +// import OutlineInput from "./components/OutlineInput"; +// import CancleIcon from "./components/CancleIcon"; +// import ButtonNewDesign from "./components/ButtonNewDesign"; +// import TimeLineComponent from "./components/TimeLineComponent"; +// import TitleSubtitle from "./components/TitleSubtitle"; +// import TimeLine from "./components/TimeLineComponent/Timeline"; +// import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther"; +// import SelectYear from "./components/SelectYear"; +// import IndianaDragScroll from "./components/IndianaDragScroll"; +// import CardTrelloDesign from "./components/CardTrelloDesign"; +// import CircleInCircle from "./components/CircleInCircle"; +// import NewTagDesign from "./components/NewTagDesign"; +// import AnimatedProgressBar from "./components/AnimatedProgressBar"; +// import ReligiousTimes from "./components/ReligiousTimes"; +// import DistributedData from "./components/DistributedData"; +// import CardDesign1 from "./components/CardDesign1"; +// import CustomToast from "./components/CustomToast"; +// import IconText from "./components/IconText"; +// import CardDesign2 from "./components/CardDesign2"; +// import ButtonDivTag from "./components/ButtonDivTag"; +// import Button from "./components/Button"; +// import LeafletMap from "./components/LeafletMap"; +// import TestComponentNew from "./components/TestComponentNew"; +// import DateRangePicker from "./components/DateRangePicker"; +// import BoxNextToEachOther from "./components/BoxNextToEachOther"; +// import ProfileInfo from "./components/ProfileInfo"; +// import UserProfileInfo from "./components/UserProfileInfo"; +// import CurrentTime from "./components/CurrentTime"; +// import CurrentDateShamsi from "./components/CurrentDateShamsi"; +// import DateTime from "./components/DateTime"; +// import CardDesign3 from "./components/CardDesign3"; +// import CustomToast2 from "./components/CustomToast2"; +// import ContactUsInfoCard from "./components/ContactUsInfoCard"; +// import RoomCardInfo from "./components/RoomCardInfo"; +// import FormInput from "./components/FormInput"; +// import OutlineTextarea from "./components/OutlineTextarea"; + + { + /* */ +} + { + /* */ +} + { + /* */ +} + { + /* */ +} + { + /* */ +} + { + /* */ +} + { + /* */ +} + { + /* ----------------------------$$$ start---------------------------- */ +} + { + /* + + + + + */ +} + { + /*