"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", figcaption: "figcaption", figure: "figure", h2: "h2", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }, {Button, ComponentPreview, DocsFileTabs} = _components; if (!Button) _missingMdxReference("Button", true); if (!ComponentPreview) _missingMdxReference("ComponentPreview", true); if (!DocsFileTabs) _missingMdxReference("DocsFileTabs", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "component-preview", children: "Component preview" }), "\n", _jsxs(_components.p, { children: ["Learn pages can show a ", _jsx(_components.strong, { children: "live preview" }), " above the source, similar to shadcn and Aceternity docs."] }), "\n", _jsxs(ComponentPreview, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { children: "Login" }), _jsx(Button, { variant: "outline", children: "Login with Google" })] }), _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "dracula", children: "login-buttons.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "dracula", __rawstring__: "import { Button } from '@/components/ui/button';\n\nexport function LoginButtons() {\n return (\n

\n \n \n

\n );\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { Button } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "@/components/ui/button" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " LoginButtons" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "div" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " className" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "flex flex-wrap items-center gap-3" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "Button" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">Login" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "Button" }), _jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: " variant" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "=" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "outline" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">Login with Google" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) })] }) })] })] }), "\n", _jsx(_components.h2, { id: "multi-file-tabs", children: "Multi-file tabs" }), "\n", _jsxs(DocsFileTabs, { title: "Card component files", children: [_jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "tsx", "data-theme": "dracula", children: "components/ui/card.tsx" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "tsx", "data-theme": "dracula", __rawstring__: "import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\n\nexport function TopicCard({ title, body }: { title: string; body: string }) {\n return (\n \n \n {title}\n \n {body}\n \n );\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "tsx", "data-theme": "dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "import" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { Card, CardContent, CardHeader, CardTitle } " }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "from" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: " '" }), _jsx(_components.span, { style: { color: "#F1FA8C" }, children: "@/components/ui/card" }), _jsx(_components.span, { style: { color: "#E9F284" }, children: "'" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: "export" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: " function" }), _jsx(_components.span, { style: { color: "#50FA7B" }, children: " TopicCard" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "title" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFB86C", fontStyle: "italic" }, children: "body" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " { title" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " string" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "; body" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: " string" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " }) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF79C6" }, children: " return" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "Card" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "CardHeader" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "CardTitle" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">{title}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " <" }), _jsx(_components.span, { style: { color: "#8BE9FD", fontStyle: "italic" }, children: "CardContent" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ">{body}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F8F8F2" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) })] }) })] }), _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "css", "data-theme": "dracula", children: "styles/card.css" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "dracula", __rawstring__: ".topic-card {\n border-radius: 0.75rem;\n border: 1px solid var(--border);\n}\n", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "css", "data-theme": "dracula", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#50FA7B", fontStyle: "italic" }, children: ".topic-card" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#8BE9FD" }, children: " border-radius" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " 0.75" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "rem" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#8BE9FD" }, children: " border" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: ":" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " 1" }), _jsx(_components.span, { style: { color: "#FF79C6" }, children: "px" }), _jsx(_components.span, { style: { color: "#BD93F9" }, children: " solid" }), _jsx(_components.span, { style: { color: "#8BE9FD" }, children: " var" }), _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "(--border);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F8F8F2" }, children: "}" }) })] }) })] })] }), "\n", _jsxs(_components.p, { children: ["Backend chapters can skip previews and rely on expandable ", _jsx(_components.code, { children: "DocsCodeBlock" }), " fences only."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }