IconButtonFloating

import { useRef, useState } from 'react';
import { Box, Dropdown, Flex, IconButtonFloating, Image, Text } from 'gestalt';

const cards = [
  {
    title: 'Newsroom',
    description: "Today's Top Holiday Picks",
    src: 'https://i.ibb.co/FY2MKr5/stock6.jpg',
  },
  {
    title: 'Pinterest Trends',
    description: 'Checkout our 2023 predictions',
    src: 'https://i.ibb.co/sQzHcFY/stock9.jpg',
  },
];

export default function Example() {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);

  return (
    <Box margin={2}>
      <Flex
        alignItems="center"
        flex="grow"
        gap={4}
        justifyContent="center"
        width="100%"
        wrap
      >
        {cards.map((card) => (
          <Flex.Item key={card.title} flex="grow">
            <Box
              borderStyle="sm"
              color="default"
              minWidth={320}
              padding={4}
              rounding={4}
              width="100%"
            >
              <Flex
                alignContent="center"
                direction="column"
                gap={3}
                justifyContent="between"
              >
                <Text align="start" size="500">
                  {card.title}
                </Text>
                <Box height={170} width="100%">
                  <Image
                    alt=""
                    color="#000"
                    fit="cover"
                    naturalHeight={1}
                    naturalWidth={1}
                    role="presentation"
                    src={card.src}
                  />
                </Box>
                <Text align="start" size="300">
                  {card.description}
                </Text>
              </Flex>
            </Box>
          </Flex.Item>
        ))}
      </Flex>

      <Box
        ref={anchorRef}
        bottom
        margin={4}
        position="fixed"
        right
        role="contentinfo"
      >
        <IconButtonFloating
          accessibilityControls="sections-dropdown-example"
          accessibilityExpanded={open}
          accessibilityLabel="Help & Resources Menu"
          accessibilityPopupRole="menu"
          icon="question-mark"
          onClick={() => setOpen((prevVal) => !prevVal)}
          selected={open}
          tooltip={{
            text: 'Help & Resources Menu',
          }}
        />
      </Box>
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="sections-dropdown-example"
          idealDirection="up"
          onDismiss={() => setOpen(false)}
        >
          <Dropdown.Link
            href="#"
            iconEnd="visit"
            onClick={() => {
              /* log click here */
            }}
            option={{ value: 'Get help', label: 'Visit the Help Center' }}
          />
          <Dropdown.Link
            href="#"
            iconEnd="visit"
            onClick={() => {
              /* log click here */
            }}
            option={{ value: 'Get help', label: 'Create widget' }}
          />
        </Dropdown>
      )}
    </Box>
  );
}

import { useRef, useState } from 'react';
import { Box, Dropdown, Flex, IconButtonFloating, Image, Mask } from 'gestalt';

const pins = [
  {
    color: '#2b3938',
    height: 316,
    src: 'https://i.ibb.co/sQzHcFY/stock9.jpg',
    width: 474,
    name: 'the Hang Son Doong cave in Vietnam',
  },
  {
    color: '#8e7439',
    height: 1081,
    src: 'https://i.ibb.co/zNDxPtn/stock10.jpg',
    width: 474,
    name: 'La Gran Muralla, Pekín, China',
  },
  {
    color: '#698157',
    height: 711,
    src: 'https://i.ibb.co/M5TdMNq/stock11.jpg',
    width: 474,
    name: 'Plitvice Lakes National Park, Croatia',
  },
  {
    color: '#4e5d50',
    height: 632,
    src: 'https://i.ibb.co/r0NZKrk/stock12.jpg',
    width: 474,
    name: 'Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.',
  },
  {
    color: '#6d6368',
    height: 710,
    src: 'https://i.ibb.co/zmFd0Dv/stock13.jpg',
    width: 474,
    name: 'Border of China and Vietnam',
  },
  {
    color: '#2b3938',
    height: 316,
    src: 'https://i.ibb.co/sQzHcFY/stock9.jpg',
    width: 474,
    name: 'the Hang Son Doong cave in Vietnam',
  },
];

export default function Example() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState([]);
  const anchorRef = useRef(null);

  const onSelect = ({ item }) => {
    if (selected.some(({ value }) => value === item.value)) {
      setSelected((selectedValue) =>
        selectedValue.filter(({ value }) => value !== item.value)
      );
    } else {
      setSelected((selectedValue) => [...selectedValue, item]);
    }
  };

  return (
    <Box margin={3}>
      <Box role="main">
        <Flex
          alignItems="center"
          gap={5}
          height="100%"
          justifyContent="center"
          width="100%"
          wrap
        >
          {[...new Array(3)].map(() =>
            pins.map((pin) => (
              <Mask key={pin.name} height={170} rounding={2} width={100}>
                <Image
                  alt={pin.name}
                  color="white"
                  fit="cover"
                  naturalHeight={1}
                  naturalWidth={1}
                  role="presentation"
                  src={pin.src}
                />
              </Mask>
            ))
          )}
        </Flex>
      </Box>
      <Box
        ref={anchorRef}
        bottom
        dangerouslySetInlineStyle={{
          __style: { left: '50%', transform: 'translate(-50%)' },
        }}
        marginBottom={2}
        position="fixed"
        role="contentinfo"
      >
        <IconButtonFloating
          accessibilityControls="sections-dropdown-example"
          accessibilityExpanded={open}
          accessibilityLabel="Create Pin Menu"
          accessibilityPopupRole="menu"
          icon="add"
          onClick={() => setOpen((prevVal) => !prevVal)}
          selected={open}
          tooltip={{ text: 'Create Pin Menu' }}
        />
      </Box>
      {open && (
        <Dropdown
          anchor={anchorRef.current}
          id="sections-dropdown-example"
          idealDirection="up"
          onDismiss={() => setOpen(false)}
        >
          <Dropdown.Section label="Create">
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Pin', label: 'Pin' }}
              selected={selected}
            />
            <Dropdown.Item
              onSelect={onSelect}
              option={{ value: 'Story Pin', label: 'Story Pin' }}
              selected={selected}
            />
          </Dropdown.Section>
          <Dropdown.Section label="Add">
            <Dropdown.Item
              badge={{ text: 'New' }}
              onSelect={onSelect}
              option={{ value: 'Note', label: 'Note' }}
              selected={selected}
            />
          </Dropdown.Section>
        </Dropdown>
      )}
    </Box>
  );
}