(null); // Initialize the ref properly
+
+ return (
+
+ ref.current}>
+
+
+
+
+
+ Edit user Accounts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default EditRegisterUser;
diff --git a/src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx
new file mode 100644
index 0000000..ed37e1e
--- /dev/null
+++ b/src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx
@@ -0,0 +1,113 @@
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
+import { CiEdit } from "react-icons/ci";
+import { FaRegEye } from "react-icons/fa";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import MainFrame from "../../../components/MainFrame";
+import { InputGroup } from "../../../components/ui/input-group";
+import {
+ PaginationItems,
+ PaginationNextTrigger,
+ PaginationRoot,
+} from "../../../components/ui/pagination";
+import { Switch } from "../../../components/ui/switch";
+import { Button } from "../../../components/ui/button";
+import DeleteConfirmationDialog from "./Component/DeleteConfirmationDialog";
+import EditRegisterUser from "./Component/EditRegisterUser";
+
+// Table setup
+const tableHeadRow = [
+ "Sr. No",
+ "First Name",
+ "Mobile number",
+ "Gender",
+ "DOB",
+ "Type of User",
+ "Language",
+ "Activate/Deactivate",
+ "Action",
+];
+
+const usersData: any[] = [
+ ...Array.from({ length: 10 }, (_, i) => ({
+ "Sr. No": i + 1,
+ "First Name": "Ritesh",
+ "Mobile number": "9876543210",
+ Gender: "Male",
+ DOB: "15-01-1990",
+ "Type of User": "Admin",
+ Language: "English",
+ "Activate/Deactivate": (
+
+ Yes
+
+ No
+
+ ),
+ Action: (
+
+ {/* */}
+ {
+ console.log("User deleted:", i + 1);
+ }}
+ />
+
+ {
+ console.log("User deleted:", i + 1);
+ }}
+ />
+
+ ),
+ })),
+];
+
+const RegisterUsers = () => {
+ return (
+
+
+
+ Register User
+
+
+
+ }
+ w={"100%"}
+ color={"#000"}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default RegisterUsers;
diff --git a/src/Pages/ManageUsers/ManageUsers.tsx b/src/Pages/ManageUsers/ManageUsers.tsx
deleted file mode 100644
index e6080cd..0000000
--- a/src/Pages/ManageUsers/ManageUsers.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const ManageUsers = () => {
- return (
-
-
-
- )
-}
-
-export default ManageUsers
\ No newline at end of file
diff --git a/src/Pages/OnBoarding/CreatePass.tsx b/src/Pages/OnBoarding/CreatePass.tsx
new file mode 100644
index 0000000..0fd60ac
--- /dev/null
+++ b/src/Pages/OnBoarding/CreatePass.tsx
@@ -0,0 +1,149 @@
+import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
+import { useContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import logo from "../../assets/logo.svg";
+import { Button } from "../../components/ui/button";
+import { Field } from "../../components/ui/field";
+import { Toaster, toaster } from "../../components/ui/toaster";
+
+interface FormValues {
+ password: string;
+ confirmPassword: string;
+}
+
+const CreatePass = () => {
+ const [isLoading, setIsLoading] = useState(false);
+ const context = useContext(GlobalStateContext);
+ if (!context) {
+ throw new Error("App must be used within a GlobalStateProvider");
+ }
+ const { setIsAuthenticate } = context;
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ const onSubmit = handleSubmit((data) => {
+ setIsLoading(true);
+ if (data?.password === "password123") {
+ setTimeout(() => {
+ setIsAuthenticate(true);
+ setIsLoading(false);
+ }, 3000);
+ } else {
+ toaster.create({
+ title: `Invalid Credentials`,
+ type: "error",
+ });
+ setIsLoading(false);
+ }
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ create a password
+
+
+
+
+
+
+
+
+ value === getValues("password") || "Passwords do not match",
+ })}
+ placeholder="Confirm your password"
+ />
+
+
+
+ Forgot password
+
+
+
+
+
+
+ );
+};
+
+export default CreatePass;
diff --git a/src/Pages/OnBoarding/LoginOtp.tsx b/src/Pages/OnBoarding/LoginOtp.tsx
new file mode 100644
index 0000000..9ddf6ce
--- /dev/null
+++ b/src/Pages/OnBoarding/LoginOtp.tsx
@@ -0,0 +1,145 @@
+import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
+import { useContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import logo from "../../assets/logo.svg";
+import uiEdit from "../../assets/icons/edit.png";
+import { Button } from "../../components/ui/button";
+import { Field } from "../../components/ui/field";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import { PinInput } from "../../components/ui/pin-input";
+import { useNavigate } from "react-router-dom";
+
+interface FormValues {
+ mobileNumber: number;
+}
+
+const LoginOtp = () => {
+ const [isLoading, setIsLoading] = useState(false);
+ const context = useContext(GlobalStateContext);
+ const navigate = useNavigate();
+ if (!context) {
+ throw new Error("App must be used within a GlobalStateProvider");
+ }
+ const { setIsAuthenticate } = context;
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ const onSubmit = handleSubmit((data) => {
+ setIsLoading(true);
+ if (data?.mobileNumber === 1234567890) {
+ setTimeout(() => {
+ setIsAuthenticate(true);
+ setIsLoading(false);
+ }, 3000); // 3-second delay
+ } else {
+ toaster.create({
+ title: `Invalid Credentials`,
+ type: "error",
+ });
+ setIsLoading(false);
+ }
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enter otp
+
+
+ OTP has been send to your E-mail Address
+
+
+
+
+ 9619565889
+
+
+
+
+
+
+ Resend OTP
+
+
+
+ Forgot password
+
+
+
+
+
+
+ );
+};
+
+export default LoginOtp;
diff --git a/src/Pages/OnBoarding/LoginWithPass.tsx b/src/Pages/OnBoarding/LoginWithPass.tsx
new file mode 100644
index 0000000..765cceb
--- /dev/null
+++ b/src/Pages/OnBoarding/LoginWithPass.tsx
@@ -0,0 +1,160 @@
+import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
+import { useContext } from "react";
+import { useForm } from "react-hook-form";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import logo from "../../assets/logo.svg";
+import { Button } from "../../components/ui/button";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import { NavLink, useNavigate } from "react-router-dom";
+import { Field } from "../../components/ui/field";
+
+const LoginWithPass = () => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+ const context = useContext(GlobalStateContext);
+ const navigate = useNavigate();
+
+ if (!context) {
+ throw new Error("App must be used within a GlobalStateProvider");
+ }
+
+ const { setIsAuthenticate } = context;
+
+ const onSubmit = (data: { mobileNumber: string; password: string }) => {
+ const { mobileNumber, password } = data;
+
+ if (mobileNumber === "1231239870" && password === "admin@123") {
+ navigate("/");
+ setIsAuthenticate(true);
+ } else {
+ toaster.create({
+ title: "Invalid Credentials",
+ type: "error",
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ LogIn
+
+
+
+
+
+ {errors.mobileNumber && (
+
+ {errors.mobileNumber.message}
+
+ )}
+
+
+
+
+ {errors.password && (
+
+ {errors.password.message}
+
+ )}
+
+
+ Forget password
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LoginWithPass;
diff --git a/src/Pages/Profile/Profile.tsx b/src/Pages/Profile/Profile.tsx
index ff8f49e..0ef11fb 100644
--- a/src/Pages/Profile/Profile.tsx
+++ b/src/Pages/Profile/Profile.tsx
@@ -1,11 +1,110 @@
-import MainFrame from "../../components/MainFrame"
-
+import { Circle, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import mypfp from "../../assets/profile-Avtars/mypfp.png";
+import { FaCamera } from "react-icons/fa";
+import { Field } from "../../components/ui/field";
+import { Button } from "../../components/ui/button";
+import { Editable } from "@chakra-ui/react";
const Profile = () => {
return (
-
+
+
+
+
+
+
+
+
+
+
+ Jackson David
+
+
+ Employee ID: #1245679
+
+
+
+
+
+
+
+ First Name
+
+
+
+
+
+
+
+
+ Last Name
+
+
+
+
+
+
+ {/*
+
+
+
+
+ */}
+
+ {/*
+
+ */}
+
+
+ Phone Number
+
+
+
+
+
+
+
+
+
+ Update Password
+
+
+
+
- )
-}
+ );
+};
-export default Profile
\ No newline at end of file
+export default Profile;
diff --git a/src/Pages/SubAdmin/SubAdmin.tsx b/src/Pages/SubAdmin/SubAdmin.tsx
deleted file mode 100644
index 4ed0414..0000000
--- a/src/Pages/SubAdmin/SubAdmin.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const SubAdmin = () => {
- return (
-
-
-
-
- )
-}
-export default SubAdmin
\ No newline at end of file
diff --git a/src/Pages/Support/Support.tsx b/src/Pages/Support/Support.tsx
deleted file mode 100644
index 47bd3d4..0000000
--- a/src/Pages/Support/Support.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const Support = () => {
- return (
-
-
-
-
- )
-}
-export default Support
\ No newline at end of file
diff --git a/src/Routes/Nav.ts b/src/Routes/Nav.ts
index f225b1a..1e4c231 100644
--- a/src/Routes/Nav.ts
+++ b/src/Routes/Nav.ts
@@ -1,77 +1,137 @@
-import { LiaUsersSolid } from "react-icons/lia";
-import { LuBellDot } from "react-icons/lu";
-import { MdOutlineSupportAgent, MdPostAdd } from "react-icons/md";
+import { CgWorkAlt } from "react-icons/cg";
import { GoDotFill } from "react-icons/go";
-
-import { TbFileSettings, TbLayoutDashboard, TbReport, TbUsers, TbUsersGroup } from "react-icons/tb";
+import { PiHeadphonesBold } from "react-icons/pi";
import { RiUserSettingsLine } from "react-icons/ri";
+import { TbEdit, TbLayoutDashboard } from "react-icons/tb";
+import {
+ TiDocumentText,
+ TiUserAddOutline,
+ TiUserOutline,
+} from "react-icons/ti";
export const nav = [
-
- {
- title: "Dashboard",
- path: "/",
- Icon: TbLayoutDashboard,
- type:'single'
- },
- {
- title: "Manage Users",
- path: "/manage-user",
- Icon: TbUsers,
- type:'single'
- },
- {
- title: "Manage Groups",
- path: "/manage-groups",
- Icon: TbUsersGroup,
- type:'single'
- },
- {
- title: "Community",
- path: "/manage-community",
- Icon: LiaUsersSolid,
- type:'multiple',
- children: [
- {
- title: "Manage Community",
- path: "/manage-community",
- Icon: GoDotFill,
- },
- {
- title: "Manage Post",
- path: "/manage-post",
- Icon: GoDotFill,
- },
- ],
- },
- {
- title: "Support",
- path: "/support",
- Icon: MdOutlineSupportAgent,
- type:'single'
- },
- {
- title: "Sub-Admin",
- path: "/sub-admin",
- Icon: RiUserSettingsLine,
- type:'single'
- },
- {
- title: "Reporting",
- path: "/reporting",
- Icon: TbReport,
- type:'single'
- },
- {
- title: "CMS",
- path: "/cms",
- Icon: TbFileSettings,
- type:'single'
- },
- {
- title: "Manage Notifications",
- path: "/manage-notification",
- Icon: LuBellDot,
- type:'single'
- }
- ];
\ No newline at end of file
+ {
+ title: "Dashboard",
+ path: "/",
+ Icon: TbLayoutDashboard,
+ type: "single",
+ },
+ {
+ title: "Manage Users",
+ path: "/manage-user/register-user",
+ initPath: "/manage-user",
+ Icon: TiUserOutline,
+ type: "multiple",
+ children: [
+ {
+ title: "Register Users",
+ path: "/manage-user/register-user",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Deactivated Accounts",
+ path: "/manage-user/deactivate-accounts",
+ Icon: GoDotFill,
+ },
+ ],
+ },
+ {
+ title: "Manage Post",
+ path: "/manage-post",
+ Icon: TbEdit,
+ type: "single",
+ },
+ {
+ title: "Manage Sub-Admin",
+ path: "/manage-sub-admin",
+ Icon: TiUserAddOutline,
+ type: "single",
+ },
+ {
+ title: "Manage Jobs",
+ path: "/manage-jobs",
+ Icon: CgWorkAlt,
+ type: "single",
+ },
+ {
+ title: "Manage Contact Us",
+ path: "/manage-contact-us",
+ Icon: PiHeadphonesBold,
+ type: "single",
+ },
+
+ {
+ title: "Manage CMS",
+ initPath: "/manage-cms",
+ path: "/manage-cms/faq",
+ Icon: TiDocumentText,
+ type: "multiple",
+ children: [
+ {
+ title: "FAQ",
+ path: "/manage-cms/faq",
+ Icon: GoDotFill,
+ },
+ {
+ title: "About Us",
+ path: "/manage-cms/about-us",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Privacy Policy",
+ path: "/manage-cms/privacy-policy",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Terms And Conditions",
+ path: "/manage-cms/terms-and-condition",
+ Icon: GoDotFill,
+ },
+ ],
+ },
+ {
+ title: "My Profile",
+ path: "/profile",
+ Icon: RiUserSettingsLine,
+ type: "single",
+ },
+ {
+ title: "Master Module",
+ initPath: "/master-module",
+ path: "/master-module/agency-master",
+ Icon: TiDocumentText,
+ type: "multiple",
+ children: [
+ {
+ title: "Agency Master",
+ path: "/master-module/agency-master",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Template Master",
+ path: "/master-module/template-master",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Job Type",
+ path: "/master-module/job-type",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Workspace model",
+ path: "/master-module/workspace-model",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Country",
+ path: "/master-module/country",
+ Icon: GoDotFill,
+ },
+ {
+ title: "Job Status",
+ path: "/master-module/job-status",
+ Icon: GoDotFill,
+ },
+ ],
+ },
+];
diff --git a/src/Routes/Routes.ts b/src/Routes/Routes.ts
index b58d3ec..df63538 100644
--- a/src/Routes/Routes.ts
+++ b/src/Routes/Routes.ts
@@ -1,24 +1,31 @@
-
-import CMS from "../Pages/CMS/CMS";
import Dashboard from "../Pages/Dashboard/Dashboard";
-import ManageCommunity from "../Pages/ManageCommunity/ManageCommunity";
-import ManagePost from "../Pages/ManageCommunity/ManagePost";
-import ManageGroups from "../Pages/ManageGroups/ManageGroups";
-import ManageUsers from "../Pages/ManageUsers/ManageUsers";
+import AboutUs from "../Pages/ManageCMS/AboutUs/AboutUs";
+import FreqAskQuestion from "../Pages/ManageCMS/FAQ/FreqAskQuestion";
+import PrivacyPolicy from "../Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy";
+import ManageContactUs from "../Pages/ManageContactUs/ManageContactUs";
+import ManageJobs from "../Pages/ManageJobs/ManageJobs";
+import ManagePost from "../Pages/ManagePost/ManagePost";
+import ManageSubAdmin from "../Pages/ManageSubAdmin/ManageSubAdmin";
+import DeactivatedAccounts from "../Pages/ManageUser/DeactivatedAccounts/DeactivatedAccounts";
+import RegisterUsers from "../Pages/ManageUser/RegisterUsers/RegisterUsers";
import Profile from "../Pages/Profile/Profile";
-import Reporting from "../Pages/Reporting/Reporting";
-import SubAdmin from "../Pages/SubAdmin/SubAdmin";
-import Support from "../Pages/Support/Support";
export const RouteLink = [
- { path: "/", Component: Dashboard },
- { path: "/manage-user", Component: ManageUsers },
- { path: "/manage-groups", Component: ManageGroups },
- { path: "/manage-community", Component: ManageCommunity},
- { path: "/manage-post", Component: ManagePost},
- { path: "/support", Component: Support},
- { path: "/sub-admin", Component: SubAdmin},
- { path: "/reporting", Component: Reporting},
- { path: "/cms", Component: CMS},
- { path: "/manage-notification", Component: CMS},
- { path: "/profile", Component: Profile},
-]
\ No newline at end of file
+ { path: "/", Component: Dashboard },
+ { path: "/manage-user/register-user", Component: RegisterUsers },
+ { path: "/manage-user/deactivate-accounts", Component: DeactivatedAccounts },
+ { path: "/manage-post", Component: ManagePost },
+ { path: "/manage-sub-admin", Component: ManageSubAdmin },
+ { path: "/manage-jobs", Component: ManageJobs },
+ { path: "/manage-contact-us", Component: ManageContactUs },
+ { path: "/manage-cms/faq", Component: FreqAskQuestion },
+
+ { path: "/manage-cms/about-us", Component: AboutUs },
+
+ { path: "/manage-cms/privacy-policy", Component: PrivacyPolicy },
+
+ { path: "/manage-cms/terms-and-condition", Component: PrivacyPolicy },
+
+ { path: "/profile", Component: Profile },
+
+ { path: "/my-profile", Component: Profile },
+];
diff --git a/src/assets/icons/delete.png b/src/assets/icons/delete.png
new file mode 100644
index 0000000..383f0f0
Binary files /dev/null and b/src/assets/icons/delete.png differ
diff --git a/src/assets/icons/edit.png b/src/assets/icons/edit.png
new file mode 100644
index 0000000..2aeaad0
Binary files /dev/null and b/src/assets/icons/edit.png differ
diff --git a/src/assets/profile-Avtars/mypfp.png b/src/assets/profile-Avtars/mypfp.png
new file mode 100644
index 0000000..8b8ba46
Binary files /dev/null and b/src/assets/profile-Avtars/mypfp.png differ
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
new file mode 100644
index 0000000..34349e8
--- /dev/null
+++ b/src/components/DataTable.tsx
@@ -0,0 +1,35 @@
+import { Stack, Table } from "@chakra-ui/react"
+
+
+interface TableProps {
+ tableHeadRow: string[];
+ data: Record[];
+}
+
+
+
+const DataTable: React.FC = ({ tableHeadRow, data }) => {
+ return (
+
+
+
+
+ {tableHeadRow.map((item, index)=>{item})}
+
+
+
+
+ {data.map((item:any, index) => (
+
+ {tableHeadRow.map((heading)=>{item[heading]} )}
+
+ ))}
+
+
+
+
+ )
+}
+
+export default DataTable
\ No newline at end of file
diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx
index 32c5f64..8d9f19c 100644
--- a/src/components/MainFrame.tsx
+++ b/src/components/MainFrame.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, VStack } from "@chakra-ui/react"
+import { Box, VStack } from "@chakra-ui/react"
import { motion } from "framer-motion"
import React, { FC } from "react"
import { OPACITY_ON_LOAD } from "../Layouts/animations"
@@ -11,12 +11,12 @@ interface MainFrameProps {
title?: string
}
-const MainFrame: FC = ({ children, title }) => {
+const MainFrame: FC = ({ children }) => {
return (
-
+
> {}
+
+const { withContext } = createRecipeContext({ key: "button" })
+
+// Replace "a" with your framework's link component
+export const LinkButton = withContext("a")
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..930b004
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import type { ButtonProps, TextProps } from "@chakra-ui/react";
+import {
+ Button,
+ Pagination as ChakraPagination,
+ IconButton,
+ Text,
+ createContext,
+ usePaginationContext,
+} from "@chakra-ui/react";
+import * as React from "react";
+import { HiChevronLeft, HiChevronRight } from "react-icons/hi2";
+import { LinkButton } from "./link-button";
+
+interface ButtonVariantMap {
+ current: ButtonProps["variant"];
+ default: ButtonProps["variant"];
+ ellipsis: ButtonProps["variant"];
+}
+
+type PaginationVariant = "outline" | "solid" | "subtle";
+
+interface ButtonVariantContext {
+ size: ButtonProps["size"];
+ variantMap: ButtonVariantMap;
+ getHref?: (page: number) => string;
+}
+
+const [RootPropsProvider, useRootProps] = createContext({
+ name: "RootPropsProvider",
+});
+
+export interface PaginationRootProps
+ extends Omit {
+ size?: ButtonProps["size"];
+ variant?: PaginationVariant;
+ getHref?: (page: number) => string;
+}
+
+const variantMap: Record = {
+ outline: { default: "ghost", ellipsis: "plain", current: "solid" },
+ solid: { default: "outline", ellipsis: "outline", current: "solid" },
+ subtle: { default: "ghost", ellipsis: "plain", current: "subtle" },
+};
+
+export const PaginationRoot = React.forwardRef<
+ HTMLDivElement,
+ PaginationRootProps
+>(function PaginationRoot(props, ref) {
+ const { size = "sm", variant = "outline", getHref, ...rest } = props;
+ return (
+
+
+
+ );
+});
+
+export const PaginationEllipsis = React.forwardRef<
+ HTMLDivElement,
+ ChakraPagination.EllipsisProps
+>(function PaginationEllipsis(props, ref) {
+ const { size, variantMap } = useRootProps();
+ return (
+
+
+
+ );
+});
+
+export const PaginationItem = React.forwardRef<
+ HTMLButtonElement,
+ ChakraPagination.ItemProps
+>(function PaginationItem(props, ref) {
+ const { page } = usePaginationContext();
+ const { size, variantMap, getHref } = useRootProps();
+
+ const current = page === props.value;
+ const variant = current ? variantMap.current : variantMap.default;
+
+ if (getHref) {
+ return (
+
+ {props.value}
+
+ );
+ }
+
+ return (
+
+
+
+ );
+});
+
+export const PaginationPrevTrigger = React.forwardRef<
+ HTMLButtonElement,
+ ChakraPagination.PrevTriggerProps
+>(function PaginationPrevTrigger(props, ref) {
+ const { size, variantMap, getHref } = useRootProps();
+ const { previousPage } = usePaginationContext();
+
+ if (getHref) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ );
+});
+
+export const PaginationNextTrigger = React.forwardRef<
+ HTMLButtonElement,
+ ChakraPagination.NextTriggerProps
+>(function PaginationNextTrigger(props, ref) {
+ const { size, variantMap, getHref } = useRootProps();
+ const { nextPage } = usePaginationContext();
+
+ if (getHref) {
+ return (
+
+ Next
+
+ );
+ }
+
+ return (
+
+
+
+ );
+});
+
+export const PaginationItems = (props: React.HTMLAttributes) => {
+ return (
+
+ {({ pages }) =>
+ pages.map((page, index) => (
+
+ ))
+ }
+
+ );
+};
+
+interface PageTextProps extends TextProps {
+ format?: "short" | "compact" | "long";
+}
+
+export const PaginationPageText = React.forwardRef<
+ HTMLParagraphElement,
+ PageTextProps
+>(function PaginationPageText(props, ref) {
+ const { format = "compact", ...rest } = props;
+ const { page, totalPages, pageRange, count } = usePaginationContext();
+ const content = React.useMemo(() => {
+ if (format === "short") return `${page} / ${totalPages}`;
+ if (format === "compact") return `${page} of ${totalPages}`;
+ return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} of ${count}`;
+ }, [format, page, totalPages, pageRange, count]);
+
+ return (
+
+ {content}
+
+ );
+});
diff --git a/src/components/ui/pin-input.tsx b/src/components/ui/pin-input.tsx
new file mode 100644
index 0000000..93e013c
--- /dev/null
+++ b/src/components/ui/pin-input.tsx
@@ -0,0 +1,27 @@
+import { PinInput as ChakraPinInput, Group } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface PinInputProps extends ChakraPinInput.RootProps {
+ rootRef?: React.Ref
+ count?: number
+ inputProps?: React.InputHTMLAttributes
+ attached?: boolean
+}
+
+export const PinInput = React.forwardRef(
+ function PinInput(props, ref) {
+ const { count = 4, inputProps, rootRef, attached, ...rest } = props
+ return (
+
+
+
+
+ {Array.from({ length: count }).map((_, index) => (
+
+ ))}
+
+
+
+ )
+ },
+)
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..a677ca2
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,39 @@
+import { Switch as ChakraSwitch } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface SwitchProps extends ChakraSwitch.RootProps {
+ inputProps?: React.InputHTMLAttributes
+ rootRef?: React.Ref
+ trackLabel?: { on: React.ReactNode; off: React.ReactNode }
+ thumbLabel?: { on: React.ReactNode; off: React.ReactNode }
+}
+
+export const Switch = React.forwardRef(
+ function Switch(props, ref) {
+ const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
+ props
+
+ return (
+
+
+
+
+ {thumbLabel && (
+
+ {thumbLabel?.on}
+
+ )}
+
+ {trackLabel && (
+
+ {trackLabel.on}
+
+ )}
+
+ {children != null && (
+ {children}
+ )}
+
+ )
+ },
+)
diff --git a/src/index.css b/src/index.css
index 1ac4b6c..6b587a8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-*{
+body{
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -21,7 +21,12 @@
/* background-color: #e2e8f01c !important; */
}
-
+.active>.css-1ic543h {
+ -webkit-transition: rotate 0.2s;
+ transition: rotate 0.2s;
+ transform-origin: center;
+ color: #fff;
+}
.linkChild:hover{
color: #02A0A0 !important;
@@ -49,70 +54,26 @@
}
-/* Sphere.css */
-
-/* ✅ Red Spheres */
-.red-sphere-1,
-.red-sphere-2,
-.red-sphere-3{
- position: absolute;
- border-radius: 50%;
- background-color: #D90B2E46;
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- filter: blur(100px);
+/* Style the scrollbar */
+::-webkit-scrollbar {
+ width: 12px; /* Width of the vertical scrollbar */
+ height: 12px; /* Height of the horizontal scrollbar */
}
-/* ✅ Blue Spheres */
-.blue-sphere-1,
-.blue-sphere-2,
-.blue-sphere-3{
- position: absolute;
- border-radius: 50%;
- background-color: #009DAB46;
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- filter: blur(100px);
+/* Style the scrollbar track (the background area) */
+::-webkit-scrollbar-track {
+ background-color: #f1f1f1; /* Light gray track */
+ border-radius: 10px;
}
-/* 🔧 Positioning for Spheres */
-.red-sphere-1 {
- width: 250px;
- height: 250px;
- top: 10%;
- left: 5%;
+/* Style the scrollbar thumb (the draggable part) */
+::-webkit-scrollbar-thumb {
+ background-color: #f3f3f3; /* Gray color for the thumb */
+ border-radius: 10px;
+ border: 3px solid #f1f1f1; /* Border around the thumb */
}
-.blue-sphere-1 {
- width: 320px;
- height: 320px;
- top: 30%;
- right: 0%;
+/* Style the scrollbar thumb on hover */
+::-webkit-scrollbar-thumb:hover {
+ background-color: #555; /* Darker gray when hovered */
}
-
-.red-sphere-2 {
- width: 180px;
- height: 180px;
- bottom: 15%;
- left: 20%;
-}
-
-.blue-sphere-2 {
- width: 140px;
- height: 140px;
- bottom: 5%;
- right: 25%;
-}
-
-.red-sphere-3 {
- width: 480px;
- height: 480px;
- bottom: 55%;
- left: 40%;
-}
-
-.blue-sphere-3{
- width: 300px;
- height: 300px;
- bottom: 10%;
- right: 40%;
-}
-