import { Heading } from "@/components/jk/heading"

export const HeadingDemo = () => {
    return (
        <div className="space-y-4">
            <Heading level={1}>Heading Level 1</Heading>
            <Heading level={2}>Heading Level 2</Heading>
            <Heading level={3}>Heading Level 3</Heading>
        </div>
    )
}

import { Heading } from "@/components/jk/heading"

export const HeadingLevels = () => {
    return (
        <div className="space-y-4">
            <Heading level={1}>H1 - Page Title</Heading>
            <Heading level={2}>H2 - Section Title</Heading>
            <Heading level={3}>H3 - Subsection</Heading>
            <Heading level={4}>H4 - Card Title</Heading>
            <Heading level={5}>H5 - Small Heading</Heading>
        </div>
    )
}

import { Heading } from "@/components/jk/heading"

export const HeadingIntents = () => {
    return (
        <div className="space-y-4">
            <Heading level={3} intent="title">Title intent (default)</Heading>
            <Heading level={3} intent="body">Body intent</Heading>
            <Heading level={3} intent="muted">Muted intent</Heading>
            <Heading level={3} intent="primary">Primary intent</Heading>
            <Heading level={3} intent="secondary">Secondary intent</Heading>
            <Heading level={3} intent="danger">Danger intent</Heading>
            <Heading level={3} intent="warning">Warning intent</Heading>
        </div>
    )
}