How to import the rating feature into my app.

[captainwycliffe]

Hi any developer, I'm trying to implement the rating feauture in my app but I don't know why it's not working?I am trying to import the rating from teh hydrogen store.Please some one help.This is the code for the products:
`*
import { Money } from "@shopify/hydrogen";
import { useVariantUrl } from '~/lib/variants';
import { Link, Form } from "@remix-run/react";
import { AddToCartButton } from "./CartButton";
import { type CSSProperties, useState } from "react";
import { motion } from "framer-motion";

export default function ProductItem({
product,
loading,
}: {
readonly product: any;
readonly loading?: 'eager' | 'lazy';
}) {
const variant: any = product.variants.nodes[0];
const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
const compareAtPrice = parseFloat(product.compareAtPriceRange?.minVariantPrice?.amount || '0');
const price = parseFloat(product.priceRange.minVariantPrice.amount);
const savings = compareAtPrice ? ((compareAtPrice - price) / compareAtPrice) * 100 : 0;
const isOnSale = compareAtPrice > price;
const onSale = compareAtPrice ? (compareAtPrice - price) : 0;
const currrency = product.compareAtPriceRange?.minVariantPrice?.currencyCode;
const onSaleMoney = {
currencyCode: currrency,
amount: onSale.toFixed(2)
}
const [isLikedHover, setIsLikedHover] = useState(false);
const [likedState, setLikedState] = useState(product.isLiked)

// Extract rating information from the product data
const rating = product?.rating?.value || 0;
const reviewCount = product?.rating?.count || 0;

// Function to render star rating
const renderStars = (rating: number) => {
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);

    return (
        <>
            {'★'.repeat(fullStars)}
            {hasHalfStar ? '½' : ''}
            {'☆'.repeat(emptyStars)}
        </>
    );
};

return (
    <div className="search-results-item shadow pb-4 rounded shadow relative" key={product.id}>

        {isOnSale && (
            <div className="sale-icon" style={saleIconStyle as CSSProperties}>
                Sale
            </div>
        )}

        {isOnSale && (
            <div className="sale-icon" style={percentageSaleIconStyle as CSSProperties}>
                {Math.ceil(savings)}% off
            </div>
        )}

        {isOnSale && (
            <div className="sale-icon" style={percentageSaleIconStyle as CSSProperties}>
                {Math.ceil(savings)}% off
            </div>
        )}
        {/* heart icon */}
        <Form method="POST">
            <input type="hidden" name="_action" value='likedProduct' />
            <input type="hidden" name="prod_id" value={product.id} />
            <motion.button onClick={() => setLikedState(!likedState)} whileHover={{ scale: 1.25 }} type="submit" style={{ height: '35px', width: '35px', top: '50%', position: 'absolute', right: "5%" }}>
                {
                    likedState ? <img src="/reshot-icon-heart-full.svg" alt="" /> : <img onMouseEnter={() => setIsLikedHover(true)} onMouseLeave={() => setIsLikedHover(false)} src={`${isLikedHover ? '/reshot-icon-heart-black-filled.svg' : '/reshot-icon-heart.svg'}`} alt="" />
                }

            </motion.button>
        </Form>

        <img
            className='object-scale-down sizes=(min-width: 45em) 20vw, 50vw mb-2 bg-white py-2'
            src={`${product?.featuredImage.url}&width=267`}
            alt=""
            style={{ height: "38vh", width: '100%' }}
        />
        <Link
            style={{ textDecoration: "none", display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 0 }}
            prefetch="intent"
            to={variantUrl}
        >
            <h4 className='text-l text-left pl-3'>
                {product.title.length > 40 ? `${product.title.slice(0, 40)}....` : product.title}
            </h4>
            <small className='text-left text-xs font-semibold' style={{ width: "90%" }}>
                {Number(product?.compareAtPriceRange?.minVariantPrice.amount) > Number(product?.priceRange?.minVariantPrice.amount) ? (
                    <>
                        <div className="pt-4 product-price-on-sale font-semibold" style={{ textAlign: 'left' }}>
                            <Money className='font-bold' style={{ fontSize: '16px' }} data={product.priceRange.minVariantPrice} />
                            <s>
                                <Money className="text-left" data={product.compareAtPriceRange.minVariantPrice} />
                            </s>
                        </div>
                        <p className='text-left pt-2 text-sm text-red-500'> Save <Money className="inline-block" data={onSaleMoney} /></p>
                    </>
                ) : (
                    <Money className=' font-semibold pt-4' style={{ fontSize: '16px', textAlign: 'left' }} data={product.priceRange.minVariantPrice} />
                )}
            </small>
            {/* Rating display */}
            <div className="flex items-center mt-2">
                <span className="text-yellow-400 text-lg">{renderStars(rating)}</span>
                <span className="ml-1 text-sm text-gray-600">{rating.toFixed(1)} out of 5</span>
                <span className="ml-2 text-sm text-blue-500">({reviewCount} reviews)</span>
            </div>
        </Link>
        <div className="pt-5 pl-3 absolute bottom-3">
            <AddToCartButton
                cartButtonFormat='COLLECTION_SEARCH'
                disabled={!variant || !variant['availableForSale']}

                onClick={() => {
                    const currentUrl = window.location.href;
                    if (currentUrl.includes('#')) {
                        const baseUrl = currentUrl.split('#')[0];
                        window.location.href = `${baseUrl}#cart-aside`;
                    } else {
                        window.location.href = `${currentUrl}#cart-aside`;
                    }
                }}
                lines={
                    variant
                        ? [
                            {
                                merchandiseId: variant['id'],
                                quantity: 1,
                            },
                        ]
                        : []
                }
            >
                {variant['availableForSale'] ? 'Add to bag' : 'Sold out'}
            </AddToCartButton>
        </div>
    </div>
);

}

const saleIconStyle = {
position: "absolute",
top: "10px",
left: "10px",
backgroundColor: "red",
color: "white",
borderRadius: "5px",
padding: "2px 6px",
fontSize: "12px",
fontWeight: "bold",
zIndex: 1
};

const percentageSaleIconStyle = {
position: "absolute",
top: "10px",
right: "10px",
backgroundColor: "red",
color: "white",
borderRadius: "5px",
padding: "2px 6px",
fontSize: "12px",
fontWeight: "bold",
zIndex: 1
};
`*
I have attached the hydrogen store picture here.Please note this is the whole code,

[blittle]

Hi @captainwycliffe the code you pasted in is very difficult to read. It might be easier to share a minimal repo that has the rating implemented.