diff --git a/package-lock.json b/package-lock.json index 2f8549e..aaca977 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@types/react-dom": "^18.3.0", "axios": "^1.7.3", "clsx": "^2.1.1", + "framer-motion": "^11.3.28", "iconsax-react": "^0.0.8", "iranianbanklogos": "^3.1.2", "moment-jalaali": "^0.10.1", @@ -9678,6 +9679,31 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.3.28", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.28.tgz", + "integrity": "sha512-dqhoawipEAjqdv32zbv72sOMJZjol7dROWn7t/FOq23WXJ40O4OUybgnO2ldnuS+3YquSn8xO/KKRavZ+TBVOQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", diff --git a/package.json b/package.json index 620c775..0ad315b 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react-dom": "^18.3.0", "axios": "^1.7.3", "clsx": "^2.1.1", + "framer-motion": "^11.3.28", "iconsax-react": "^0.0.8", "iranianbanklogos": "^3.1.2", "moment-jalaali": "^0.10.1", diff --git a/src/App.tsx b/src/App.tsx index 5210dc1..9159cec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,15 @@ import { Imei } from "./components/home/imei"; import { StatusBox } from "./components/home/status-box"; +import { TransitionPages } from "./transition"; function App() { return ( -
- - -
+ +
+ + +
+ ); } diff --git a/src/components/awards/award-skeleton.tsx b/src/components/awards/award-skeleton.tsx new file mode 100644 index 0000000..e624074 --- /dev/null +++ b/src/components/awards/award-skeleton.tsx @@ -0,0 +1,18 @@ +export const AwardSkeleton = () => { + return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+} \ No newline at end of file diff --git a/src/components/awards/index.tsx b/src/components/awards/index.tsx index 2eb4d07..92e3867 100644 --- a/src/components/awards/index.tsx +++ b/src/components/awards/index.tsx @@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query" import { AwardNotComplete } from "./award-not-complete" import { getAwardsList } from "../../services/api/awards" import { AwardsResponse } from "../../types" +import { AwardSkeleton } from "./award-skeleton" export const Awards = () => { const { data, isLoading } = useQuery({ @@ -9,7 +10,7 @@ export const Awards = () => { queryFn: getAwardsList }) - if (isLoading) return

LOADING...

