export const title = "Code snippet components"
export const description = "Powerful and customizable React code snippet components built for modern applications and websites. These code snippets are built using Shiki and styled with Tailwind CSS."
export const links = {
    shiki: "https://shiki.matsu.io/",
}

import * as Demos from "@/components/application/code-snippet/code-snippet.story.tsx";

<PreviewAndCode title="Code snippet example" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-2xl flex gap-3 flex-col p-4 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CodeSnippetHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="code-snippet/CodeSnippetHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this code snippet component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add code-snippet
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our code snippet component is built with [Shiki](https://shiki.matsu.io/), you'll need to install the dependencies:
                ```bash
                npm install shiki @shikijs/transformers
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/code-snippet" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the code snippet components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Code snippet examples

Below are examples and variations of this code snippet component:

### With line number {{ tocOnly:true }}

<PreviewAndCode title="With line number" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-2xl flex gap-3 flex-col p-4 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CodeSnippetHorizontalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="code-snippet/CodeSnippetHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

### Without line number {{ tocOnly:true }}

<PreviewAndCode title="Without line number" isPublic={false}>
    <ResizablePreview id="preview" className=" rounded-2xl flex gap-3 flex-col p-4 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CodeSnippetVerticalDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="code-snippet/CodeSnippetVerticalDemo" />
    </TabPanel>
</PreviewAndCode>

### Show more {{ tocOnly:true }}

<PreviewAndCode title="Show more" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-2xl flex gap-3 flex-col p-4 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CodeSnippetShowMore />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="code-snippet/CodeSnippetShowMore" />
    </TabPanel>
</PreviewAndCode>

### With tabs {{ tocOnly:true }}

<PreviewAndCode title="With tabs" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-2xl flex gap-3 flex-col p-4 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CodeSnippetWithTabs />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-[320px]">
        <ComponentCode component="code-snippet/CodeSnippetWithTabs" />
    </TabPanel>
</PreviewAndCode>