more components and new components docs :)

Author: OmgRod

components/DefinitionList.js

@@ -0,0 +1,15 @@
+export default function DefinitionList({ items = [] }) {
+  return (
+    <dl className="my-6 space-y-3">
+      {items.map((item) => (
+        <div
+          key={item.term}
+          className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900"
+        >
+          <dt className="text-sm font-semibold text-slate-900 dark:text-slate-100">{item.term}</dt>
+          <dd className="mt-1 text-sm leading-6 text-slate-700 dark:text-slate-200">{item.definition}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

components/Figure.js

@@ -0,0 +1,13 @@
+export default function Figure({ src, alt = '', caption, width = '100%' }) {
+  return (
+    <figure className="my-6">
+      <img
+        src={src}
+        alt={alt}
+        style={{ width }}
+        className="rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
+      />
+      {caption ? <figcaption className="mt-2 text-sm text-slate-600 dark:text-slate-400">{caption}</figcaption> : null}
+    </figure>
+  );
+}

components/Infobox.js

@@ -0,0 +1,23 @@
+export default function Infobox({ title, image, imageAlt = '', imageCaption, items = [] }) {
+  return (
+    <aside className="my-6 rounded-xl border border-slate-200 bg-white p-4 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      {title ? <h3 className="mb-3 text-base font-semibold text-slate-900 dark:text-slate-100">{title}</h3> : null}
+
+      {image ? (
+        <figure className="mb-4 overflow-hidden rounded-lg border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60">
+          <img src={image} alt={imageAlt} className="h-auto w-full" />
+          {imageCaption ? <figcaption className="px-3 py-2 text-xs text-slate-600 dark:text-slate-400">{imageCaption}</figcaption> : null}
+        </figure>
+      ) : null}
+
+      <dl className="divide-y divide-slate-200 dark:divide-slate-800">
+        {items.map((item) => (
+          <div key={item.label} className="grid grid-cols-[8rem_1fr] gap-3 py-2">
+            <dt className="font-medium text-slate-700 dark:text-slate-300">{item.label}</dt>
+            <dd className="text-slate-900 dark:text-slate-100">{item.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </aside>
+  );
+}

components/WikiTable.js

@@ -0,0 +1,41 @@
+export function Table({ children, className = '' }) {
+  return (
+    <div className="my-6 overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950">
+      <table className={`min-w-full border-collapse text-left text-sm ${className}`.trim()}>{children}</table>
+    </div>
+  );
+}
+
+export function THead({ children, className = '' }) {
+  return <thead className={`bg-slate-100 dark:bg-slate-900/80 ${className}`.trim()}>{children}</thead>;
+}
+
+export function TBody({ children, className = '', striped = true }) {
+  const stripedClass = striped
+    ? '[&>tr:nth-child(even)]:bg-slate-50/80 dark:[&>tr:nth-child(even)]:bg-slate-900/40'
+    : '';
+
+  return <tbody className={`${stripedClass} ${className}`.trim()}>{children}</tbody>;
+}
+
+export function TR({ children, className = '' }) {
+  return <tr className={`border-b border-slate-200 last:border-0 dark:border-slate-800 ${className}`.trim()}>{children}</tr>;
+}
+
+export function TH({ children, className = '' }) {
+  return (
+    <th className={`px-4 py-2 align-top font-semibold text-slate-900 dark:text-slate-100 ${className}`.trim()}>
+      {children}
+    </th>
+  );
+}
+
+export function TD({ children, className = '' }) {
+  return <td className={`px-4 py-2 align-top text-slate-700 dark:text-slate-200 ${className}`.trim()}>{children}</td>;
+}
+
+export function Caption({ children, className = '' }) {
+  return <caption className={`px-4 py-3 text-left text-xs text-slate-600 dark:text-slate-400 ${className}`.trim()}>{children}</caption>;
+}
+
+export default Table;

components/mdx-components.js

@@ -6,12 +6,21 @@ import Callout from './Callout';
 import Card from './Card';
 import CardGrid from './CardGrid';
 import CodeBlock from './CodeBlock';
+import DarkModeToggle from './DarkModeToggle';
 import Divider from './Divider';
+import DefinitionList from './DefinitionList';
 import FeatureList from './FeatureList';
+import Figure from './Figure';
+import Footer from './Footer';
+import Header from './Header';
+import Infobox from './Infobox';
 import Icon from './Icon';
 import Kbd from './Kbd';
+import SearchBar from './SearchBar';
+import Sidebar from './Sidebar';
 import Steps from './Steps';
 import Tabs, { TabPanels } from './Tabs';
+import Table, { Caption, TBody, TD, TH, THead, TR } from './WikiTable';
 
 const mdxComponents = {
   Accordion,
@@ -21,15 +30,37 @@ const mdxComponents = {
   Callout,
   Card,
   CardGrid,
+  Caption,
   CodeBlock,
+  DarkModeToggle,
+  DefinitionList,
   Divider,
   FeatureList,
+  Figure,
+  Footer,
+  Header,
   Icon,
+  Infobox,
   Kbd,
+  SearchBar,
+  Sidebar,
   Steps,
+  Table,
+  TBody,
+  TD,
+  TH,
+  THead,
+  TR,
   Tabs,
   TabPanels,
+  caption: (props) => <Caption {...props} />,
   pre: (props) => <CodeBlock {...props} />,
+  table: (props) => <Table {...props} />,
+  tbody: (props) => <TBody {...props} />,
+  td: (props) => <TD {...props} />,
+  th: (props) => <TH {...props} />,
+  thead: (props) => <THead {...props} />,
+  tr: (props) => <TR {...props} />,
 };
 
 export default mdxComponents;

content/guides/components-and-icons.mdx

@@ -0,0 +1,81 @@
+---
+title: Accordion
+description: Collapsible content panels for FAQs and dense docs.
+template: default
+---
+
+# Accordion
+
+Renders collapsible sections from an `items` array.
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `items` | `Array<{ id: string, title: string, content: ReactNode }>` | Yes | Accordion rows to render. |
+
+## Live examples
+
+<Accordion
+  items={[
+    { id: 'what', title: 'What is MiniWiki?', content: 'A configurable MDX docs site.' },
+    { id: 'nest', title: 'Can I nest components?', content: 'Yes, MDX supports composition.' },
+  ]}
+/>
+
+<Accordion
+  items={[
+    {
+      id: 'install',
+      title: 'Install',
+      content: (
+        <>
+          Run <Kbd>npm</Kbd> <Kbd>run</Kbd> <Kbd>dev</Kbd>.
+          <Callout icon="tool">Use Node 20+ for consistency.</Callout>
+        </>
+      ),
+    },
+    {
+      id: 'publish',
+      title: 'Publish',
+      content: 'Push to main to trigger your GitHub Pages workflow.',
+    },
+  ]}
+/>
+
+## Code
+
+### Basic FAQ
+
+```mdx
+<Accordion
+  items={[
+    { id: 'what', title: 'What is MiniWiki?', content: 'A configurable MDX docs site.' },
+    { id: 'nest', title: 'Can I nest components?', content: 'Yes, MDX supports composition.' },
+  ]}
+/>
+```
+
+### Rich content in panels
+
+```mdx
+<Accordion
+  items={[
+    {
+      id: 'install',
+      title: 'Install',
+      content: (
+        <>
+          Run <Kbd>npm</Kbd> <Kbd>run</Kbd> <Kbd>dev</Kbd>.
+          <Callout icon="tool">Use Node 20+ for consistency.</Callout>
+        </>
+      ),
+    },
+    {
+      id: 'publish',
+      title: 'Publish',
+      content: 'Push to main to trigger your GitHub Pages workflow.',
+    },
+  ]}
+/>
+```

content/guides/components/accordion.mdx

@@ -0,0 +1,71 @@
+---
+title: Alert
+description: Highlight critical info with semantic variants.
+template: default
+---
+
+# Alert
+
+Displays a message block with optional title and variant type.
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `type` | `'info' \| 'warning' \| 'success' \| 'danger'` | No | Visual variant. |
+| `title` | `string` | No | Optional heading line. |
+| `children` | `ReactNode` | No | Alert body content. |
+
+## Examples
+
+### Live examples
+
+<Alert title="Heads up">
+  JSON edits are reflected immediately after page refresh.
+</Alert>
+
+<Alert type="warning" title="Check before deploy">
+  Confirm all sidebar links point to existing pages.
+</Alert>
+
+<Alert type="success" title="Published">
+  Your docs site deployed successfully.
+</Alert>
+
+<Alert type="danger" title="Build failed">
+  A referenced MDX route is missing. Fix links and redeploy.
+</Alert>
+
+### Code
+
+#### Info (default)
+
+```mdx
+<Alert title="Heads up">
+  JSON edits are reflected immediately after page refresh.
+</Alert>
+```
+
+#### Warning
+
+```mdx
+<Alert type="warning" title="Check before deploy">
+  Confirm all sidebar links point to existing pages.
+</Alert>
+```
+
+#### Success
+
+```mdx
+<Alert type="success" title="Published">
+  Your docs site deployed successfully.
+</Alert>
+```
+
+#### Danger
+
+```mdx
+<Alert type="danger" title="Build failed">
+  A referenced MDX route is missing. Fix links and redeploy.
+</Alert>
+```