Tutorial Intro Content
Section d'introduction pour les pages de tutoriel avec apercu et prerequis. Installez Tutorial Intro Content depuis le registre VLLNT UI avec la CLI shadcn.
Section d'introduction pour les pages de tutoriel avec apercu et prerequis. Fait partie de la famille learning dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Tutorial Intro Content a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tutorial-intro-content.jsonSource
import ReactMarkdown from "react-markdown";
import { cn } from "../../lib/utils";
export type TutorialIntroContentProps = {
className?: string;
content: string;
title: string;
};
// Server-side markdown components (no 'use client')
const serverMarkdownComponents = {
a: ({
children,
href,
...props
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
children?: React.ReactNode;
}) => (
<a
className="text-primary underline underline-offset-4 hover:text-primary/80 font-medium"
href={href}
{...props}
>
{children}
</a>
),
blockquote: ({
children,
...props
}: React.BlockquoteHTMLAttributes<HTMLQuoteElement> & {
children?: React.ReactNode;
}) => (
<blockquote
className="border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm"
{...props}
>
{children}
</blockquote>
),
code: ({
children,
className: codeClassName,
...props
}: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) => {
const isBlock = codeClassName?.includes("language-");
if (isBlock) {
return (
<code className={cn("font-mono text-sm", codeClassName)} {...props}>
{children}
</code>
);
}
return (
<code
className="bg-muted px-1.5 py-0.5 rounded text-sm font-mono"
{...props}
>
{children}
</code>
);
},
h1: ({
children,
...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
children?: React.ReactNode;
}) => (
<h1 className="text-2xl font-semibold mt-8 mb-4" {...props}>
{children}
</h1>
),
h2: ({
children,
...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
children?: React.ReactNode;
}) => (
<h2 className="text-xl font-semibold mt-6 mb-3" {...props}>
{children}
</h2>
),
h3: ({
children,
...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
children?: React.ReactNode;
}) => (
<h3 className="text-lg font-semibold mt-4 mb-2" {...props}>
{children}
</h3>
),
hr: (props: React.HTMLAttributes<HTMLHRElement>) => (
<hr className="my-8 border-border" {...props} />
),
li: ({
children,
...props
}: React.LiHTMLAttributes<HTMLLIElement> & {
children?: React.ReactNode;
}) => (
<li
className="mb-2 leading-relaxed text-muted-foreground text-sm pl-2"
{...props}
>
{children}
</li>
),
ol: ({
children,
...props
}: React.OlHTMLAttributes<HTMLOListElement> & {
children?: React.ReactNode;
}) => (
<ol
className="list-decimal list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm"
{...props}
>
{children}
</ol>
),
p: ({
children,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
children?: React.ReactNode;
}) => (
<p
className="mb-4 leading-relaxed text-muted-foreground text-sm"
{...props}
>
{children}
</p>
),
pre: ({
children,
...props
}: React.HTMLAttributes<HTMLPreElement> & { children?: React.ReactNode }) => (
<pre
className="bg-zinc-950 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 border border-zinc-800 shadow-lg font-mono text-sm"
{...props}
>
{children}
</pre>
),
strong: ({
children,
...props
}: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) => (
<strong className="font-semibold text-foreground" {...props}>
{children}
</strong>
),
ul: ({
children,
...props
}: React.HTMLAttributes<HTMLUListElement> & {
children?: React.ReactNode;
}) => (
<ul
className="list-disc list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm"
{...props}
>
{children}
</ul>
),
};
// Strip MDX component tags for server rendering (they render on client)
function stripMDXComponents(content: string): string {
let cleaned = content.replaceAll(/<[A-Z][A-Za-z]*[^>]*\/>/g, "");
cleaned = cleaned.replaceAll(
/<[A-Z][A-Za-z]*[^>]*>[\S\s]*?<\/[A-Z][A-Za-z]*>/g,
"",
);
return cleaned;
}
export function TutorialIntroContent({
className,
content,
title,
}: TutorialIntroContentProps): React.ReactNode {
const markdownContent = stripMDXComponents(content);
return (
<section className={cn("py-6", className)}>
<h2 className="text-2xl md:text-3xl font-semibold mb-6">{title}</h2>
<div className="max-w-none [&_h2:first-of-type]:hidden">
<ReactMarkdown components={serverMarkdownComponents}>
{markdownContent}
</ReactMarkdown>
</div>
</section>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.