CustomColor
export default function CustomColorExample() {
const [image, setImage] = useState('/models/m-white.png')
return (
<CustomColor
width="750px"
height="450px"
src={image}
/>
<button onClick={() => setImage("/models/m-white.png")}>
Model 1
</button>
<button onClick={() => setImage("/models/m-orange.png")}>
Model 2
</button>
<button onClick={() => setImage("/models/m-blue.png")}>
Model 2
</button>
);
}
export default function ShowCase() {
// at least 10 images are recommended to have a good exp
const showCaseImages = [
'/images/1.png',
'/images/2.png',
'/images/3.png',
'...'
]
return (
<ShowCase images={showCaseImages} />
)
}
Switch
export default function SwitchExample() {
const [image, setImage] = useState('/models/black-1.png')
return (
<Switch src={image} css={{ width: '500px', height: '300px'}}/>
<button onClick={()=>setImage('/models/black-1.png')}>
Model 1
</button>
<button onClick={()=>setImage('/models/white-1.png')}>
Model 2
</button>
)
}
SwitchGallery
export default function SwitchGalleryExample() {
const showCaseImages = [
'/images/1.png',
'/images/2.png',
'/images/3.png',
'...'
]
return <SwitchGallery
images={showCaseImages}
cssImage={{
backgroundSize: cover,
}}
/>
}
Hotspot
export default function HotspotExample() {
const TailwindElement = () => <div className="...tailwind css" >
<div>Custom HTML</div>
</div>
const SimpleLink = () => <a href="#" >Simple link</a>
const spots = [
{
x: '35%',
y: '70%',
children: CustomMessage1()
},
{
x: '65%',
y: '20%',
children: CustomMessage2()
}
]
return (
<ProductHotspot src="1.webp" spots={spots} height="auto" />
)
}
Mask
export default function MaskExample() {
return (
<ProductMask type='2' src="/autos/mask/1.webp" />
)
}
ProductCover
60%
60%
export default function ProductCoverExample() {
return (
<ProductCover
src="/models/1.png"
cover="/models/2.png"
width="550px"
height="400px"
coverWidth={60}
coverHeight={60} />
)
}