feat: new example routes

app/components/theme-switcher.tsx

@@ -64,9 +64,9 @@ export const ThemeSwitcher = () => {
  >
  <Popover.Panel className="border-panel absolute right-0 z-50 mt-2 w-64 origin-top-right rounded-md bg-white py-2 px-2 text-neutral-900 shadow-sm outline-none dark:bg-neutral-800 dark:text-white">
  <div className="flow-root">
- <span className="text-md flex items-center font-medium">
+ <b className="text-md flex items-center">
  Theme Appearance Settings
- </span>
+ </b>
  </div>
 
  <Divider

app/configs/navigation.ts

@@ -1,3 +1,33 @@
+/**
+ * Config Navigation Menu Content Links
+ *
+ * Used in the Navigation Menu with Radix UI
+ */
+
+export const configNavigationContentPages = [
+ { to: '/about', text: 'About' },
+ { to: '/blog', text: 'Blog' },
+ { to: '/subscribe', text: 'Subscribe' },
+];
+
+export const configNavigationContentExamples1 = [
+ { to: '/examples', text: 'Examples' },
+ { to: '/examples/button', text: 'Example: Button' },
+ { to: '/examples/form', text: 'Example: Form' },
+ { to: '/examples/navigation-menu', text: 'Example: Navigation Menu' },
+ { to: '/examples/alert', text: 'Example: Alert' },
+ { to: '/examples/toast', text: 'Example: Toast' },
+ { to: '/examples/notification', text: 'Example: Notification' },
+];
+
+export const configNavigationContentExamples2 = [
+ { to: '/examples/rest', text: 'Example: REST API' },
+ { to: '/examples/graphql', text: 'Example: GraphQL' },
+ { to: '/examples/catch', text: 'Example: Catch' },
+ { to: '/examples/error', text: 'Example: Error' },
+ { to: '/examples/debug', text: 'Example: Debug' },
+];
+
 /**
  * Config Navigation Links
  *
@@ -8,13 +38,9 @@
 
 export const configNavigationLinks = [
  { to: '/', text: 'Home' },
- { to: '/about', text: 'About' },
- { to: '/subscribe', text: 'Subscribe' },
- { to: '/debug', text: 'Debug' },
- { to: '/examples', text: 'Examples' },
- { to: '/examples/button', text: 'Example Button' },
- { to: '/examples/rest', text: 'Example REST' },
- { to: '/examples/graphql', text: 'Example GraphQL' },
+ ...configNavigationContentPages,
+ ...configNavigationContentExamples1,
+ ...configNavigationContentExamples2,
  // In large screen, the auth links are as buttons
 ];
 
@@ -33,27 +59,3 @@ export const configNavigationLinksMenu = [
  ],
  },
 ];
-
-/**
- * Config Navigation Menu Content Links
- *
- * Used in the Navigation Menu with Radix UI
- */
-
-export const configNavigationContentPages = [
- { to: '/about', text: 'About' },
- { to: '/blog', text: 'Blog' },
- { to: '/subscribe', text: 'Subscribe' },
-];
-
-export const configNavigationContentExamples1 = [
- { to: '/examples/button', text: 'Button' },
- { to: '/examples/form', text: 'Form' },
- { to: '/examples/navigation-menu', text: 'Navigation Menu' },
-];
-
-export const configNavigationContentExamples2 = [
- { to: '/examples/rest', text: 'REST API' },
- { to: '/examples/graphql', text: 'GraphQL' },
- { to: '/examples/debug', text: 'Debug' },
-];

app/contents/index.ts

@@ -3,5 +3,6 @@ export * from './example-buttons';
 export * from './example-footers';
 export * from './example-forms';
 export * from './example-toasts';
+export * from './example-notifications';
 export * from './intro';
 export * from './subscribe-form';

app/routes/examples/alert.tsx

@@ -0,0 +1,17 @@
+import { ExampleAlerts } from '~/contents';
+import { Layout } from '~/layouts';
+
+export default function ExampleButtonRoute() {
+ return (
+ <Layout>
+ <article className="prose-config">
+ <h1>Example: Alert</h1>
+ <p>Alert components with Vechai UI.</p>
+ </article>
+
+ <article className="demo">
+ <ExampleAlerts />
+ </article>
+ </Layout>
+ );
+}

app/routes/examples/button.tsx

@@ -1,15 +1,17 @@
-import { H1 } from '~/components';
 import { ExampleButtons } from '~/contents';
 import { Layout } from '~/layouts';
 
 export default function ExampleButtonRoute() {
  return (
  <Layout>
  <article className="prose-config">
- <H1>Button with Vechai UI</H1>
+ <h1>Example: Button</h1>
+ <p>Button components with Vechai UI.</p>
  </article>
 
- <ExampleButtons />
+ <article className="demo">
+ <ExampleButtons />
+ </article>
  </Layout>
  );
 }

app/routes/examples/form.tsx

@@ -1,15 +1,17 @@
-import { H1 } from '~/components';
 import { ExampleForms } from '~/contents';
 import { Layout } from '~/layouts';
 
 export default function ExampleFormRoute() {
  return (
  <Layout>
  <article className="prose-config">
- <H1>Form with Vechai UI</H1>
+ <h1>Example: Form</h1>
+ <p>Form components with Vechai UI.</p>
  </article>
 
- <ExampleForms />
+ <article className="demo">
+ <ExampleForms />
+ </article>
  </Layout>
  );
 }

app/routes/examples/navigation-menu.tsx

@@ -1,13 +1,25 @@
-import { H1, H2, NavigationBarNavMenu, P, Pre } from '~/components';
+import { NavigationBarNavMenu } from '~/components';
 import { Layout } from '~/layouts';
 
 export default function ExampleNavigationMenuRoute() {
  return (
  <Layout>
  <article className="prose-config">
- <H1>Navigation Menu with Radix UI</H1>
- <P>A collection of links for navigating websites.</P>
- <P>Features:</P>
+ <h1>Example: Navigation Menu</h1>
+ <p>
+ Complex navigation menu component with Radix UI. A collection of links
+ for navigating websites.
+ </p>
+ </article>
+
+ <article className="demo">
+ <nav className="navigation-bar">
+ <NavigationBarNavMenu />
+ </nav>
+ </article>
+
+ <article className="prose-config">
+ <p>Features</p>
  <ul>
  <li>Can be controlled or uncontrolled.</li>
  <li>Flexible layout structure with managed tab focus.</li>
@@ -16,15 +28,9 @@ export default function ExampleNavigationMenuRoute() {
  <li>Full keyboard navigation.</li>
  <li>Exposes CSS variables for advanced animation.</li>
  </ul>
- <H2>Installation</H2>
- <Pre>npm install @radix-ui/react-navigation-menu</Pre>
+ <h2>Installation</h2>
+ <pre>npm install @radix-ui/react-navigation-menu</pre>
  </article>
-
- <div className="mt-10">
- <nav className="navigation-bar">
- <NavigationBarNavMenu />
- </nav>
- </div>
  </Layout>
  );
 }

app/routes/examples/notification.tsx

@@ -0,0 +1,17 @@
+import { ExampleNotifications } from '~/contents';
+import { Layout } from '~/layouts';
+
+export default function ExampleButtonRoute() {
+ return (
+ <Layout>
+ <article className="prose-config">
+ <h1>Example: Notification</h1>
+ <p>Notification components with Vechai UI.</p>
+ </article>
+
+ <article className="demo">
+ <ExampleNotifications />
+ </article>
+ </Layout>
+ );
+}

app/routes/examples/toast.tsx

@@ -0,0 +1,17 @@
+import { ExampleToasts } from '~/contents';
+import { Layout } from '~/layouts';
+
+export default function ExampleButtonRoute() {
+ return (
+ <Layout>
+ <article className="prose-config">
+ <h1>Example: Toast</h1>
+ <p>Toast components with Vechai UI.</p>
+ </article>
+
+ <article className="demo">
+ <ExampleToasts />
+ </article>
+ </Layout>
+ );
+}

app/routes/index.tsx

@@ -2,10 +2,10 @@ import {
  ExampleAlerts,
  ExampleButtons,
  ExampleForms,
+ ExampleNotifications,
  ExampleToasts,
  HomeIntro,
 } from '~/contents';
-import { ExampleNotifications } from '~/contents/example-notifications';
 import { Layout } from '~/layouts';
 
 import type { SEOHandle } from '~/utils';

styles/global.css

@@ -164,6 +164,7 @@
  }
 
  .prose-config {
+ @apply mb-10;
  @apply prose dark:prose-invert md:prose-lg lg:prose-lg;
  @apply prose-a:prose-a-styles;
  @apply prose-ul:prose-ul-styles;
@@ -178,6 +179,10 @@
  @apply space-y-3 pl-5 marker:text-primary-500;
  }
 
+ .demo {
+ @apply my-20;
+ }
+
  .container-active a {
  @apply text-underline-left-right;
  }