feat: add pause example

Author: jason89521

dev/App.tsx

@@ -2,14 +2,22 @@ import React, { useState } from 'react';
 import './App.css';
 import Typist from '../src';
 import Header from './components/Header';
+import Section from './components/Section';
+import PauseExample from './components/PauseExample';
 
 function App() {
   const [count, setCount] = useState(0);
   const [key, setKey] = useState(1);
 
   return (
-    <div className='bg-slate-600 px-12 py-10 text-white '>
+    <div className='min-h-screen bg-slate-600 px-12 py-10 text-white'>
       <Header />
+      <Section title='Support Looping'>
+        <Typist loop>
+          The typing animation will be restarted automatically...
+        </Typist>
+      </Section>
+      <PauseExample />
       <button onClick={() => setKey(key + 1)}>key</button>
       <button onClick={() => setCount(count + 1)}>{count}</button>
       <br />

dev/components/PauseExample.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import Typist from '../../src';
+import Section from './Section';
+
+export default function PauseExample() {
+  const [isPause, setIsPause] = useState(false);
+
+  console.log(isPause);
+
+  return (
+    <Section title='Support Pausing'>
+      <div className='mb-2 flex'>
+        <label htmlFor='pause' className='mr-2'>
+          pause
+        </label>
+        <input
+          id='pause'
+          type='checkbox'
+          checked={isPause}
+          onChange={(e) => setIsPause(e.currentTarget.checked)}
+        />
+      </div>
+      <Typist loop pause={isPause}>
+        The typing animation will be paused if you check the input.
+      </Typist>
+    </Section>
+  );
+}

dev/components/Section.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+interface Props {
+  title: string;
+  children: ReactNode;
+}
+
+export default function Section({ title, children }: Props) {
+  return (
+    <section className='py-8 px-4'>
+      <h1 className='mb-4 text-2xl text-rose-400'>{title}</h1>
+      {children}
+    </section>
+  );
+}