Diff Component
The Diff component is a versatile React component designed to display a visual
difference or comparison between two items, either images or text. It
leverages the class-variance-authority library to handle variants and
provides an interactive visual comparison with a resizable divider.
Example Preview
Options
The following options are available for the Diff component:
| Option | Description | Default |
|---|---|---|
className | The class name for the component. | '' |
variant | The variant type, can be 'default', 'image', or 'text'. | 'text' |
src | URL for the first image in 'image' variant. | Default placeholder image URL |
src_bw | URL for the second (black and white) image in 'image' variant. | Default placeholder image URL |
alt | Alternative text for the images. | '' (empty string for default) |
text | Text content for the 'text' variants. | 'DAISY' |
Example Usage
The following example shows how to use the Diff component:
import React from "react";
import { Diff } from "@/@core";
export const MyVisualComparison = () => (
<Diff
variant="image"
src="https://example.com/image1.jpg"
src_bw="https://example.com/image2.jpg"
/>
);Customization Options
The following customization options are available for the Diff component:
| Option | Description | Default |
|---|---|---|
className | The class name for the component. | '' |
variant | The variant type, can be 'default', 'image', or 'text'. | 'text' |
src | URL for the first image in 'image' variant. | Default placeholder image URL |
src_bw | URL for the second (black and white) image in 'image' variant. | Default placeholder image URL |
alt | Alternative text for the images. | '' (empty string for default) |
text | Text content for the 'text' variants. | 'DAISY' |
Props Table
The following props table shows the available props for the Diff component:
| Name | Type | Default | Description |
|---|---|---|---|
className | string | '' | The class name for the component. |
variant | string | 'text' | The variant type, can be 'default', 'image', or 'text'. |
src | string | Default placeholder image URL | URL for the first image in 'image' variant. |
src_bw | string | Default placeholder image URL | URL for the second (black and white) image in 'image' variant. |
alt | string | '' | Alternative text for the images. |
text | string | 'DAISY' | Text content for the 'text' variants. |
Diff Variants
The following variants are available for the Diff component:
- Variant Types:
'default''image''text'
The Diff component relies on class-variance-authority (opens in a new tab) for handling variants. Adjust the default values and styling according to your design requirements.