|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- import {Refractor} from '@modal-sh/react-refractor';
- import {NextPage} from 'next';
- import * as React from 'react';
- import {getFormValues} from '@theoryofnekomata/formxtra';
-
- const BlogPostPage: NextPage = () => {
- const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
- e.preventDefault();
- const { currentTarget, nativeEvent } = e;
- const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
- const { action } = getFormValues(currentTarget, { submitter });
- switch (action) {
- case 'copyContents':
- console.log('copy contents');
- break;
- default:
- break;
- }
- }, []);
-
- return (
- <>
- <div className="container mx-auto px-4">
- <h1>
- Using Refractor on your Next website
- </h1>
- <p>
- Use <code>@modal-sh/react-refractor</code> as follows on your page:
- </p>
- </div>
- <div className="bg-shade/20 overflow-auto pt-4 pb-8 text-sm">
- <div className="container mx-auto px-4">
- <Refractor
- lineNumbers
- header
- language="tsx"
- scroll
- actions={
- <></>
- }
- code={`import {Refractor} from '@modal-sh/react-refractor';
- import {NextPage} from 'next';
-
- const BlogPostPage: NextPage = () => {
- return (
- <div className="container mx-auto px-4">
- <Refractor
- language="tsx"
- code={\`
- import {Refractor} from '@modal-sh/react-refractor';
- \`}
- />
- </div>
- );
- };
-
- export default BlogPostPage;
- `}
- />
- </div>
- </div>
- <div className="container mx-auto px-4">
- <p>
- Easy as that!
- </p>
- </div>
- </>
- )
- };
-
- export default BlogPostPage;
|