Popover

트리거 요소 위에 떠있는 팝오버 컴포넌트

Basic Usage

기본적인 팝오버 예시입니다. 버튼을 클릭하면 팝오버가 나타납니다.

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Popover Title</PopoverTitle>
      <PopoverDescription>
        팝오버에 대한 설명을 여기에 작성합니다.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

With Custom Content

팝오버 내부에 커스텀 컨텐츠를 넣을 수 있습니다.

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button>Settings</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <PopoverHeader>
      <PopoverTitle>Settings</PopoverTitle>
      <PopoverDescription>
        애플리케이션 설정을 관리합니다.
      </PopoverDescription>
    </PopoverHeader>
    <div className="grid gap-2 pt-4">
      <div className="flex items-center justify-between">
        <span className="text-sm">Notifications</span>
        <Button variant="outline" size="sm">Configure</Button>
      </div>
    </div>
  </PopoverContent>
</Popover>

Usage

tsx

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Open</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Title</PopoverTitle>
          <PopoverDescription>Description</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}