badge.tsx

import React from "react";
import { Link } from "gatsby";
import { Badge } from "@onegeo/gatsby-theme-onegeo";
import { 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;