Reviews Sections

JetShip offers a dynamic Review Section that enables you to display customer reviews along with the platform where they were posted. The section fetches data from two tables: one for the reviews and the other for the platform details (such as the platform name and logo). By combining these two data sources, the section provides a complete view of customer feedback, linking each review with its corresponding platform.

This design is highly customizable, allowing you to adjust the layout, styling, and structure of the review cards to suit your project’s needs.

---

1. Reviews Section

⚙️ Props

• data (required): An array of review objects fetched from the reviews table in the database, following the ReviewType schema.
• platformData (required): An array of platform objects fetched from the review_platforms table, which stores platform details such as name and logo.
• columnCount (optional): The number of columns to display for the review cards (default is 4).
• columnWidth (optional): The width of each column, useful for grid layouts (default is 300px).
• gap (optional): The gap between review cards when displayed in a grid layout (default is 24px).
• className (optional): Tailwind CSS classes to style the section’s main container.
• transitionDelay (optional): The delay for transitions, controlling when reviews and platform logos are revealed.
• transitionDuration (optional): The duration for the transitions, creating smooth visual effects for the review cards.

👀 Preview and Code

Preview

Code

import { createClient } from '@repo/supabase/server'
import Reviews from '@repo/ui/blocks/reviews/Reviews'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import SectionHeader from '@repo/ui/blocks/others/SectionHeader'

const Component = async () => {
  const supabase = await createClient()

  const { data: reviewsData, error: reviewsError } = await supabase
    .from('reviews')
    .select('*')
    .eq('is_featured', true)
    .order('id', { ascending: true })

  if (reviewsError) {
    console.error('Error fetching reviews: ', reviewsError.message)

    return
  }

  const { data: platformData, error: platformError } = await supabase
    .from('review_platforms')
    .select('id, logo_url, platform_name')
    .order('id', { ascending: true })

  if (platformError) {
    console.error('Error fetching review platforms: ', platformError.message)

    return
  }

  return (
    <SectionWrapper className='...'>
      <SectionHeader title={'...'} subtitle={'...'} />
      <Reviews data={reviewsData} platformData={platformData} />
    </SectionWrapper>
  )
}

export default Component

This Review Section allows you to dynamically display reviews and platform information, fetching data from your database. It offers flexibility in layout, styling, and presentation, making it easy to integrate into your project.