mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
33 lines
1.5 KiB
Plaintext
33 lines
1.5 KiB
Plaintext
---
|
|
// Hover gallery for the stills and the video recorder (`pnpm run record hover-gallery`):
|
|
// a product card whose photo changes as the cursor crosses it, driven by
|
|
// steps/hover-gallery.json. As a still it shows the first photo with its indicator lit.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import HoverGallery from '@ui/HoverGallery.astro'
|
|
import { staticPath } from '@shared/lib/assets'
|
|
|
|
const watch = ['Steel watch with a black dial, front view', 'Steel watch with a black dial, view from the front left', 'Steel watch, side view with the crown', 'Steel watch, back view with the case back and buckle', 'Close-up of the watch dial, bezel and crown'].map((alt, index) => ({
|
|
src: staticPath(`products/watch-${index + 1}.jpg`),
|
|
alt,
|
|
}))
|
|
---
|
|
|
|
<ScreenshotLayout title="Hover gallery" columns={1}>
|
|
<Card>
|
|
<HoverGallery images={watch} showIndicators class="card-img-top" />
|
|
<CardBody>
|
|
<CardTitle>Steel watch</CardTitle>
|
|
<CardSubtitle>Brushed steel case, black dial and a leather strap.</CardSubtitle>
|
|
<div class="d-flex align-items-center">
|
|
<div class="h2 m-0">$249</div>
|
|
<Button text="Add to cart" color="primary" icon="shopping-cart" class="ms-auto" />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</ScreenshotLayout>
|