diff --git a/package.json b/package.json index 3cf7014..2499658 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react": "17", "react-apexcharts": "^1.3.9", "react-beautiful-dnd": "^13.1.0", + "react-circular-progressbar": "^2.0.4", "react-dom": "17", "react-hook-form": "^7.30.0", "react-icons": "^4.3.1", diff --git a/src/components/Alert/index.scss b/src/components/Alert/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js new file mode 100644 index 0000000..06acebc --- /dev/null +++ b/src/components/Checkbox/index.js @@ -0,0 +1,46 @@ +// it has style inside index.scss ---> // Start CheckBox Component && end CheckBox Component + +import React from "react"; + +export default function Checkbox(props) { + return ( +
+ + + + + + +
+ + +
+
+ ); +} diff --git a/src/components/ProgressBar/CircularProgressbar/index.js b/src/components/ProgressBar/CircularProgressbar/index.js new file mode 100644 index 0000000..4033bd8 --- /dev/null +++ b/src/components/ProgressBar/CircularProgressbar/index.js @@ -0,0 +1,39 @@ +import React from "react"; +import { + CircularProgressbar, + buildStyles, + CircularProgressbarWithChildren, +} from "react-circular-progressbar"; + +function CustomCircularProgressbar() { + const percentage = 66; + + return ( + <> +

درست کار نکرد!!!

+
+ +
+
+ + + +
+ + ); +} + +export default CustomCircularProgressbar; diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/index.js new file mode 100644 index 0000000..735b2a9 --- /dev/null +++ b/src/components/ProgressBar/index.js @@ -0,0 +1,25 @@ +import React, { useState } from "react"; + +import CircularProgressbar from "./CircularProgressbar"; + +function ProgressBar() { + const list = { + 1: , + }; + const [type, setType] = useState(1); + return ( +
+ + {list[type]} +
+ ); +} + +export default ProgressBar; diff --git a/src/index.scss b/src/index.scss index 8bd6d78..602e796 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1031,6 +1031,66 @@ $white: #fff; // * end vodProductDesign Component +// TODO Start CheckBox Component + +.checkbox-container * { + box-sizing: border-box; +} + +.checkbox:not(:last-child) { + margin-right: 6px; +} + +.checkbox span:first-child { + position: relative; + flex: 0 0 18px; + width: 18px; + height: 18px; + border-radius: 4px; + transform: scale(1); + border: 1px solid #cccfdb; + transition: all 0.3s ease; +} + +.checkbox span:first-child svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: #fff; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transform: translate3d(0, 0, 0); +} + +.checkbox span:last-child { + padding-left: 8px; + line-height: 18px; +} + +.checkbox:hover span:first-child { + border-color: #0077ff; +} + +.checkbox-input:checked + .checkbox span:first-child { + background: #0077ff; + border-color: #0077ff; + animation: zoom-in-out 0.3s ease; +} + +.checkbox-input:checked + .checkbox span:first-child svg { + stroke-dashoffset: 0; +} + +@keyframes zoom-in-out { + 50% { + transform: scale(0.9); + } +} + +// * end CheckBox Component + // ? class for selectbox inside -->> CustomSelectBox <<-- .customizeSelect { background-position: left 0.5rem center; diff --git a/src/redux/data.js b/src/redux/data.js index a473162..9c0dbb0 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -9,9 +9,11 @@ import Banners from "../components/Banners"; import Blog from "../components/Blog"; import CardTrelloDesign from "../components/CardTrelloDesign"; import ChartDesign from "../components/ChartDesign"; +import ProgressBar from "../components/ProgressBar"; // mini components import MiniComponents from "../components/MiniComponents"; +import Checkbox from "../components/Checkbox"; // import ButtonDesign from "./components/buttonDesign/ButtonDesign"; // import ProductDesign from "./components/productDesign/ProductDesign"; @@ -213,6 +215,26 @@ const components = [ code: null, }, }, + { + name: "Checkbox", + author: "Ashrafi", + props: [], + content: { + name: "Checkbox", + component: , + code: null, + }, + }, + { + name: "Progress Bar", + author: "Ashrafi-Andalib", + props: [], + content: { + name: "Progress Bar", + component: , + code: null, + }, + }, // mini components { name: "Mini Components", diff --git a/yarn.lock b/yarn.lock index 1866635..0bc0abf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7657,6 +7657,11 @@ react-beautiful-dnd@^13.1.0: redux "^4.0.4" use-memo-one "^1.1.1" +react-circular-progressbar@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz#5b04a9cf6be8c522c180e4e99ec6db63677335b0" + integrity sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww== + react-date-object@^2.1.5: version "2.1.5" resolved "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.5.tgz"