I would like to create a page where are two columns where on left columns are displayed just names of lines and when you click on it it will append the id to the url and then I would like to render on the right side other component where will be much more detailed info.. but it seems i dont know how to pass the lines to the children so I can acess it in my /[id]/page.js..

import CreateNewView from "./createNewView";
import Line from "./line";

const getData = async () => {
  const response = await fetch("http://localhost:3000/api/getDistinctLines", {
    cache: "force-cache",
  });
  if (!response.ok) {
    throw new Error("failed to get data...");
  }
  return response.json();
};

const getLines = async () => {
  const response = await fetch(
    "http://localhost:3000/api/getPreviewViewArray",
    {
      cache: "force-cache",
    }
  );
  /*   console.log("response...", response);
  console.log("response json ...", response.json()) */
  if (!response.ok) {
    throw new Error("failed to get data...");
  }
  return response.json();
};

export default async function Layout({ children }) {
  const distinctLines = await getData();
  const lines = await getLines();

  return (
    <div className="flex flex-row w-full min-h-screen gap-10">
      <div className="flex flex-col w-2/6 rounded-lg bg-green-300 mx-10 my-10 items-center space-y-6">
        <CreateNewView distinctLines={distinctLines} />
        {lines &&
          lines.data.length > 0 &&
          lines.data.map((line) => <Line line={line} />)}
      </div>
      <div className="flex flex-col w-4/6 rounded-lg bg-red-300 mx-10 my-10">
        {" "}
        {children}
      </div>
    </div>
  );
}