import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Ribbon } from "../../../components/ui/ribbon";

export default function Ribbons() {
  return (
    <>
      <PageMeta
        title="React.js Ribbons Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Ribbons Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-2">
        <ComponentCard title="Rounded Ribbon">
          <Ribbon text="Popular" variant="rounded" color="primary">
            <div className="rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
              <div className="p-5 pt-16">
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit
                  arcu rutrum amet vel nec fringilla vulputate. Sed aliquam
                  fringilla vulputate imperdiet arcu natoque purus ac nec
                  ultricies nulla ultrices.
                </p>
              </div>
            </div>
          </Ribbon>
        </ComponentCard>

        <ComponentCard title="Filled Ribbon">
          <Ribbon text="New" variant="filled" color="primary">
            <div className="rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
              <div className="p-5 pt-16">
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit
                  arcu rutrum amet vel nec fringilla vulputate. Sed aliquam
                  fringilla vulputate imperdiet arcu natoque purus ac nec
                  ultricies nulla ultrices.
                </p>
              </div>
            </div>
          </Ribbon>
        </ComponentCard>

        <ComponentCard title="Ribbon with Different Colors">
          <div className="space-y-4">
            <Ribbon text="Success" variant="rounded" color="success">
              <div className="rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
                <div className="p-5 pt-16">
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Success ribbon example.
                  </p>
                </div>
              </div>
            </Ribbon>
            <Ribbon text="Warning" variant="rounded" color="warning">
              <div className="rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
                <div className="p-5 pt-16">
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Warning ribbon example.
                  </p>
                </div>
              </div>
            </Ribbon>
          </div>
        </ComponentCard>
      </div>
    </>
  );
}

