feat : add config id for url , like

/configid/2 for view config by id

src/layout/index.tsx

@@ -1,10 +1,29 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useParams } from "react-router-dom";
 import Header from "../components/header";
 import Footer from "../components/footer";
 import Particle from "../components/particle";
-import { Helmet } from 'react-helmet-async';
+import { Helmet } from "react-helmet-async";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setConfigId } from "../redux/slices/configId";
 
 const Layout = () => {
+  const { configs } = useParams<{ configs: string }>();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (configs === "1" || configs === "2" || configs === "3")
+      dispatch(setConfigId(configs));
+    if (configs)
+      setTimeout(() => {
+        const element = document.getElementById("configs");
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth" });
+        } else {
+          console.error("Element with ID 'configs' not found");
+        }
+      }, 100); // Scroll to 100% of the page height
+  }, [configs]);
+
   return (
     <>
       <Helmet>

src/redux/slices/configId.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface configIdState {
+  id: string;
+}
+
+const initialState: configIdState = {
+  id: "",
+};
+
+const configIdSlice = createSlice({
+  name: "configId",
+  initialState,
+  reducers: {
+    setConfigId: (state, action: PayloadAction<string>) => {
+      state.id = action.payload;
+    },
+  },
+});
+
+export const { setConfigId } = configIdSlice.actions;
+
+export default configIdSlice.reducer;

src/redux/store.ts

@@ -14,6 +14,8 @@ import {
   REGISTER,
 } from "redux-persist";
 import tokenReducer from "./slices/token";
+import configId from "./slices/configId";
+import categoryId from "./slices/categoryId";
 
 // Encryption settings
 const secretKey = "token-encrypt-api";
@@ -43,6 +45,8 @@ const persistedTokenReducer = persistReducer(persistConfigToken, tokenReducer);
 const store = configureStore({
   reducer: {
     token: persistedTokenReducer,
+    configIdState: configId,
+    categoryIdState: categoryId,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({