feat(docs): add description to deprecated props on refine component (#…

…6351)

documentation/docs/core/refine-component/index.md

@@ -720,6 +720,8 @@ Callback to handle all live events.
 
 ## ~~catchAll~~ <PropTag deprecated />
 
+| 🚨 Use the `<CustomErrorPage />` component in your routes instead.
+
 When the app is navigated to a non-existent route, Refine shows a default error page. A custom error component can be used for this error page by passing the customized component to the `catchAll` property:
 
 ```tsx title="App.tsx"
@@ -736,6 +738,8 @@ const App = () => (
 
 ## ~~LoginPage~~ <PropTag deprecated />
 
+| 🚨 Use the `<AuthPage />` component in your routes instead.
+
 Refine has a default login page form which is served on the `/login` route when the `authProvider` configuration is provided.
 
 Custom login component can be passed to the `LoginPage` property.
@@ -754,6 +758,8 @@ const App = () => (
 
 ## ~~DashboardPage~~ <PropTag deprecated />
 
+| 🚨 Use the `<CustomDashboardPage />` component in your routes instead.
+
 A custom dashboard page can be passed to the `DashboardPage` prop which is accessible on the root route.
 
 The dashboard item will appear at the top of the sider menu. If `DashboardPage` is not given, the first resource of `resources` will be shown.
@@ -790,12 +796,16 @@ const App = () => (
 
 ## ~~Sider~~ <PropTag deprecated />
 
+| 🚨 Use `Sider` prop of `<ThemedLayoutV2 />` component instead.
+
 The default sidebar can be customized by using Refine hooks and passing custom components to the `Sider` property.
 
 > For more information, refer to the [`useMenu` hook documentation &#8594](/docs/core/hooks/utilities/use-menu)
 
 ## ~~Footer~~ <PropTag deprecated />
 
+| 🚨 Use `Footer` prop of `<ThemedLayoutV2 />` component instead.
+
 The default app footer can be customized by passing the `Footer` property.
 
 ```tsx title="App.tsx"
@@ -812,7 +822,7 @@ const App = () => (
 
 ## ~~Header~~ <PropTag deprecated />
 
-The default app header can be customized by passing the `Header` property.
+| 🚨 Use `Header` prop of `<ThemedLayoutV2 />` component instead.
 
 ```tsx title="App.tsx"
 // highlight-next-line
@@ -828,6 +838,8 @@ const App = () => (
 
 ## ~~Layout~~ <PropTag deprecated />
 
+| 🚨 Use `<ThemedLayoutV2 />` as children of `<Refine />` instead.
+
 The default layout can be customized by passing the `Layout` property.
 
 Layout property will receive individual layout components as property.
@@ -873,6 +885,8 @@ const App = () => (
 
 ## ~~OffLayoutArea~~ <PropTag deprecated />
 
+| 🚨 Use `OffLayoutArea` prop of `<ThemedLayoutV2 />` component instead.
+
 The component wanted to be placed out of the app layout structure can be set by passing to the `OffLayoutArea` prop.
 
 ```tsx title="App.tsx"
@@ -888,6 +902,8 @@ const App = () => (
 
 ## ~~Title~~ <PropTag deprecated />
 
+| 🚨 Use `Title` prop of `<ThemedLayoutV2 />` component instead.
+
 The app title can be set by passing the `Title` property.
 
 ```tsx title="App.tsx"