import React from "react"
import { Badge, Link, Content } from "@onegeo/gatsby-theme-onegeo"

function badgeIndex() {
    return (
        <Content>
            <div className="prose">
                <Link to="/doc/core">Retour</Link>

                <h1>Badge</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`interface Props {
  children?: React.ReactNode;
  title?: string;
  className?: string;
}`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="flex gap-6 m-4">
                <h2>Badge with brand colors</h2>
                <Badge title="A Badge..." className="" />
                <Badge title="A Primary Badge..." className="badge-primary" />
                <Badge
                    title="A Secondary Badge..."
                    className="badge-secondary"
                />
                <Badge title="An Accent Badge..." className="badge-accent" />
                <Badge className="badge-ghost"> A Ghost Badge </Badge>
            </div>
            <div className="flex gap-6 m-4">
                <h2>Outline badge :</h2>
                <Badge title="A Badge..." className="badge-outline" />
                <Badge
                    title="A Primary Badge..."
                    className="badge-primary badge-outline"
                />
                <Badge
                    title="A Secondary Badge..."
                    className="badge-secondary badge-outline"
                />
                <Badge
                    title="An Accent Badge..."
                    className="badge-accent badge-outline"
                />
                <Badge className="badge-ghost badge-outline">
                    {" "}
                    A Ghost Badge{" "}
                </Badge>
            </div>
            <div className="flex gap-6 m-4">
                <h2>Badge sizes :</h2>
                <Badge title="987,654" className="badge-lg" />
                <Badge title="987,654" className="badge-md" />
                <Badge title="987,654" className="badge-sm" />
                <Badge className="badge-xs"> 987,654 </Badge>
            </div>
            <div className="prose">
                <h2>More example</h2>
                <a href="https://daisyui.com/components/badge/">Daisy UI</a>
            </div>
        </Content>
    )
}

export default badgeIndex