Popover

import { Button, Content, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";
 
export default function Example() {
    return (
        <PopoverTrigger>
            <Button isDisabled>Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
            </Popover>
        </PopoverTrigger>
    );
}
 
 

import { Button, Content, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";
 
export default function Example() {
    return (
        <PopoverTrigger>
            <Button variant="secondary">Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <Button>Apply</Button>
            </Popover>
        </PopoverTrigger>
    );
}
 
 

import { Button, ButtonGroup, Content, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";
 
export default function Example() {
    return (
        <PopoverTrigger>
            <Button>Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <ButtonGroup>
                    <Button variant="secondary">Follow</Button>
                    <Button>Apply</Button>
                </ButtonGroup>
            </Popover>
        </PopoverTrigger>
    );
}
 

import { Button, Content, Footer, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";
 
export default function Example() {
    return (
        <PopoverTrigger>
            <Button variant="secondary">Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <Footer>
                    1 of 5
                </Footer>
                <Button>Next</Button>
            </Popover>
        </PopoverTrigger>
    );
}
 

import { Button, PopoverTrigger, Popover, Heading, Content, Inline } from "@hopper-ui/components";
 
export default function Example() {
    return (
        <Inline>
            <PopoverTrigger>
                <Button aria-label="top popover" variant="secondary">Top</Button>
                <Popover placement="top">
                    <Heading>Popover top</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
            <PopoverTrigger>
                <Button aria-label="right popover" variant="secondary">Right</Button>
                <Popover placement="right">
                    <Heading>Popover right</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
            <PopoverTrigger>
                <Button aria-label="bottom popover" variant="secondary">Bottom</Button>
                <Popover placement="bottom">
                    <Heading>Popover bottom</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
            <PopoverTrigger>
                <Button aria-label="left popover" variant="secondary">Left</Button>
                <Popover placement="left">
                    <Heading>Popover left</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
        </Inline>
    );
}
 

import {
    Button,
    ButtonContext,
    Content,
    Heading,
    Popover,
    PopoverContext,
    PopoverTrigger,
    SlotProvider
} from "@hopper-ui/components";
import { type ReactNode, useRef, useState } from "react";
 
const HighlightedTrigger = ({ children }: { children: ReactNode }) => {
    const triggerRef = useRef(null);
    const [isOpen, setOpen] = useState(false);
 
    return (
        <SlotProvider values={[
            [PopoverContext, { isOpen, onOpenChange: setOpen }],
            [ButtonContext, {
                onPress: () => setOpen(!isOpen),
                ref: triggerRef,
                variant: isOpen ? "primary" : "secondary"
            }]
        ]}
        >
            {children}
        </SlotProvider>
    );
};
 
export default function Example() {
    return (
        <HighlightedTrigger>
            <PopoverTrigger>
                <Button>Company Profile</Button>
                <Popover>
                    <Heading>ACME</Heading>
                    <Content>
                    A tech company focusing on the development of software and hardware solutions.
                    </Content>
                </Popover>
            </PopoverTrigger>
        </HighlightedTrigger>
    );
}
 

import { Button, Content, Heading, Popover, Stack } from "@hopper-ui/components";
import { useRef, useState } from "react";
 
export default function Example() {
    const triggerRef = useRef(null);
    const [isOpen, setOpen] = useState(false);
 
    return (
        <>
            <Stack alignX="center">
                <Button
                    onPress={() => setOpen(!isOpen)}
                    variant="secondary"
                >
                    Company Profile
                </Button>
                <span ref={triggerRef}>Popover will be positioned relative to me</span>
            </Stack>
            <Popover triggerRef={triggerRef} isOpen={isOpen} onOpenChange={setOpen}>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
            </Popover>
        </>
    );
}