cambio-image-motion-preset-demo

1"use client"
2 
3import { useState } from "react"
4 
5import { CambioImage } from "@/components/ui/cambio-image"
6import {
7  ToggleGroup,
8  ToggleGroupItem,
9} from "@/components/ui/toggle-group"
10 
11type MotionPreset = "snappy" | "smooth" | "bouncy" | "reduced"
12 
13export default function CambioImageMotionPresetDemo() {
14  const [motionPreset, setMotionPreset] = useState<MotionPreset>("snappy")
15 
16  return (
17    <div className="flex flex-col items-center gap-8">
18      <ToggleGroup
19        type="single"
20        value={motionPreset}
21        onValueChange={(value) => {
22          if (value) setMotionPreset(value as MotionPreset)
23        }}
24        variant="outline"
25      >
26        <ToggleGroupItem value="snappy">Snappy</ToggleGroupItem>
27        <ToggleGroupItem value="smooth">Smooth</ToggleGroupItem>
28        <ToggleGroupItem value="bouncy">Bouncy</ToggleGroupItem>
29        <ToggleGroupItem value="reduced">Reduced</ToggleGroupItem>
30      </ToggleGroup>
31 
32      <div className="w-[300px]">
33        <CambioImage
34          src="/images/stock/monet.JPG"
35          alt="Colorful impressionist landscape painting with trees and figures"
36          width={1200}
37          height={1200}
38          motion={motionPreset}
39          dismissOnImageClick
40        />
41      </div>
42    </div>
43  )
44}