92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";
|
|
|
|
const examples = [
|
|
{
|
|
name: "Lead",
|
|
description: "Intro paragraph with larger muted text.",
|
|
code: `<Lead>
|
|
Short opening summary for the post.
|
|
</Lead>`,
|
|
},
|
|
{
|
|
name: "Callout",
|
|
description: "Highlighted note, tip, or warning block.",
|
|
code: `<Callout title="Heads up" variant="note">
|
|
Important context for readers.
|
|
</Callout>
|
|
|
|
<Callout title="Tip" variant="tip">
|
|
A practical recommendation.
|
|
</Callout>
|
|
|
|
<Callout title="Careful" variant="warning">
|
|
A caveat or tradeoff.
|
|
</Callout>`,
|
|
},
|
|
{
|
|
name: "ButtonLink",
|
|
description: "Button-styled internal or external link.",
|
|
code: `<ButtonLink href="/projects">
|
|
View projects
|
|
</ButtonLink>
|
|
|
|
<ButtonLink href="https://example.com" variant="outline">
|
|
External resource
|
|
</ButtonLink>`,
|
|
},
|
|
{
|
|
name: "Figure",
|
|
description: "Image with optional caption.",
|
|
code: `<Figure
|
|
src="https://example.com/image.jpg"
|
|
alt="Describe the image"
|
|
caption="Optional caption"
|
|
/>`,
|
|
},
|
|
{
|
|
name: "PullQuote",
|
|
description: "Large emphasized quote or takeaway.",
|
|
code: `<PullQuote>
|
|
A highlighted quote or strong takeaway.
|
|
</PullQuote>`,
|
|
},
|
|
{
|
|
name: "TagList",
|
|
description: "Inline list of tag badges inside the post body.",
|
|
code: `<TagList tags={["nextjs", "mdx", "uploadthing"]} />`,
|
|
},
|
|
{
|
|
name: "Badge",
|
|
description: "Small inline label.",
|
|
code: `<Badge variant="outline">Next.js</Badge>`,
|
|
},
|
|
];
|
|
|
|
export default function MdxComponentReference() {
|
|
return (
|
|
<section className="rounded-lg border p-4">
|
|
<h2 className="text-base font-semibold">MDX Components</h2>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
Components available inside blog post content. Type <code className="rounded bg-muted px-1">[[</code> for internal links or <code className="rounded bg-muted px-1"><</code> for component snippets.
|
|
</p>
|
|
<Accordion type="single" collapsible className="mt-3">
|
|
{examples.map((example) => (
|
|
<AccordionItem key={example.name} value={example.name}>
|
|
<AccordionTrigger>
|
|
<span>
|
|
<span className="block">{example.name}</span>
|
|
<span className="text-muted-foreground block text-xs font-normal">{example.description}</span>
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<pre className="bg-muted overflow-x-auto rounded-md p-3 text-xs">
|
|
<code>{example.code}</code>
|
|
</pre>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</section>
|
|
);
|
|
}
|