import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Tooltip } from "../../../components/ui/tooltip";
import Button from "../../../components/ui/button/Button";

export default function Tooltips() {
  return (
    <>
      <PageMeta
        title="React.js Tooltips Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Tooltips Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Tooltip Placements">
          <div className="flex flex-wrap items-center gap-6">
            <Tooltip text="Tooltip Top" placement="top">
              <Button>Tooltip Top</Button>
            </Tooltip>
            <Tooltip text="Tooltip Right" placement="right">
              <Button>Tooltip Right</Button>
            </Tooltip>
            <Tooltip text="Tooltip Bottom" placement="bottom">
              <Button>Tooltip Bottom</Button>
            </Tooltip>
            <Tooltip text="Tooltip Left" placement="left">
              <Button>Tooltip Left</Button>
            </Tooltip>
          </div>
        </ComponentCard>
      </div>
    </>
  );
}