fix: demo base

Reactible · Oct 3, 2024 · 99c7202 · 99c7202
1 parent 40b143e
commit 99c7202
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 21 deletions.
diff --git a/example/DemoComponent.tsx → example/Intro.tsx b/example/DemoComponent.tsx → example/Intro.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
 import PopupDemo from './pages/PopupDemo';
 
-const DemoComponent: React.FC = () => {
+const Intro: React.FC = () => {
   return (
     <Router>
-      <div>
+      <div className="App">
         <nav>
           <ul>
             <li>
@@ -23,4 +23,4 @@ const DemoComponent: React.FC = () => {
   );
 };
 
-export default DemoComponent;
+export default Intro;
diff --git a/example/index.html b/example/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Reactible Popups Demo</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/example/main.tsx"></script>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./reset.css" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Reactible Popups Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/example/main.tsx b/example/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import DemoComponent from './DemoComponent';
+import Intro from './Intro';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -9,6 +9,6 @@ if (!rootElement) {
 
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
-    <DemoComponent />
+    <Intro />
   </React.StrictMode>
 );
diff --git a/example/pages/PopupDemo.tsx b/example/pages/PopupDemo.tsx
@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
-import { Popup, useExitIntent } from '../../src';
+import { Popup } from '../../src';
 
 const PopupDemo: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  useExitIntent(() => setIsOpen(true), true);
-
   return (
     <div>
       <h1>Popup Demo</h1>
@@ -22,7 +20,6 @@ const PopupDemo: React.FC = () => {
       >
         <h2>Welcome to our site!</h2>
         <p>This is a demo of our new versatile Popup component.</p>
-        <img src="https://via.placeholder.com/300" alt="Demo" />
         <button onClick={() => setIsOpen(false)}>Close</button>
       </Popup>
       <p>Try to move your mouse out of the browser window to trigger the exit intent popup.</p>

diff --git a/example/reset.css b/example/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/example/style.css b/example/style.css
@@ -0,0 +1,4 @@
+.App {
+  display: flex;
+  gap: 40px;
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -28,6 +28,12 @@ export default defineConfig({
     },
   },
   server: {
-    open: '/example/index.html',
+    open: true,
+  },
+  root: './example',
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
   },
 });