hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add toastify component

Browse Source
This commit is contained in:
Ehsan
2024-10-26 00:51:59 +03:30
parent 638d0d78f5
commit 60276b3ba0
9 changed files with 121 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/CustomToastify.js
+18
View File
@@ -0,0 +1,18 @@
import { ToastContainer } from "react-toastify";
import TickAlert from "@/components/icons/TickAlert";
function CustomToastify() {
return (
<ToastContainer
rtl
closeOnClick
autoClose={3000}
closeButton={false}
icon={<TickAlert />}
position="top-center"
hideProgressBar={true}
/>
);
}
export default CustomToastify;
app/globals.css
+59
View File
@@ -783,3 +783,62 @@ html {
background: transparent !important; background: transparent !important;
transition: 0.5s ease-in !important; transition: 0.5s ease-in !important;
} }
/* Toastify */
.Toastify__toast {
padding: 12px 40px 12px 12px !important;
font-family: iran-sans !important;
}
.Toastify__toast .Toastify__toast-body {
padding: 0 !important;
}
.Toastify__toast--success {
background: #d1e7dd !important;
border: 1px solid #badbcc !important;
color: #0f5132 !important;
}
.Toastify__toast--success .Toastify__toast-icon svg path {
fill: #0f5132 !important;
}
.Toastify__toast--warning {
background: #fff5d4 !important;
border: 1px solid #ffecb5 !important;
color: #664d03 !important;
}
.Toastify__toast--warning .Toastify__toast-icon svg path {
fill: #664d03 !important;
}
.Toastify__toast--error {
background: #f9dcdf !important;
border: 1px solid #f5c2c7 !important;
color: #842029 !important;
}
.Toastify__toast--error .Toastify__toast-icon svg path {
fill: #842029 !important;
}
.Toastify__toast--info {
background: #d5f5fc !important;
border: 1px solid #b6effb !important;
color: #055160 !important;
}
.Toastify__toast--info .Toastify__toast-icon svg path {
fill: #055160 !important;
}
.Toastify__toast-container .Toastify__toast-icon {
position: absolute;
right: 12px;
top: 16px;
}
/* End Of Toastify */
app/layout.js
+5
View File
@@ -3,6 +3,10 @@ import ThemeRegistry from "./component/ThemeRegistry";
import "jalaali-react-date-picker/lib/styles/index.css"; import "jalaali-react-date-picker/lib/styles/index.css";
import { Providers } from "./Providers"; import { Providers } from "./Providers";
// Toastify
import "react-toastify/dist/ReactToastify.css";
import CustomToastify from "./CustomToastify";
export const metadata = { export const metadata = {
title: "نوبت724", title: "نوبت724",
description: description:
@@ -22,6 +26,7 @@ export default function RootLayout({ children }) {
<ThemeRegistry> <ThemeRegistry>
<body className="bg-[#FAFAFA]"> <body className="bg-[#FAFAFA]">
<Providers>{children}</Providers> <Providers>{children}</Providers>
<CustomToastify />
</body> </body>
</ThemeRegistry> </ThemeRegistry>
</html> </html>
components/icons/NotFoundCover.js
+1 -1
View File
@@ -7,7 +7,7 @@ function NotFoundCover() {
viewBox="0 0 235 235" viewBox="0 0 235 235"
fill="none" fill="none"
> >
<g clip-path="url(#clip0_2643_16677)"> <g clipPath="url(#clip0_2643_16677)">
<path <path
d="M135.859 3.67188H121.172C95.852 3.67188 71.5691 13.7302 53.6653 31.634C35.7614 49.5379 25.7031 73.8207 25.7031 99.1406C25.7031 124.461 35.7614 148.743 53.6653 166.647C71.5691 184.551 95.852 194.609 121.172 194.609H135.859C161.179 194.609 185.462 184.551 203.366 166.647C221.27 148.743 231.328 124.461 231.328 99.1406C231.328 73.8207 221.27 49.5379 203.366 31.634C185.462 13.7302 161.179 3.67188 135.859 3.67188Z" d="M135.859 3.67188H121.172C95.852 3.67188 71.5691 13.7302 53.6653 31.634C35.7614 49.5379 25.7031 73.8207 25.7031 99.1406C25.7031 124.461 35.7614 148.743 53.6653 166.647C71.5691 184.551 95.852 194.609 121.172 194.609H135.859C161.179 194.609 185.462 184.551 203.366 166.647C221.27 148.743 231.328 124.461 231.328 99.1406C231.328 73.8207 221.27 49.5379 203.366 31.634C185.462 13.7302 161.179 3.67188 135.859 3.67188Z"
fill="#DDDDFB" fill="#DDDDFB"
components/icons/TickAlert.js
+3 -3
View File
@@ -1,4 +1,4 @@
function TickAlert({ fill }) { function TickAlert() {
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -7,10 +7,10 @@ function TickAlert({ fill }) {
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
> >
<g clip-path="url(#clip0_4005_1914)"> <g clipPath="url(#clip0_4005_1914)">
<path <path
d="M16 7.99915C16 10.1209 15.1571 12.1557 13.6569 13.656C12.1566 15.1563 10.1217 15.9991 8 15.9991C5.87827 15.9991 3.84344 15.1563 2.34315 13.656C0.842855 12.1557 0 10.1209 0 7.99915C0 5.87741 0.842855 3.84258 2.34315 2.34229C3.84344 0.842 5.87827 -0.000854492 8 -0.000854492C10.1217 -0.000854492 12.1566 0.842 13.6569 2.34229C15.1571 3.84258 16 5.87741 16 7.99915ZM12.03 4.96915C11.9586 4.89796 11.8735 4.84192 11.7799 4.80436C11.6863 4.7668 11.5861 4.7485 11.4853 4.75056C11.3845 4.75261 11.2851 4.77498 11.1932 4.81631C11.1012 4.85765 11.0185 4.91711 10.95 4.99115L7.477 9.41615L5.384 7.32215C5.24183 7.18967 5.05378 7.11754 4.85948 7.12097C4.66518 7.1244 4.47979 7.20311 4.34238 7.34052C4.20497 7.47794 4.12625 7.66332 4.12283 7.85762C4.1194 8.05192 4.19152 8.23997 4.324 8.38215L6.97 11.0291C7.04128 11.1003 7.12616 11.1564 7.21958 11.194C7.313 11.2316 7.41305 11.2501 7.51375 11.2482C7.61444 11.2463 7.71374 11.2242 7.8057 11.1831C7.89766 11.1421 7.9804 11.0829 8.049 11.0091L12.041 6.01915C12.1771 5.87764 12.2523 5.68842 12.2504 5.4921C12.2485 5.29579 12.1698 5.10803 12.031 4.96915H12.03Z" d="M16 7.99915C16 10.1209 15.1571 12.1557 13.6569 13.656C12.1566 15.1563 10.1217 15.9991 8 15.9991C5.87827 15.9991 3.84344 15.1563 2.34315 13.656C0.842855 12.1557 0 10.1209 0 7.99915C0 5.87741 0.842855 3.84258 2.34315 2.34229C3.84344 0.842 5.87827 -0.000854492 8 -0.000854492C10.1217 -0.000854492 12.1566 0.842 13.6569 2.34229C15.1571 3.84258 16 5.87741 16 7.99915ZM12.03 4.96915C11.9586 4.89796 11.8735 4.84192 11.7799 4.80436C11.6863 4.7668 11.5861 4.7485 11.4853 4.75056C11.3845 4.75261 11.2851 4.77498 11.1932 4.81631C11.1012 4.85765 11.0185 4.91711 10.95 4.99115L7.477 9.41615L5.384 7.32215C5.24183 7.18967 5.05378 7.11754 4.85948 7.12097C4.66518 7.1244 4.47979 7.20311 4.34238 7.34052C4.20497 7.47794 4.12625 7.66332 4.12283 7.85762C4.1194 8.05192 4.19152 8.23997 4.324 8.38215L6.97 11.0291C7.04128 11.1003 7.12616 11.1564 7.21958 11.194C7.313 11.2316 7.41305 11.2501 7.51375 11.2482C7.61444 11.2463 7.71374 11.2242 7.8057 11.1831C7.89766 11.1421 7.9804 11.0829 8.049 11.0091L12.041 6.01915C12.1771 5.87764 12.2523 5.68842 12.2504 5.4921C12.2485 5.29579 12.1698 5.10803 12.031 4.96915H12.03Z"
fill={fill} fill="#0F5132"
/> />
</g> </g>
<defs> <defs>
components/panel/userAccount/account/form/index.js
+1 -1
View File
@@ -144,7 +144,7 @@ function Form() {
<Button <Button
variant="contained" variant="contained"
className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit
!shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium" !shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
> >
ثبت اطلاعات ثبت اطلاعات
<ArrowLeftButtonP /> <ArrowLeftButtonP />
helper/index.js
+20
View File
@@ -1,4 +1,5 @@
import moment from "jalali-moment"; import moment from "jalali-moment";
import { toast } from "react-toastify";
export const numberToArStyle = (num) => num.toLocaleString("ar-AE"); export const numberToArStyle = (num) => num.toLocaleString("ar-AE");
@@ -78,3 +79,22 @@ export const uploadImage = async (event) => {
throw new Error("No file selected"); throw new Error("No file selected");
} }
}; };
export const alert = (type, text, prop) => {
toast[type](
<div className="h-full w-full flex flex-col items-start justify-center gap-[13px]">
<p className="text-[14px] font-medium">
پیغام{" "}
{type === "error"
? "خطا"
: type === "warning"
? "هشدار"
: type === "info"
? "اعلام"
: "موفقیت"}
</p>
<p className="text-[14px] font-normal">{text}</p>
</div>,
{ prop }
);
};
package-lock.json
Generated
+13
View File
@@ -31,6 +31,7 @@
"react-easy-crop": "^5.1.0", "react-easy-crop": "^5.1.0",
"react-google-map-picker": "^1.2.3", "react-google-map-picker": "^1.2.3",
"react-images-uploading": "^3.1.7", "react-images-uploading": "^3.1.7",
"react-toastify": "^10.0.6",
"styled-components": "^6.1.11", "styled-components": "^6.1.11",
"stylis": "^4.3.4", "stylis": "^4.3.4",
"stylis-plugin-rtl": "^2.1.1", "stylis-plugin-rtl": "^2.1.1",
@@ -19495,6 +19496,18 @@
} }
} }
}, },
"node_modules/react-toastify": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
"integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
"dependencies": {
"clsx": "^2.1.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/react-transition-group": { "node_modules/react-transition-group": {
"version": "4.4.5", "version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
package.json
+1
View File
@@ -32,6 +32,7 @@
"react-easy-crop": "^5.1.0", "react-easy-crop": "^5.1.0",
"react-google-map-picker": "^1.2.3", "react-google-map-picker": "^1.2.3",
"react-images-uploading": "^3.1.7", "react-images-uploading": "^3.1.7",
"react-toastify": "^10.0.6",
"styled-components": "^6.1.11", "styled-components": "^6.1.11",
"stylis": "^4.3.4", "stylis": "^4.3.4",
"stylis-plugin-rtl": "^2.1.1", "stylis-plugin-rtl": "^2.1.1",