{/*
=========================================================================#
This page generated by /scripts/gen-pages.mjs, Don't update it manually#
=========================================================================
*/}
import { Cards } from 'nextra/components'
import Link from 'next/link'
import posthog from "posthog-js";
export const captureExampleClick = (name, kind) => {
if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
posthog.capture('example-clicked', { name, kind });
}
};
Basic Layouts#
<Link href="/Examples/basic-layouts/stack" onClick={() => captureExampleClick('stack', 'basic-layouts')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Stack
</div>
</div>
</Link>
<Link href="/Examples/basic-layouts/parallax" onClick={() => captureExampleClick('parallax', 'basic-layouts')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Parallax
</div>
</div>
</Link>
<Link href="/Examples/basic-layouts/normal" onClick={() => captureExampleClick('normal', 'basic-layouts')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Normal
</div>
</div>
</Link>
<Link href="/Examples/basic-layouts/left-align" onClick={() => captureExampleClick('left-align', 'basic-layouts')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Left Align
</div>
</div>
</Link>
Utils#
<Link href="/Examples/utils/pagination" onClick={() => captureExampleClick('pagination', 'utils')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Pagination
</div>
</div>
</Link>
Custom Animations#
<Link href="/Examples/custom-animations/tinder" onClick={() => captureExampleClick('tinder', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Tinder
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/scale-fade-in-out" onClick={() => captureExampleClick('scale-fade-in-out', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Scale Fade In Out
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/rotate-in-out" onClick={() => captureExampleClick('rotate-in-out', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Rotate In Out
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/rotate-fade-in-out" onClick={() => captureExampleClick('rotate-fade-in-out', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Rotate Fade In Out
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/quick-swipe" onClick={() => captureExampleClick('quick-swipe', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Quick Swipe
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/press-swipe" onClick={() => captureExampleClick('press-swipe', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Press Swipe
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/multiple" onClick={() => captureExampleClick('multiple', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Multiple
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/fold" onClick={() => captureExampleClick('fold', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Fold
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/flow" onClick={() => captureExampleClick('flow', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Flow
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/curve" onClick={() => captureExampleClick('curve', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Curve
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/cube-3d" onClick={() => captureExampleClick('cube-3d', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Cube 3d
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/circular" onClick={() => captureExampleClick('circular', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Circular
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/blur-rotate" onClick={() => captureExampleClick('blur-rotate', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Blur Rotate
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/blur-parallax" onClick={() => captureExampleClick('blur-parallax', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Blur Parallax
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/anim-tab-bar" onClick={() => captureExampleClick('anim-tab-bar', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Anim Tab Bar
</div>
</div>
</Link>
<Link href="/Examples/custom-animations/advanced-parallax" onClick={() => captureExampleClick('advanced-parallax', 'custom-animations')}>
<div className='summary-item'>
<div className='image-container'></div>
<div className='label-container'>
Advanced Parallax
</div>
</div>
</Link>