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"