"use client";
import {
Sheet,
SheetClose,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { BiSolidShoppingBag } from "react-icons/bi";
import { IoCloseSharp } from "react-icons/io5";
import CartProducts from "./CartProducts";
import { useDispatch, useSelector } from "react-redux";
import { Suspense, useEffect } from "react";
import { hideLoading } from "@/app/redux/slices/cart";

const CardSheet = ({}) => {
const dispatch = useDispatch();
const { loading, cartItems } = useSelector((state: any) => state.cart);
useEffect(() => {
dispatch(hideLoading());
}, []);

return (
#Unknown Channel
<div className="leading-none absolute right-1 bottom-4 bg-red-500 rounded-full pointer-events-none">
<span className="text-md text-white">{cartItems.length}</span>
</div>
<div>
<Sheet>
<SheetTrigger>
<div className="px-2">
<BiSolidShoppingBag size={25} />
</div>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<div className="flex justify-between items-center">
<SheetTitle>Your Cart</SheetTitle>
<SheetClose>
<div className="border border-dashed">
<IoCloseSharp size={25} />
</div>
</SheetClose>
</div>
</SheetHeader>
{loading ? (
<div>Loading Cart</div>
) : (
<div>
<section>
{cartItems.length > 0 ? (
#Unknown Channel
{cartItems.map((item, index) => (
<div key={index}>
<div>{item.color}</div>
<div>{item.qty}</div>
</div>
))}
</>
) : (
<div>Cart is empty</div>
)}
</section>
<section>{/* cart total /}</section>
<section>{/ checkout button */}</section>
</div>
)}
</SheetContent>
</Sheet>
</div>
</>
);
};

export default CardSheet;

here is the error:

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "0" Client: "5"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
span
div
CardSheet
div
div
div
div
div
div
nav
div
div
div
Unhandled Runtime Error
Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.