\n
\n )\n}\n\nCarouselSectionTitle.propTypes = {\n title: PropTypes.string.isRequired,\n}\n\nconst Arrow = ({\n className,\n onClick,\n direction,\n carouselControlsButtonStyles,\n}) => (\n \n
\n \n
\n {title}
\n\n
\n \n
)\n}\n\nImageWithText.propTypes = {\n section: PropTypes.shape({\n button_arrow: PropTypes.string.isRequired,\n button_background: PropTypes.string.isRequired,\n button_background_hover: PropTypes.string.isRequired,\n button_color: PropTypes.string.isRequired,\n button_color_hover: PropTypes.string.isRequired,\n button_label: PropTypes.string.isRequired,\n button_url: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n image_alt: PropTypes.string.isRequired,\n image_url: PropTypes.string.isRequired,\n link_open_in_new_tab: PropTypes.bool.isRequired,\n subtitle: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }).isRequired,\n}\n\n// ContentImageSection: A component that displays an image along with some text content.\nexport default function ContentImageSection({ section }) {\n const { is_gray, is_gradient, layout } = section.config\n\n const sectionClasses = classNames({\n imageRight: layout === 'right',\n 'section--grey': is_gray,\n textWithImage: true,\n textWithImageGradient: is_gradient,\n })\n\n return (\n \n
\n \n \n {section.button_label}\n \n )}\n
\n \n \n {section.title}\n \n
\n{section.subtitle}
\n{section.description}
\n {section.button_url.trim() !== '' && section.button_label.trim() !== '' && (\n\n
\n \n )\n}\n\nContentImageSection.propTypes = {\n section: PropTypes.shape({\n button_arrow: PropTypes.string.isRequired,\n button_background: PropTypes.string.isRequired,\n button_background_hover: PropTypes.string.isRequired,\n button_color: PropTypes.string.isRequired,\n button_color_hover: PropTypes.string.isRequired,\n button_label: PropTypes.string.isRequired,\n button_url: PropTypes.string.isRequired,\n config: PropTypes.shape({\n is_gradient: PropTypes.bool.isRequired,\n is_gray: PropTypes.bool.isRequired,\n layout: PropTypes.oneOf(['left', 'right']).isRequired,\n }).isRequired,\n description: PropTypes.string.isRequired,\n image_alt: PropTypes.string.isRequired,\n image_url: PropTypes.string.isRequired,\n link_open_in_new_tab: PropTypes.bool.isRequired,\n node_id: PropTypes.string.isRequired,\n subtitle: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }).isRequired,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\n// HeroFooterSection: A component that displays a hero section with a background color in the footer.\nexport default function HeroFooterSection({ section }) {\n const {\n background_color,\n button_color,\n button_background,\n button_color_hover,\n button_background_hover,\n link_open_in_new_tab,\n button_arrow,\n title_color,\n } = section\n\n const sectionStyles = {\n backgroundColor: background_color,\n }\n\n const buttonStyles = {\n '--button-background': button_background,\n '--button-background-hover': button_background_hover,\n '--button-color': button_color,\n '--button-color-hover': button_color_hover,\n }\n\n const headingStyles = {\n color: title_color, // Set the color for the heading based on title_color\n }\n\n return (\n \n
\n \n
\n )\n}\n\nHeroFooterSection.propTypes = {\n section: PropTypes.shape({\n background_color: PropTypes.string.isRequired,\n button_arrow: PropTypes.string.isRequired,\n button_background: PropTypes.string.isRequired,\n button_background_hover: PropTypes.string.isRequired,\n button_color: PropTypes.string.isRequired,\n button_color_hover: PropTypes.string.isRequired,\n button_label: PropTypes.string.isRequired,\n button_url: PropTypes.string.isRequired,\n link_open_in_new_tab: PropTypes.bool.isRequired,\n node_id: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n title_color: PropTypes.string.isRequired,\n }).isRequired,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\n// HeroSection: A component that displays a hero section with a background image, logo, and a call-to-action button.\nexport default function HeroSection({ section }) {\n const {\n node_id,\n image_url,\n logo_alt,\n logo_url,\n title,\n button_url,\n button_label,\n button_color,\n button_background,\n button_color_hover,\n button_background_hover,\n link_open_in_new_tab,\n button_arrow,\n } = section\n\n const buttonStyles = {\n '--button-background': button_background,\n '--button-background-hover': button_background_hover,\n '--button-color': button_color,\n '--button-color-hover': button_color_hover,\n }\n\n return (\n \n
\n \n \n {section.button_label}\n \n )}\n
\n \n {section.title}\n
\n {section.button_url.trim() !== '' && section.button_label.trim() !== '' && (\n\n
\n )\n}\n\nHeroSection.propTypes = {\n section: PropTypes.shape({\n button_arrow: PropTypes.string.isRequired,\n button_background: PropTypes.string.isRequired,\n button_background_hover: PropTypes.string.isRequired,\n button_color: PropTypes.string.isRequired,\n button_color_hover: PropTypes.string.isRequired,\n button_label: PropTypes.string.isRequired,\n button_url: PropTypes.string.isRequired,\n image_url: PropTypes.string.isRequired,\n link_open_in_new_tab: PropTypes.bool.isRequired,\n logo_alt: PropTypes.string.isRequired,\n logo_url: PropTypes.string.isRequired,\n node_id: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n }).isRequired,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\n// ListImageSection: A component that displays a list of items with icons and a main image.\nexport default function ListImageSection({ section }) {\n const {\n button_color,\n button_background,\n button_color_hover,\n button_background_hover,\n link_open_in_new_tab,\n button_arrow,\n } = section\n const { is_gray } = section.config\n\n const buttonStyles = {\n '--button-background': button_background,\n '--button-background-hover': button_background_hover,\n '--button-color': button_color,\n '--button-color-hover': button_color_hover,\n }\n\n const sectionClasses = classNames({\n 'section--grey': is_gray,\n })\n\n return (\n \n
\n \n
\n \n
\n \n 
\n
\n \n \n {title}\n \n
\n {section.button_url.trim() !== '' && section.button_label.trim() !== '' && (\n \n {button_label}\n \n )}\n\n
\n \n
\n \n
\n {section.title}
\n\n
\n \n
\n \n
\n \n
\n \n \n {section.button_label}\n \n )}\n
\n - \n {section.list_items.map(({ alt, content, icon, index }) => (\n
- \n
\n
\n \n
\n \n
\n {title}
\n\n {sections.map((section) => {\n const SectionComponent = sectionComponents[section.section_type]\n if (!SectionComponent) {\n console.warn(`Unknown section type: ${section.section_type}. Please check the section configuration.`)\n return null\n }\n\n if (section.section_type === SECTION_TYPES.CAROUSEL) {\n return
\n )\n}\n\nLandingSectionsRenderer.propTypes = {\n sections: PropTypes.arrayOf(\n PropTypes.shape({\n node_id: PropTypes.string.isRequired,\n section_type: PropTypes.oneOf(Object.values(SECTION_TYPES)).isRequired,\n }).isRequired\n ).isRequired,\n quickViewModalData: PropTypes.object,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { TcAddToCartSuccessModal } from '@tc-packages/tc-common'\n\nconst TCAddToCartSuccessWrapper = ({ config }) => (\n \n \n \n \n
\n )}\n\n return null\n }\n\n return (\n \n <>\n {carousels.length === 0 ?\n <>\n \n
\n )\n}\n\nTCHeaderImageWrapper.propTypes = {\n data: PropTypes.object,\n next: PropTypes.func,\n previous: PropTypes.func,\n}\n\nexport default TCHeaderImageWrapper\n","import React, { useState } from 'react'\nimport PropTypes from 'prop-types'\n\nconst TCHeaderSearch = ({ querypath = '/products?utf8=✓&taxon=&keywords=', keywords, placeholder }) => {\n const [SearchText, setSearchText] = useState('')\n const handleKeyPress = (event) => {\n if (event.keyCode === 13) {\n window.location.href = `${window.location.origin}${querypath}${SearchText}`\n } else {\n setSearchText(event.target.value)\n }\n }\n\n return (\n \n
\n \n :\n \n
\n {fallback.title}
\n{fallback.subtitle}
\n\n 1}\n autoPlaySpeed={10000}\n centerMode={false}\n className=\"slider\"\n customButtonGroup={
\n }\n {!hideSearch &&\n \n
\n )}\n \n \n
\n \n
\n \n
\n {item.header}
\n{item.subheader}
\n \n\n \n
\n )\n}\n\nTCHeaderSearch.propTypes = {\n keywords: PropTypes.string,\n placeholder: PropTypes.string,\n querypath: PropTypes.string,\n\n}\n\nexport default TCHeaderSearch\n","import React, { useState, useEffect } from 'react'\nimport { ThemeProvider } from '@mui/material'\nimport { TcNavbar } from '@tc-packages/tc-common'\nimport PropTypes from 'prop-types'\nimport tcTheme from './TCTheme'\n\nconst TCNavbarWrapper = ({ apiSearch, cartPath, cartConfig, locales, logo, logoUrl, profileData, t, data }) => {\n const [state, setState] = useState({\n logo: '',\n menuItems: [],\n })\n\n useEffect(() => {\n fetch(data)\n .then(res => res.json())\n .then(result => {\n setState(result)\n })\n }, [data])\n\n const { menuItems } = state\n\n return (\n \n {generateReviews}\n
\n )\n}\n\nTCPagination.propTypes = {\n productReviewCount: PropTypes.number.isRequired,\n productReviews: PropTypes.arrayOf(\n PropTypes.shape({\n created_at: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image_large: PropTypes.string,\n image_thumb: PropTypes.string,\n name: PropTypes.string.isRequired,\n rating: PropTypes.number.isRequired,\n review: PropTypes.string.isRequired,\n show_identifier: PropTypes.bool.isRequired,\n title: PropTypes.string,\n })\n ).isRequired,\n setHeight: PropTypes.func.isRequired,\n translations: PropTypes.shape({\n average: PropTypes.string.isRequired,\n button: PropTypes.string.isRequired,\n customer: PropTypes.string.isRequired,\n empty: PropTypes.string.isRequired,\n login: PropTypes.string.isRequired,\n readMore: PropTypes.string.isRequired,\n readLess: PropTypes.string.isRequired,\n reviews: PropTypes.string.isRequired,\n review: PropTypes.string.isRequired,\n }).isRequired,\n}\n\nexport default TCPagination\n","import React, { useState, useEffect, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport { MainModal } from '@tc-packages/tc-common'\nimport { renderStars } from './utils'\nimport debounce from 'lodash/debounce'\n\nconst TCPaginationReviewItem = ({ item, translations }) => {\n const [clamped, setClamped] = useState(true)\n const [showButton, setShowButton] = useState(true)\n const [isModalOpen, setIsModalOpen] = useState(false)\n const containerRef = useRef(null)\n\n const handleClick = useCallback(\n () => setClamped((prevClamped) => !prevClamped),\n [],\n )\n const handleImageClick = useCallback(() => setIsModalOpen(true), [])\n const handleCloseModal = useCallback(() => setIsModalOpen(false), [])\n\n const checkButtonAvailability = useCallback(() => {\n if (containerRef.current) {\n const hadClampClass = containerRef.current.classList.contains(\n 'reviewComponent_text--clamped',\n )\n if (!hadClampClass)\n containerRef.current.classList.add('reviewComponent_text--clamped')\n setShowButton(\n containerRef.current.clientHeight < containerRef.current.scrollHeight,\n )\n if (!hadClampClass)\n containerRef.current.classList.remove('reviewComponent_text--clamped')\n }\n }, [])\n\n useEffect(() => {\n const debouncedCheck = debounce(checkButtonAvailability, 50)\n checkButtonAvailability()\n window.addEventListener('resize', debouncedCheck)\n return () => window.removeEventListener('resize', debouncedCheck)\n }, [checkButtonAvailability])\n\n const modalBody = (\n \n
\n )\n\n return (\n \n Product review details\n
\n\n
\n \n {item.image_large && (\n
\n \n
\n \n
\n {item.title && (\n \n {renderStars(item.rating)}\n
\n \n {item.show_identifier && {item.name} • }\n {new Date(item.created_at).toLocaleDateString()}\n
\n {item.title}
\n )}\n{item.review}
\n\n
\n )\n}\n\nTCPaginationReviewItem.propTypes = {\n item: PropTypes.shape({\n created_at: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image_large: PropTypes.string,\n image_thumb: PropTypes.string,\n name: PropTypes.string.isRequired,\n rating: PropTypes.number.isRequired,\n review: PropTypes.string.isRequired,\n show_identifier: PropTypes.bool.isRequired,\n title: PropTypes.string,\n }).isRequired,\n translations: PropTypes.shape({\n readMore: PropTypes.string.isRequired,\n readLess: PropTypes.string.isRequired,\n }).isRequired,\n}\n\nexport default TCPaginationReviewItem\n","import React, { useState, useCallback, useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport Slider from 'react-slick'\nimport Pagination from './TCPagination'\nimport { MainModal, TcReview } from '@tc-packages/tc-common'\nimport { renderStars } from './utils'\n\nconst TCProductReview = ({\n avgRating,\n isLoggedIn = false,\n productReviewCount,\n productReviews,\n productReviewsWithImages,\n productUrl,\n reviewsCount,\n signInUrl,\n translations,\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false)\n const [selectedReview, setSelectedReview] = useState(null)\n\n const setHeight = useCallback(() => {\n const content = document.getElementById('reviewsTop')?.nextElementSibling\n if (content) {\n content.style.maxHeight = 'initial'\n }\n }, [])\n\n const handleCarouselImageClick = useCallback((review) => {\n setSelectedReview(review)\n setIsModalOpen(true)\n }, [])\n\n const handleCloseModal = useCallback(() => {\n setIsModalOpen(false)\n setSelectedReview(null)\n }, [])\n\n const sendAnalytics = () => {\n window.dataLayer = window.dataLayer || []\n dataLayer.push({ ecommerce: null })\n dataLayer.push({\n cart_type: 'main',\n event: 'write_a_review',\n })\n }\n\n const modalBody = useMemo(() => {\n if (!selectedReview) return null\n\n return (\n \n
\n {renderStars(item.rating)}
\n \n {item.show_identifier && {item.name} • }\n {new Date(item.created_at).toLocaleDateString()}\n
\n \n {item.title && \n {item.review}\n \n {showButton && (\n \n {clamped ? translations.readMore : translations.readLess}\n \n )}\n
\n {item.image_large && (\n {item.title}
}\n\n
\n )\n }, [selectedReview])\n\n const carouselSettings = {\n infinite: true,\n responsive: [\n {\n breakpoint: 768,\n settings: {\n slidesToShow: 2,\n },\n },\n ],\n slidesToScroll: 1,\n slidesToShow: 3,\n }\n\n return (\n \n Product review details\n
\n\n
\n \n {selectedReview.image_large && (\n
\n \n
\n \n
\n {selectedReview.title && (\n \n {renderStars(selectedReview.rating)}\n
\n \n {selectedReview.show_identifier && (\n {selectedReview.name} • \n )}\n \n {new Date(selectedReview.created_at).toLocaleDateString()}\n \n
\n {selectedReview.title}
\n )}\n{selectedReview.review}
\n\n
\n )\n}\n\nTCProductReview.propTypes = {\n avgRating: PropTypes.string.isRequired,\n isLoggedIn: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),\n productReviewCount: PropTypes.number.isRequired,\n productReviews: PropTypes.arrayOf(\n PropTypes.shape({\n created_at: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image_large: PropTypes.string,\n image_thumb: PropTypes.string,\n name: PropTypes.string.isRequired,\n rating: PropTypes.number.isRequired,\n review: PropTypes.string.isRequired,\n show_identifier: PropTypes.bool.isRequired,\n title: PropTypes.string,\n }),\n ).isRequired,\n productReviewsWithImages: PropTypes.arrayOf(\n PropTypes.shape({\n created_at: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image_large: PropTypes.string,\n image_thumb: PropTypes.string,\n name: PropTypes.string.isRequired,\n rating: PropTypes.number.isRequired,\n review: PropTypes.string.isRequired,\n show_identifier: PropTypes.bool.isRequired,\n title: PropTypes.string,\n }),\n ).isRequired,\n productUrl: PropTypes.string.isRequired,\n reviewsCount: PropTypes.number.isRequired,\n signInUrl: PropTypes.string.isRequired,\n translations: PropTypes.shape({\n average: PropTypes.string.isRequired,\n button: PropTypes.string.isRequired,\n customer: PropTypes.string.isRequired,\n empty: PropTypes.string.isRequired,\n login: PropTypes.string.isRequired,\n readLess: PropTypes.string.isRequired,\n readMore: PropTypes.string.isRequired,\n review: PropTypes.string.isRequired,\n reviews: PropTypes.string.isRequired,\n to_leave_a_review: PropTypes.string.isRequired,\n }).isRequired,\n}\n\nexport default TCProductReview\n","import PropTypes from 'prop-types'\nimport React, { useState, useEffect, useCallback } from 'react'\nimport { debounce } from 'lodash'\nimport { trigger } from '../packs/components/events'\n\nconst MOBILE_VIEWPORT_WIDTH = 991\n\nconst useWindowSize = () => {\n const [windowSize, setWindowSize] = useState(window.innerWidth)\n\n useEffect(() => {\n const handleResize = debounce(() => {\n setWindowSize(window.innerWidth)\n }, 100)\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [])\n\n return windowSize\n}\n\nconst sendAnalytics = (variant, quantity) => {\n window.dataLayer = window.dataLayer || []\n dataLayer.push({ ecommerce: null }) // Clear any previous ecommerce objects\n dataLayer.push({\n ecommerce: {\n items: [\n {\n currency: variant.currency,\n item_id: variant.sku,\n item_name: variant.product_name,\n price: variant.price,\n cart_type: 'buy_it_again',\n quantity,\n },\n ],\n },\n event: 'add_to_cart_new',\n })\n}\n\nconst TCProfileBuyItNow = ({\n addToCartText,\n available,\n paymentData,\n variantId,\n}) => {\n const windowWidth = useWindowSize()\n const [error, setError] = useState('')\n const [isLoading, setIsLoading] = useState(false)\n\n const handleAddToCart = useCallback(() => {\n const quantityInput = document.querySelector(\n `input[data-id=\"line_item_${variantId}\"]`,\n )\n const quantity = quantityInput ? parseInt(quantityInput.value, 10) : 1\n\n setIsLoading(true)\n Spree.ensureCart(() => {\n SpreeAPI.Storefront.addToCart(\n variantId,\n quantity,\n {},\n (response) => {\n sendAnalytics(paymentData.variant, quantity)\n const fetchCartCountEvent = new CustomEvent('FETCH_CART_COUNT', {})\n document.dispatchEvent(fetchCartCountEvent)\n setIsLoading(false)\n\n if (windowWidth <= MOBILE_VIEWPORT_WIDTH) {\n window.location.href = Spree.routes.cart\n } else {\n trigger('openAddToCartSuccessModal', {\n addedCartItem: response,\n paymentData: paymentData,\n quantity,\n variant: paymentData.variant,\n })\n }\n setError('')\n },\n (error) => {\n setError(error)\n setIsLoading(false)\n },\n )\n })\n }, [variantId, paymentData, windowWidth])\n\n return (\n <>\n \n
\n \n \n {productReviewsWithImages.map((review) => (\n handleCarouselImageClick(review)}\n src={review.image_thumb}\n />\n ))}\n \n ) : (\n
\n \n
\n {productReviewsWithImages.length > 3 ? (\n {translations.customer}
\n\n {productReviewsWithImages.map((review) => (\n handleCarouselImageClick(review)}\n src={review.image_thumb}\n />\n ))}\n
\n )}\n \n \n {translations.button}\n \n ) : (\n
\n {translations.average} {avgRating.slice(0, 3)}
\n {isLoggedIn ? (\n\n \n \n {translations.login}\n \n {translations.to_leave_a_review}\n \n
\n )}\n\n {productReviewCount !== 0 && (\n
\n \n
\n )}\n {error}
}\n \n )\n}\n\nTCProfileBuyItNow.propTypes = {\n addToCartText: PropTypes.string,\n available: PropTypes.bool,\n paymentData: PropTypes.shape({\n old_price: PropTypes.string,\n on_sale: PropTypes.bool,\n price: PropTypes.string,\n product_id: PropTypes.number,\n variant: PropTypes.shape({\n brand: PropTypes.string,\n brand_name: PropTypes.string,\n category: PropTypes.string,\n currency: PropTypes.string,\n image_path: PropTypes.string,\n limit: PropTypes.number,\n name: PropTypes.string,\n old_price: PropTypes.string,\n on_sale: PropTypes.bool,\n price: PropTypes.string,\n product_name: PropTypes.string,\n sku: PropTypes.string,\n subsidy: PropTypes.string,\n value: PropTypes.number,\n volume_prices: PropTypes.array,\n }),\n }),\n variantId: PropTypes.number,\n}\n\nexport default TCProfileBuyItNow\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { QuickViewModal } from '@tc-packages/tc-common'\n\nconst TCQuickViewModalWrapper = ({ config }) => (\n window.location.href=item.link}\n >\n
,\n )}\n \n )\n}\n\nTCSalonCycleCarousel.propTypes = {\n products: PropTypes.array,\n}\n\nexport default TCSalonCycleCarousel\n","import { createTheme } from '@mui/material/styles'\n\nconst tcTheme = createTheme({\n palette: {\n primary: {\n contrastText: '#fff',\n main: '#1c8f61',\n },\n secondary: {\n contrastText: '#fff',\n main: '#414141',\n },\n typography: {\n fontFamily: [\n '-apple-system',\n 'Gotham Book',\n ].join(','),\n },\n },\n props: {\n MuiButtonBase: {\n disableRipple: true,\n },\n\n },\n shadows: Array(25).fill('none'),\n})\nexport default tcTheme\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst TCTileRichList = ({ rich_list_items, translations }) => (\n \n
\n \n
\n \n {item.name}\n
\n \n {item.price}\n
\n \n
\n)\n\nTCTileRichList.propTypes = {\n rich_list_items: PropTypes.arrayOf(\n PropTypes.shape({\n btn_label: PropTypes.string,\n description: PropTypes.string,\n image: PropTypes.string,\n rich_list_items: PropTypes.array,\n title: PropTypes.string,\n })\n ),\n translations: PropTypes.shape({\n description: PropTypes.string,\n title: PropTypes.string,\n }),\n}\n\nexport default TCTileRichList\n","import React from 'react'\nimport Carousel from 'react-multi-carousel'\nimport PropTypes from 'prop-types'\nimport 'react-multi-carousel/lib/styles.css'\n\nconst TCUpCycleCarousel = props => {\n const responsive = {\n desktop: {\n breakpoint: { max: 99999, min: 991 },\n items: 3,\n },\n mobile: {\n breakpoint: { max: 991, min: 0 },\n items: 1,\n },\n }\n\n return (\n {translations.title}
\n{translations.description}
\n\n {rich_list_items.map(item =>\n \n )}\n
\n window.location.href=item.link}\n >\n
,\n )}\n \n )\n}\n\nTCUpCycleCarousel.propTypes = {\n products: PropTypes.array,\n}\n\nexport default TCUpCycleCarousel\n","import React from 'react'\n\nexport const renderStars = (rating) => {\n const totalStars = 5\n\n if (rating === null) return null\n\n return (\n <>\n {Array.from({ length: totalStars }, (_, i) => (\n ☆\n ))}\n \n )\n}\n\nexport const renderStarsPercentage = (itemRate) => {\n const totalStars = 5\n const starPercentageRounded = Math.round((itemRate / totalStars) * 100)\n\n return (\n \n
\n \n {item.name}\n
\n