+ if (isLoading) return return (
diff --git a/src/components/score/index.tsx b/src/components/score/index.tsx index e79d456..5b61740 100644 --- a/src/components/score/index.tsx +++ b/src/components/score/index.tsx @@ -12,6 +12,6 @@ export const Score = () => { queryFn: getScoresList }) return ( - +
) } \ No newline at end of file diff --git a/src/components/ui/auth/layout.tsx b/src/components/ui/auth/layout.tsx index de4bc37..5d53d9a 100644 --- a/src/components/ui/auth/layout.tsx +++ b/src/components/ui/auth/layout.tsx @@ -4,12 +4,11 @@ import { SocialsInterface } from "../../../types" export const AuthLayout = () => { return ( -
+ <>
{socialsList?.map((item: SocialsInterface) => {item?.name})}
-
+ ) } \ No newline at end of file diff --git a/src/components/wallet/wallet-skeleton.tsx b/src/components/wallet/wallet-skeleton.tsx index 8c13e94..7e1ce94 100644 --- a/src/components/wallet/wallet-skeleton.tsx +++ b/src/components/wallet/wallet-skeleton.tsx @@ -1,5 +1,5 @@ export const WalletStatusSkeleton = () => { - return
+ return
diff --git a/src/pages/auth/forgot-password.tsx b/src/pages/auth/forgot-password.tsx index f3b7afc..0fc9796 100644 --- a/src/pages/auth/forgot-password.tsx +++ b/src/pages/auth/forgot-password.tsx @@ -1,12 +1,13 @@ import { ForgotPasswordForm } from "../../components/forms/forgot-password-form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const ForgotPassword = () => { return ( - <> +
forgot password
- + ) } \ No newline at end of file diff --git a/src/pages/auth/login-with-code.tsx b/src/pages/auth/login-with-code.tsx index a129094..d1692b6 100644 --- a/src/pages/auth/login-with-code.tsx +++ b/src/pages/auth/login-with-code.tsx @@ -1,12 +1,13 @@ import { LoginWithCodeForm } from "../../components/forms/login-with-code-form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const LoginWithCode = () => { return ( - <> +
login with code
- + ) } \ No newline at end of file diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx index edf6f13..b77c067 100644 --- a/src/pages/auth/login.tsx +++ b/src/pages/auth/login.tsx @@ -1,13 +1,14 @@ import { LoginForm } from "../../components/forms/login-form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const Login = () => { return ( - <> +
login
- + ) } \ No newline at end of file diff --git a/src/pages/auth/register.tsx b/src/pages/auth/register.tsx index 9b0b987..17a95e5 100644 --- a/src/pages/auth/register.tsx +++ b/src/pages/auth/register.tsx @@ -1,12 +1,13 @@ import { RegisterForm } from "../../components/forms/register-form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const Register = () => { return ( - <> +
register
- + ) } \ No newline at end of file diff --git a/src/pages/auth/reset-password-code.tsx b/src/pages/auth/reset-password-code.tsx index 4479877..81ea7b8 100644 --- a/src/pages/auth/reset-password-code.tsx +++ b/src/pages/auth/reset-password-code.tsx @@ -1,14 +1,14 @@ -import React from "react" import { ResetpasswordCodeForm } from "../../components/forms/reset-password-code-form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const ResetPasswordCode = () => { return ( - +
send code reset password
- + ) } \ No newline at end of file diff --git a/src/pages/auth/reset-password.tsx b/src/pages/auth/reset-password.tsx index ed9334c..c5719b7 100644 --- a/src/pages/auth/reset-password.tsx +++ b/src/pages/auth/reset-password.tsx @@ -1,13 +1,13 @@ -import React from "react" import { ResetPasswordForm } from "../../components/forms/reset-password.form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const ResetPassword = () => { return ( - +
reset password
- + ) } \ No newline at end of file diff --git a/src/pages/auth/send-code.tsx b/src/pages/auth/send-code.tsx index 54c209d..95e358f 100644 --- a/src/pages/auth/send-code.tsx +++ b/src/pages/auth/send-code.tsx @@ -1,13 +1,14 @@ -import React from "react" + import { SendCodeForm } from "../../components/forms/send-code-form" +import { AuthTransitionPages } from "../../transition/auth-transition" export const SendCode = () => { return ( - +
send code
- + ) } \ No newline at end of file diff --git a/src/pages/dashboard/awards.tsx b/src/pages/dashboard/awards.tsx index b09692b..e0e5ac7 100644 --- a/src/pages/dashboard/awards.tsx +++ b/src/pages/dashboard/awards.tsx @@ -1,7 +1,10 @@ import { Awards } from "../../components/awards" +import { TransitionPages } from "../../transition" export const AwardsPage = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/installation-reports.tsx b/src/pages/dashboard/installation-reports.tsx index 94fc08f..7ac7d3b 100644 --- a/src/pages/dashboard/installation-reports.tsx +++ b/src/pages/dashboard/installation-reports.tsx @@ -1,7 +1,10 @@ import { InstallationReports } from "../../components/installation-reports" +import { TransitionPages } from "../../transition" export const InstallationReportsPage = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/management-bank-account.tsx b/src/pages/dashboard/management-bank-account.tsx index 55026e0..79aa5cd 100644 --- a/src/pages/dashboard/management-bank-account.tsx +++ b/src/pages/dashboard/management-bank-account.tsx @@ -1,7 +1,10 @@ import { ManagementBankAccounts } from "../../components/management-bank-accounts" +import { TransitionPages } from "../../transition" export const ManagementBankAccountPage = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/my-account.tsx b/src/pages/dashboard/my-account.tsx index 20ef250..72d8851 100644 --- a/src/pages/dashboard/my-account.tsx +++ b/src/pages/dashboard/my-account.tsx @@ -1,7 +1,11 @@ import { MyAccountPage } from "../../components/my-account" +import { TransitionPages } from "../../transition" export const MyAcccount = () => { return ( - + + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/score.tsx b/src/pages/dashboard/score.tsx index 85d10c9..b7fb55a 100644 --- a/src/pages/dashboard/score.tsx +++ b/src/pages/dashboard/score.tsx @@ -1,7 +1,10 @@ import { Score } from "../../components/score" +import { TransitionPages } from "../../transition" export const ScorePage = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/subscription-report.tsx b/src/pages/dashboard/subscription-report.tsx index c355bc1..7223f23 100644 --- a/src/pages/dashboard/subscription-report.tsx +++ b/src/pages/dashboard/subscription-report.tsx @@ -1,7 +1,10 @@ import { SubscriptionReport } from "../../components/subscription-report" +import { TransitionPages } from "../../transition" export const SubscriptionReportPage = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/transactions.tsx b/src/pages/dashboard/transactions.tsx index a92ea65..788ae7e 100644 --- a/src/pages/dashboard/transactions.tsx +++ b/src/pages/dashboard/transactions.tsx @@ -1,7 +1,10 @@ import { Transactions } from "../../components/transactions" +import { TransitionPages } from "../../transition" export const TransactionsPage = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/wallet.tsx b/src/pages/dashboard/wallet.tsx index 9b3e1a5..f470f08 100644 --- a/src/pages/dashboard/wallet.tsx +++ b/src/pages/dashboard/wallet.tsx @@ -1,7 +1,10 @@ +import { TransitionPages } from "../../transition" import { WalletPage } from "../../components/wallet/wallet-page" export const Wallet = () => { return ( - + + + ) } \ No newline at end of file diff --git a/src/router/index.tsx b/src/router/index.tsx index 5e8bbd5..b3e0f16 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -22,7 +22,9 @@ import { Guard } from "../guard"; export const router = createBrowserRouter([ { - element: , + element: + + , path: "/", children: [ { diff --git a/src/transition/auth-transition.tsx b/src/transition/auth-transition.tsx new file mode 100644 index 0000000..05f4fb6 --- /dev/null +++ b/src/transition/auth-transition.tsx @@ -0,0 +1,36 @@ +import { PropsWithChildren } from "react" +import { motion } from "framer-motion" + +export const AuthTransitionPages = ({ children }: PropsWithChildren) => { + const animations = { + initial: { + opacity: 0, + scale: 0.95, + transition: { + duration: 0.5, + ease: "easeIn" + } + }, + animate: { + opacity: 1, + scale: 1, + transition: { + duration: 0.5, + ease: "easeOut" + } + }, + exit: { + opacity: 0, + scale: 0.95, + transition: { + duration: 0.2, + ease: "easeIn" + } + } + } + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/src/transition/index.tsx b/src/transition/index.tsx new file mode 100644 index 0000000..cd82186 --- /dev/null +++ b/src/transition/index.tsx @@ -0,0 +1,24 @@ +import { PropsWithChildren } from "react" +import { motion } from "framer-motion" + +export const TransitionPages = ({ children }: PropsWithChildren) => { + const animations = { + initial: { + opacity: 0, + x: 100 + }, + animate: { + opacity: 1, + x: 0 + }, + exit: { + opacity: 0, + x: -100 + } + } + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/src/utility/score.tsx b/src/utility/score.tsx index 6247770..9c63c43 100644 --- a/src/utility/score.tsx +++ b/src/utility/score.tsx @@ -1,12 +1,12 @@ import { createColumns } from "../components/common/create-col"; import { colConfig } from "../types"; - +import { formatDateToPersian } from "./getDate"; const columnConfigs: colConfig[] | [] = [ { accessor: "title", header: "عنوان" }, { accessor: "score", header: "امتیاز" }, - { accessor: "date", header: "تاریخ", cellRenderer: (info) => info.getValue() &&

{info.getValue()}

}, + { accessor: "created_at", header: "تاریخ", cellRenderer: (info) => info.getValue() &&

{formatDateToPersian(info.getValue())}

}, ]; export const scoresCol = createColumns(columnConfigs); \ No newline at end of file