I would like to use my reusable input component in all my child routes in dashboard route such as library, project, message. These child route have similar layout, but not identical, but I would like my input component to stay at the bottom of the page for inside those child route. One way, of course, is to add it as a parallel routes to all my child route, but I wish a more elegant way to achieve it in the context of nextjs, right now can't think of a way to do it.
here is an example of my child route, dashboard/project,

<Box className="dashboard_menu">{list}</Box>
  <Box className="dashboard_main">
  <Box className="dashboard_main_flex">
    <Box className="dashboard_main_flex-section">
      <Box className="dashboard_main_flex-section-content">{main}</Box>
      <Box className="dashboard_main_flex-section-input">{input}</Box>
    </Box>
  </Box>
</Box>

here is my folder structure:
(dashboard)
â”— dashboard
┃ ┣ (home)
┃ ┃ ┣ @main
┃ ┃ ┃ ┣ @analytics
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┣ @overview
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┣ @request
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┣ default.tsx
┃ ┃ ┃ ┗ layout.tsx
┃ ┃ ┣ @menu
┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┣ layout.tsx
┃ ┃ ┗ loading.tsx
┃ ┣ @input
┃ ┃ ┗ page.tsx
┃ ┣ library
┃ ┃ ┣ @list
┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┣ @main
┃ ┃ ┃ ┣ @card
┃ ┃ ┃ ┣ layout.tsx
┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┣ layout.tsx
┃ ┃ ┗ loading.tsx
┃ ┣ message
┃ ┃ ┣ @list
┃ ┃ ┃ ┣ loading.tsx
┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┣ @window
┃ ┃ ┃ ┣ loading.tsx
┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┗ layout.tsx
┃ ┣ project
┃ ┃ ┣ @list
┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┣ @main
┃ ┃ ┃ ┣ @purchase
┃ ┃ ┃ ┃ ┣ loading.tsx
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┣ @sales
┃ ┃ ┃ ┃ ┣ loading.tsx
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┣ @table
┃ ┃ ┃ ┃ ┣ loading.tsx
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┣ default.tsx
┃ ┃ ┃ ┣ layout.tsx
┃ ┃ ┃ ┗ page.scss
┃ ┃ ┣ layout.tsx
┃ ┃ ┗ loading.tsx
┃ ┣ qc
┃ ┃ ┣ layout.tsx
┃ ┃ ┣ loading.tsx
┃ ┃ ┗ page.tsx
┃ ┣ error.tsx
┃ ┣ layout.tsx
┃ ┣ loading.tsx
┃ ┗ page.scss