Reviews

Installation

Run the following command

npx vibes@latest add reviews

Usage

import { Reviews } from '@/vibes/soul/sections/reviews';function Usage() {  return (      <Reviews averageRating={4.5} reviews={reviews} totalCount={reviews.length} />  );}export const reviews = [  {      id: '1',      review:      "Warm and comfortable! I usually train in temperatures between 5-15ºC and this jersey it's perfect combined with a thermal base layer tee and a vest",      rating: 5,      name: 'Victor',      date: 'August 13, 2024',  },];

API Reference

ReviewsProps

PropTypeDefault
reviews*
Streamable<Review[]>
averageRating*
Streamable<number>
totalCount
Streamable<number>
paginationInfo
Streamable<CursorPaginationInfo>
nextLabel
Streamable<string>
previousLabel
Streamable<string>
emptyStateMessage
string
reviewsLabel
string
'Reviews'

Review

PropTypeDefault
id*
string
rating*
number
review*
string
name*
string
date*
string

CursorPaginationInfo

PropTypeDefault
startCursorParamName
string
startCursor*
string | null
endCursorParamName
string
endCursor*
string | null

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --reviews-font-family: var(--font-family-body);  --reviews-title-font-family: var(--font-family-heading);  --reviews-border: var(--contrast-100);  --reviews-count: var(--contrast-300);  --reviews-average: var(--foreground);  --reviews-name: var(--foreground);  --reviews-review: var(--contrast-500);  --reviews-date: var(--contrast-500);  --reviews-empty-message: var(--foreground);}