Float

1import { Float } from "@/components/ui/float";
2
3<Float />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7
8const floatVariants = tv({
9  base: ["absolute z-10"],
10  variants: {
11    placement: {
12      "top-start": "-translate-1/2 inset-s-0 top-0",
13      "top-center": "-translate-1/2 top-0 left-1/2",
14      "top-end": "inset-e-0 top-0 translate-x-1/2 -translate-y-1/2",
15      "middle-start": "-translate-1/2 inset-s-0 top-1/2",
16      "middle-center": "-translate-1/2 top-1/2 left-1/2",
17      "middle-end": "inset-e-0 top-1/2 translate-x-1/2 -translate-y-1/2",
18      "bottom-start": "inset-s-0 bottom-0 -translate-x-1/2 translate-y-1/2",
19      "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2",
20      "bottom-end": "inset-e-0 bottom-0 translate-x-1/2 translate-y-1/2",
21    },
22  },
23  defaultVariants: {
24    placement: "top-end",
25  },
26});
27
28interface FloatProps