Float

import { Box, Circle, Float } from "styled-system/jsx";

export const FloatBasic = () => (
  <Box
    bgColor="page.surface.initial"
    h="80px"
    pos="relative"
    w="80px"
  >
    <Float>
      <Circle size="5" bg="danger.surface.initial" color="danger.text.initial">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Float } from "styled-system/jsx";

<Box position="relative">
  <Float>
    <div />
  </Float>
</Box>

import { Box, Circle, Float, HStack, VStack } from "styled-system/jsx";
import { For } from "@cerberus/react";

export const FloatWithPlacements = () => (
  <HStack gap="xl" wrap="wrap">
    <For each={placements}>
      {(placement) => (
        <VStack key={placement} gap="3">
          <p>{placement}</p>
          <Box
            bgColor="page.surface.100"
            position="relative"
            height="80px"
            width="80px"
          >
            <Float placement={placement}>
              <Circle size="5" bg="red" color="white">
                3
              </Circle>
            </Float>
          </Box>
        </VStack>
      )}
    </For>
  </HStack>
)

const placements = [
  "bottom-end",
  "bottom-start",
  "top-end",
  "top-start",
  "bottom-center",
  "top-center",
  "middle-center",
  "middle-end",
  "middle-start",
] as const

import { Box, Circle, Float } from "styled-system/jsx";

export const FloatWithOffsetX = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <Float offsetX="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Circle, Float } from "styled-system/jsx";

export const FloatWithOffsetY = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <Float offsetY="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Circle, Float } from "styled-system/jsx";

export const FloatWithOffset = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <Float offset="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Float } from "styled-system/jsx";
import { Avatar } from "@cerberus/react";

export const FloatWithAvatar = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <Float>
      <Avatar
        src="https://avatars.githubusercontent.com/u/12345678?v=4"
      />
    </Float>
  </Box>
)