| 3 | import { useT } from '@/i18n/useT' |
| 4 | |
| 5 | export function TypeScript () { |
| 6 | const { t } = useT() |
| 7 | return ( |
| 8 | <section className="mt-12 space-y-4"> |
| 9 | <Heading id="typescript">{t('docs.section.typescript.title')}</Heading> |
| 10 | <p>{t('docs.section.typescript.intro')}</p> |
| 11 | <CodeBlock code={`import type { |
| 12 | BaseType, |
| 13 | Set, |
| 14 | Preset, |
| 15 | ControllerSet, |
| 16 | HotKey, |
| 17 | Animate, |
| 18 | AnimateCoverOptions, |
| 19 | GestureSet, |
| 20 | GestureWheelZoomOptions, |
| 21 | } from 'react-zmage' |
| 22 | |
| 23 | const props: BaseType = { |
| 24 | src: 'hero.jpg', |
| 25 | set: [{ src: 'hero.jpg', alt: 'hero' }], |
| 26 | preset: 'desktop', |
| 27 | }`} language={'tsx' as any} /> |
| 28 | <p>{t('docs.section.typescript.refIntro')}</p> |
| 29 | <CodeBlock code={`const ref = useRef<HTMLImageElement>(null) |
| 30 | <Zmage src="..." ref={ref} />`} language={'tsx' as any} /> |
| 31 | </section> |
| 32 | ) |
| 33 | } |