Compare Section
Installation
Run the following command
npx vibes@latest add compare-sectionUsage
import { CompareSection } from '@/vibes/soul/sections/compare-section';function Usage() { return ( <CompareSection addToCartAction={addToCartAction} emptyStateSubtitle="Browse our catalog to find products." emptyStateTitle="No products to compare" products={products} /> );}export async function addToCartAction(id: string) { 'use server' await new Promise((resolve) => setTimeout(resolve, 1000)); console.log('Add to cart:', id);}const products = [ { id: '1', title: 'JADA SQUARE TOE BALLET FLAT', subtitle: '', badge: 'Bestseller', price: '$350', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTpkZTUwMzNmMy0zYzRlLTQzOTUtYTc3MC1jYWM0OWE1YWMyY2E=/jada-square-toe.webp', alt: 'JADA SQUARE TOE BALLET FLAT', }, href: '#', rating: 4.5, },];API Reference
CompareSectionProps
| Prop | Type | Default |
|---|---|---|
className | string | |
title | string | |
products* | ||
emptyStateTitle | Streamable<string> | |
emptyStateSubtitle | Streamable<string> | |
addToCartLabel | string | |
previousLabel | string | |
nextLabel | string | |
addToCartAction | (id: string) => Promise<void> | |
placeholderCount | number |
CompareProduct
| Prop | Type | Default |
|---|---|---|
id* | string | |
title* | string | |
href* | string | |
image | { src: string; alt: string } | |
price | string | PriceRange | PriceSale | |
subtitle | string | |
badge | string | |
rating | number | |
description | string | |
customFields | Array<{ name: string; value: string }> |
PriceRange
| Prop | Type | Default |
|---|---|---|
type* | 'range' | |
minValue* | string | |
maxValue* | string |
PriceSale
| Prop | Type | Default |
|---|---|---|
type* | 'sale' | |
previousValue* | string | |
currentValue* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --compare-section-title-font-family: var(--font-family-heading); --compare-section-title: var(--foreground); --compare-section-count: var(--contrast-300); --compare-section-empty-font-family: var(--font-family-body); --compare-section-empty-title-font-family: var(--font-family-heading); --compare-section-empty-title: var(--foreground); --compare-section-empty-subtitle: var(--contrast-500);}