shopping site in NextJS - can't figure out how to send the card from shop/page.jsx, to cart/page.jsx

const Shop = () => {
  return (
    <main className={Styles.shopContainer}>
      {posts.map((post) => (
        <div key={post.id} className={Styles.card}>
          <Image
            className="imgCard"
            src={post.image}
            alt={post.name}
            width={450}
            height={600}
            sizes="100vw"
          />
          <h2>{post.name}</h2>
          <p>Price: ${post.price}</p>
          <Link
        href={{
          pathname: '/cart',
          query: {
            id: post.id
          }
        }}
      >
        Add to cart
      </Link>
        </div>
      ))}
    </main>
  );
};

const Shop = () => {
  return (
    <main className={Styles.shopContainer}>
      {posts.map((post) => (
        <div key={post.id} className={Styles.card}>
          <Image
            className="imgCard"
            src={post.image}
            alt={post.name}
            width={450}
            height={600}
            sizes="100vw"
          />
          <h2>{post.name}</h2>
          <p>Price: ${post.price}</p>
          <Link
        href={{
          pathname: '/cart',
          query: {
            id: post.id
          }
        }}
      >
        Add to cart
      </Link>
        </div>
      ))}
    </main>
  );
};

'use client'

import { useSearchParams } from 'next/navigation'

const Cart = () => {
  const searchParams = useSearchParams()
  console.log(searchParams.get('id')) // Logs post.id value from url
  const id = searchParams.get('id')
  const item = posts.fitler(post => post.id !== id)
  
  //... save item to localStorage or something
}

export default Cart

'use client'

import { useSearchParams } from 'next/navigation'

const Cart = () => {
  const searchParams = useSearchParams()
  console.log(searchParams.get('id')) // Logs post.id value from url
  const id = searchParams.get('id')
  const item = posts.fitler(post => post.id !== id)
  
  //... save item to localStorage or something
}

export default Cart

//cart.jsx
import React from "react";

export default function Cart({searchParams}) {
  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
{searchParams.id}
    </div>
  );

//cart.jsx
import React from "react";

export default function Cart({searchParams}) {
  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
{searchParams.id}
    </div>
  );

"use client";

import { useSearchParams } from "next/navigation";
import posts from "../data";

export default function Cart({ useSearchParams }) {
  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      {searchParams.id}
    </div>
  );
}
// const Cart = () => {
//   const searchParams = useSearchParams();
//   console.log(searchParams.get("id")); // Logs post.id value from url
//   const id = searchParams.get("id");
//   const item = posts.filter((post) => post.id !== id);

//   //... save item to localStorage or something
// };

// export default Cart;

"use client";

import { useSearchParams } from "next/navigation";
import posts from "../data";

export default function Cart({ useSearchParams }) {
  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      {searchParams.id}
    </div>
  );
}
// const Cart = () => {
//   const searchParams = useSearchParams();
//   console.log(searchParams.get("id")); // Logs post.id value from url
//   const id = searchParams.get("id");
//   const item = posts.filter((post) => post.id !== id);

//   //... save item to localStorage or something
// };

// export default Cart;

import { useSearchParams } from "next/navigation";
import posts from "../data";

export default function Cart({ useSearchParams }) {
  const searchParams = useSearchParams();
  console.log(searchParams.get("id")); // Logs post.id value from url
  const id = searchParams.get("id");
  const item = posts.filter((post) => post.id !== id);
  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      {searchParams.id}
    </div>
  );

import { useSearchParams } from "next/navigation";
import posts from "../data";

export default function Cart({ useSearchParams }) {
  const searchParams = useSearchParams();
  console.log(searchParams.get("id")); // Logs post.id value from url
  const id = searchParams.get("id");
  const item = posts.filter((post) => post.id !== id);
  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      {searchParams.id}
    </div>
  );

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
<p>
{item[0].id}
      {item[0].name}
{item[0].price}
{item[0].image}</p>

    </div>
  );

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
<p>
{item[0].id}
      {item[0].name}
{item[0].price}
{item[0].image}</p>

    </div>
  );

 const id = searchParams.get("id");
  const item = posts.filter((post) => post.id !== id);

 const id = searchParams.get("id");
  const item = posts.filter((post) => post.id !== id);

import React from "react";

export default function Cart({ searchParams }) {
  const searchParams = useSearchParams();
  console.log(searchParams.get("id")); // Logs post.id value from url
  const id = searchParams.get("id");
  const item = posts.filter((post) => post.id !== id);
  console.log(item);

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      <p>
        {item[0].id}
        {item[0].name}
        {item[0].price}
        {item[0].image}
      </p>
      {searchParams.id}
    </div>
  );
}

import React from "react";

export default function Cart({ searchParams }) {
  const searchParams = useSearchParams();
  console.log(searchParams.get("id")); // Logs post.id value from url
  const id = searchParams.get("id");
  const item = posts.filter((post) => post.id !== id);
  console.log(item);

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      <p>
        {item[0].id}
        {item[0].name}
        {item[0].price}
        {item[0].image}
      </p>
      {searchParams.id}
    </div>
  );
}

export default function Cart({ searchParams }) {
  const searchParams = useSearchParams();

export default function Cart({ searchParams }) {
  const searchParams = useSearchParams();

import React from "react";
import posts from "../data";

export default function Cart({ searchParams }) {
  console.log(searchParams.id); // Logs post.id value from url
  const id = searchParams.id;
  const item = posts.filter((post) => post.id !== id);
  console.log(item);

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      <p>
        {item[0].id}
        {item[0].name}
        {item[0].price}
        {item[0].image}
      </p>
      {searchParams.id}
    </div>
  );
}

import React from "react";
import posts from "../data";

export default function Cart({ searchParams }) {
  console.log(searchParams.id); // Logs post.id value from url
  const id = searchParams.id;
  const item = posts.filter((post) => post.id !== id);
  console.log(item);

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      <p>
        {item[0].id}
        {item[0].name}
        {item[0].price}
        {item[0].image}
      </p>
      {searchParams.id}
    </div>
  );
}

    const [todos, setTodos] = useState([]);
    const [todoItem, setTodoItem] = useState('');

    const [todos, setTodos] = useState([]);
    const [todoItem, setTodoItem] = useState('');

useEffect(() => {
    const filteredItems = items.filter(item => item.id === id);
    setItems(filteredItems);
 }, [id, items]);

useEffect(() => {
    const filteredItems = items.filter(item => item.id === id);
    setItems(filteredItems);
 }, [id, items]);